Do you want to find out, how inefficient use of JS is preventing you from passing CWV and what to do about it? Click through!

2. 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

4. Why bother ?

5. as much as 80% of the popular
eCommerce stores in the USA use
JavaScript for generating main
content or links to similar products.
-Onely

6. Indexing JavaScript
https://www.youtube.com/watch?v=LXF8bM4g-J4

7. What are Core Web Vitals?

8. 1.Largest Contentful
Paint
2. First Input
Delay
3. Cumulative
Layout Shift
Metrics related to Speed
Responsiveness and Visual Stability.

9. 1. Largest Contentful Paint
It measures the time a website takes to
show the user the largest content on the
screen.

10. 2. First Input Delay
Measures the time from the first user
interaction to the point when the browser is
able to respond to it.

11. 3. Cumulative Layout Shift
It measures how often user experience
unexpected layout shifts.

12. Why are core web vitals important ?
Core Web Vitals
are part of page
experience a
new ranking
factor.

13. How to pass Core Web Vitals?

15. 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

16. The problem is not JS itself, but the
way it is implemented.

17. Most common JS issues
discovered

18. 1.Unused Javascript
2.Too long JavaScript
execution time
3.Render blocking
resources
4. Legacy javascript served
to modern browsers

19. How to deal with most common
JS issues?

20. Unless you are very familiar with dev work…
find a good developer to help you through it

21. 1.Unused JavaScript

22. 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.

23. Unused JavaScript
unnecessarily increases
browser execution time, slowing
down your page load.

24. What if browser is loading unused JS resources before your LCP
!?
What if unused JS is loaded
before my LCP???

25. How to solve unused JS issue?

26. Code splitting
Separate JS into critical and non-
critical. This will lead to reducing
render blocking behaviour as only
critical JS is loaded first.

27. 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

28. 2.Too long JavaScript execution
time

29. Reducing JavaScript execution
time,in general, refers to
decreasing the amount of time
spent parsing, compiling, and
executing JavaScript files.

30. By default, JavaScript executes
on the main-thread and when
this is happening, the browser
cannot execute other tasks.

31. Optimising FID is mainly done by
reducing the time during which the
browser's main thread is blocked!

32. How to reduce JS execution
time?

33. ● Implement code splitting
● Removing unused code
● Caching your code with the PRPL
pattern
● Minifying and compressing JS files

34. ● 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

35. Minification - removing whitespace
and anything else that is not
necessary to create smaller but valid
code.
Minifying JS files

36. 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

37. 3.Render blocking resources

38. Render blocking resources are
parts of code in website files that
prevent a page from loading
quickly.

39. Identifying render blocking resources

40. Identifying critical resources

41. How to eliminate render blocking
resources

42. ● JS at the bottom of HTML
● Async or defer attribute
● Custom solutions
● Plugins

43. 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

44. ● 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

45. 4.Legacy javascript served to
modern browsers

46. Unnecessary legacy code is often being
shipped to modern browsers even
though they have native support for
modern JavaScript features

47. ….this increases
the size of the
JavaScript files
being downloaded,
parsed, and
executed by the
browser.

48. Adopting a modern script
deployment strategy can reduce
the amount of code shipped to the
majority of your visitors,
improving their page experience.

49. JS is a fundamental part of the
web.

50. So should be JS SEO

51. Properly optimised
JS can lead to way
better performance
and user
experience.

52. EXAMPLE !!!

53. Creatos Media Speed lack of performance...

54. And again

55. And again

56. CWV before I started working on this preso

57. Eliminating render blocking with WP Rocket plugin

58. Eliminating render blocking with WP Rocket plugin

59. Unused JavaScript

60. CWV after WP Rocket

61. How to audit core web vitals

62. Screaming
Frog
Sitebulb

63. How to avoid JS mistakes ?

64. Write your own code or use
lightweight code instead of using
bloated plugins and addons.

65. If possible, include only what you
have to

66. Always minify and compress
JavaScript straight away.

67. Delete everything that is not
needed in the production

68. 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/

69. 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