Successfully reported this slideshow.
Your SlideShare is downloading. ×

Brighton SEO July 2021 How JavaScript is preventing you from passing Core Web Vitals ?

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Brighton SEO July 2021 How JavaScript is preventing you from passing Core Web Vitals ?

  1. 1. Agenda 1. Why should we bother with JS? 2. Indexing JS content 3. What are Core Web Vitals? 4.How to pass Core Web Vitals? 5.Most common JS issues and solutions 6.Example of fixing JS issues and influence on CWV 7. How to audit Core Web Vitals? 8.How to avoid JS mistakes
  2. 2. Why bother ?
  3. 3. as much as 80% of the popular eCommerce stores in the USA use JavaScript for generating main content or links to similar products. -Onely
  4. 4. Indexing JavaScript https://www.youtube.com/watch?v=LXF8bM4g-J4
  5. 5. What are Core Web Vitals?
  6. 6. 1.Largest Contentful Paint 2. First Input Delay 3. Cumulative Layout Shift Metrics related to Speed Responsiveness and Visual Stability.
  7. 7. 1. Largest Contentful Paint It measures the time a website takes to show the user the largest content on the screen.
  8. 8. 2. First Input Delay Measures the time from the first user interaction to the point when the browser is able to respond to it.
  9. 9. 3. Cumulative Layout Shift It measures how often user experience unexpected layout shifts.
  10. 10. Why are core web vitals important ? Core Web Vitals are part of page experience a new ranking factor.
  11. 11. How to pass Core Web Vitals?
  12. 12. Analysis of pages across various industries not passing CWV No of pages Failing CWV Failing LCP Failing FID Failing CLS JavaScript Issues 22 19 17 2 12 22
  13. 13. The problem is not JS itself, but the way it is implemented.
  14. 14. Most common JS issues discovered
  15. 15. 1.Unused Javascript 2.Too long JavaScript execution time 3.Render blocking resources 4. Legacy javascript served to modern browsers
  16. 16. How to deal with most common JS issues?
  17. 17. Unless you are very familiar with dev work… find a good developer to help you through it
  18. 18. 1.Unused JavaScript
  19. 19. By default, JavaScript files are render-blocking because they block the browser from dealing with other page load tasks, thus delaying your page's First Paint.
  20. 20. Unused JavaScript unnecessarily increases browser execution time, slowing down your page load.
  21. 21. What if browser is loading unused JS resources before your LCP !? What if unused JS is loaded before my LCP???
  22. 22. How to solve unused JS issue?
  23. 23. Code splitting Separate JS into critical and non- critical. This will lead to reducing render blocking behaviour as only critical JS is loaded first.
  24. 24. This is the process of removing all JS that your page isn't currently using. For example pieces of code from previous site versions, or code used during tests. Dead code elimination
  25. 25. 2.Too long JavaScript execution time
  26. 26. Reducing JavaScript execution time,in general, refers to decreasing the amount of time spent parsing, compiling, and executing JavaScript files.
  27. 27. By default, JavaScript executes on the main-thread and when this is happening, the browser cannot execute other tasks.
  28. 28. Optimising FID is mainly done by reducing the time during which the browser's main thread is blocked!
  29. 29. How to reduce JS execution time?
  30. 30. ● Implement code splitting ● Removing unused code ● Caching your code with the PRPL pattern ● Minifying and compressing JS files
  31. 31. ● Push (or preload) the most important resources. ● Render the initial route as soon as possible. ● Pre-cache remaining assets. ● Lazy load other routes and non-critical assets. PRPL pattern
  32. 32. Minification - removing whitespace and anything else that is not necessary to create smaller but valid code. Minifying JS files
  33. 33. Compression - modifying data with compression algorithm. ● Dynamic - compressing assets on the go as they get requested by the browser. ● Static- compressing and saving assets. Compressing JS files
  34. 34. 3.Render blocking resources
  35. 35. Render blocking resources are parts of code in website files that prevent a page from loading quickly.
  36. 36. Identifying render blocking resources
  37. 37. Identifying critical resources
  38. 38. How to eliminate render blocking resources
  39. 39. ● JS at the bottom of HTML ● Async or defer attribute ● Custom solutions ● Plugins
  40. 40. JS at the bottom of HTML document, it's considered best practice as the higher the code is the sooner it will be downloaded and executed. JS at the bottom of the HTML
  41. 41. ● Async - load JS asynchronously AND fetch script when resources become available, once downloaded HTML is paused to execute JS ● Defer - load JS asynchronously AND wait to execute JS until the HTML parsing is complete Async or defer attribute
  42. 42. 4.Legacy javascript served to modern browsers
  43. 43. Unnecessary legacy code is often being shipped to modern browsers even though they have native support for modern JavaScript features
  44. 44. ….this increases the size of the JavaScript files being downloaded, parsed, and executed by the browser.
  45. 45. Adopting a modern script deployment strategy can reduce the amount of code shipped to the majority of your visitors, improving their page experience.
  46. 46. JS is a fundamental part of the web.
  47. 47. So should be JS SEO
  48. 48. Properly optimised JS can lead to way better performance and user experience.
  49. 49. EXAMPLE !!!
  50. 50. Creatos Media Speed lack of performance...
  51. 51. And again
  52. 52. And again
  53. 53. CWV before I started working on this preso
  54. 54. Eliminating render blocking with WP Rocket plugin
  55. 55. Eliminating render blocking with WP Rocket plugin
  56. 56. Unused JavaScript
  57. 57. CWV after WP Rocket
  58. 58. How to audit core web vitals
  59. 59. Screaming Frog Sitebulb
  60. 60. How to avoid JS mistakes ?
  61. 61. Write your own code or use lightweight code instead of using bloated plugins and addons.
  62. 62. If possible, include only what you have to
  63. 63. Always minify and compress JavaScript straight away.
  64. 64. Delete everything that is not needed in the production
  65. 65. Resources https://www.searchenginejournal.com/identify-reduce-render-blocking- resources/316365/ https://web.dev/ https://searchengineland.com/how-to-audit-core-web-vitals-346076 https://www.onely.com/blog/ultimate-guide-javascript-seo/ https://developers.google.com/search/docs/guides/javascript-seo-basics https://sitebulb.com/resources/guides/how-javascript-rendering-affects-google- indexing/
  66. 66. Thank you ! Thanks for listening to my talk! If you have any questions or comments or just want to have a chat, please contact me ! Email: izabela@creatosmedia.co.uk Twitter @izzy_cm

×