SlideShare a Scribd company logo
Brighton SEO July 2021   How JavaScript is preventing you from passing Core Web Vitals ?
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
Brighton SEO July 2021   How JavaScript is preventing you from passing Core Web Vitals ?
Why bother ?
as much as 80% of the popular
eCommerce stores in the USA use
JavaScript for generating main
content or links to similar products.
-Onely
Indexing JavaScript
https://www.youtube.com/watch?v=LXF8bM4g-J4
What are Core Web Vitals?
1.Largest Contentful
Paint
2. First Input
Delay
3. Cumulative
Layout Shift
Metrics related to Speed
Responsiveness and Visual Stability.
1. Largest Contentful Paint
It measures the time a website takes to
show the user the largest content on the
screen.
2. First Input Delay
Measures the time from the first user
interaction to the point when the browser is
able to respond to it.
3. Cumulative Layout Shift
It measures how often user experience
unexpected layout shifts.
Why are core web vitals important ?
Core Web Vitals
are part of page
experience a
new ranking
factor.
How to pass Core Web Vitals?
Brighton SEO July 2021   How JavaScript is preventing you from passing Core Web Vitals ?
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
The problem is not JS itself, but the
way it is implemented.
Most common JS issues
discovered
1.Unused Javascript
2.Too long JavaScript
execution time
3.Render blocking
resources
4. Legacy javascript served
to modern browsers
How to deal with most common
JS issues?
Unless you are very familiar with dev work…
find a good developer to help you through it
1.Unused JavaScript
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.
Unused JavaScript
unnecessarily increases
browser execution time, slowing
down your page load.
What if browser is loading unused JS resources before your LCP
!?
What if unused JS is loaded
before my LCP???
How to solve unused JS issue?
Code splitting
Separate JS into critical and non-
critical. This will lead to reducing
render blocking behaviour as only
critical JS is loaded first.
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
2.Too long JavaScript execution
time
Reducing JavaScript execution
time,in general, refers to
decreasing the amount of time
spent parsing, compiling, and
executing JavaScript files.
By default, JavaScript executes
on the main-thread and when
this is happening, the browser
cannot execute other tasks.
Optimising FID is mainly done by
reducing the time during which the
browser's main thread is blocked!
How to reduce JS execution
time?
● Implement code splitting
● Removing unused code
● Caching your code with the PRPL
pattern
● Minifying and compressing JS files
● 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
Minification - removing whitespace
and anything else that is not
necessary to create smaller but valid
code.
Minifying JS files
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
3.Render blocking resources
Render blocking resources are
parts of code in website files that
prevent a page from loading
quickly.
Identifying render blocking resources
Identifying critical resources
How to eliminate render blocking
resources
● JS at the bottom of HTML
● Async or defer attribute
● Custom solutions
● Plugins
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
● 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
4.Legacy javascript served to
modern browsers
Unnecessary legacy code is often being
shipped to modern browsers even
though they have native support for
modern JavaScript features
….this increases
the size of the
JavaScript files
being downloaded,
parsed, and
executed by the
browser.
Adopting a modern script
deployment strategy can reduce
the amount of code shipped to the
majority of your visitors,
improving their page experience.
JS is a fundamental part of the
web.
So should be JS SEO
Properly optimised
JS can lead to way
better performance
and user
experience.
EXAMPLE !!!
Creatos Media Speed lack of performance...
And again
And again
CWV before I started working on this preso
Eliminating render blocking with WP Rocket plugin
Eliminating render blocking with WP Rocket plugin
Unused JavaScript
CWV after WP Rocket
How to audit core web vitals
Screaming
Frog
Sitebulb
How to avoid JS mistakes ?
Write your own code or use
lightweight code instead of using
bloated plugins and addons.
If possible, include only what you
have to
Always minify and compress
JavaScript straight away.
Delete everything that is not
needed in the production
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/
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

More Related Content

What's hot (20)

PPTX
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
 
PDF
Deep crawl the chaotic landscape of JavaScript
Onely
 
PDF
SEO for Large/Enterprise Websites - Data & Tech Side
Dominic Woodman
 
PPTX
SEO for Large Websites
Dominic Woodman
 
PPTX
Three site speed optimisation tips to make your website REALLY fast - Brighto...
Bastian Grimm
 
PDF
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
Jamie Indigo
 
PPTX
The New Renaissance of JavaScript
Hamlet Batista
 
PPTX
Rendering SEO (explained by Google's Martin Splitt)
Anton Shulke
 
PDF
Web Performance & Search Engines - A look beyond rankings
Giacomo Zecchini
 
PDF
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
Catalyst
 
PDF
Hey Googlebot, did you cache that ?
Petra Kis-Herczegh
 
PDF
JavaScript Tips & Tricks 2018 - SMX East
Onely
 
PPTX
How Much Content is Not Indexed in Google in 2019?
Onely
 
PPTX
How App Indexation Works
SerenaPearson2
 
PDF
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Onely
 
PPTX
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Gerry White
 
PDF
The State of the Web: Pagination and Infinite Scroll
Adam Gent
 
PDF
The New Renaissance of JavaScript - SMX London 2019
Onely
 
PDF
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021
Chris Green
 
PDF
AMP - SMX München 2018
Bastian Grimm
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
 
Deep crawl the chaotic landscape of JavaScript
Onely
 
SEO for Large/Enterprise Websites - Data & Tech Side
Dominic Woodman
 
SEO for Large Websites
Dominic Woodman
 
Three site speed optimisation tips to make your website REALLY fast - Brighto...
Bastian Grimm
 
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
Jamie Indigo
 
The New Renaissance of JavaScript
Hamlet Batista
 
Rendering SEO (explained by Google's Martin Splitt)
Anton Shulke
 
Web Performance & Search Engines - A look beyond rankings
Giacomo Zecchini
 
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
Catalyst
 
Hey Googlebot, did you cache that ?
Petra Kis-Herczegh
 
JavaScript Tips & Tricks 2018 - SMX East
Onely
 
How Much Content is Not Indexed in Google in 2019?
Onely
 
How App Indexation Works
SerenaPearson2
 
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Onely
 
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Gerry White
 
The State of the Web: Pagination and Infinite Scroll
Adam Gent
 
The New Renaissance of JavaScript - SMX London 2019
Onely
 
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021
Chris Green
 
AMP - SMX München 2018
Bastian Grimm
 

Similar to Brighton SEO July 2021 How JavaScript is preventing you from passing Core Web Vitals ? (20)

PPTX
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Izabela Wisniewska
 
PDF
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
PDF
Web Client Performance
Herea Adrian
 
PPTX
Java script Session No 1
Saif Ullah Dar
 
PDF
wt mod3.pdf
VinayKumarV24
 
PPTX
Javascript & Jquery
Gurpreet singh
 
PDF
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
RapidValue
 
PPTX
An Introduction to Pagespeed Optimisation
Pratyush Majumdar
 
PDF
Tips tricks deliver_high_performing_secure_web_pages
Aditya Singh
 
PDF
implement lighthouse-ci with your web development workflow
WordPress
 
PPTX
Performace optimization (increase website speed)
clickramanm
 
PPTX
JS digest. Decemebr 2017
ElifTech
 
PPTX
Developing high performance and responsive web apps using web worker
Suresh Patidar
 
PDF
DrupalCampLA 2011 - Drupal frontend-optimizing
Ashok Modi
 
PDF
How to speed up your website
VernalWeb
 
PDF
Cache is keeping you from reaching the full potential as a developer (word ca...
Thomas Audunhus
 
PDF
Single page applications
Diego Cardozo
 
PPTX
Introduction to Jquery
Gurpreet singh
 
PPTX
Performance Tuning Web Apps - The Need For Speed
Vijay Rayapati
 
PDF
Core Web Vitals in Website Design.pdf
WebGuru Infosystems Pvt. Ltd.
 
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Izabela Wisniewska
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
Web Client Performance
Herea Adrian
 
Java script Session No 1
Saif Ullah Dar
 
wt mod3.pdf
VinayKumarV24
 
Javascript & Jquery
Gurpreet singh
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
RapidValue
 
An Introduction to Pagespeed Optimisation
Pratyush Majumdar
 
Tips tricks deliver_high_performing_secure_web_pages
Aditya Singh
 
implement lighthouse-ci with your web development workflow
WordPress
 
Performace optimization (increase website speed)
clickramanm
 
JS digest. Decemebr 2017
ElifTech
 
Developing high performance and responsive web apps using web worker
Suresh Patidar
 
DrupalCampLA 2011 - Drupal frontend-optimizing
Ashok Modi
 
How to speed up your website
VernalWeb
 
Cache is keeping you from reaching the full potential as a developer (word ca...
Thomas Audunhus
 
Single page applications
Diego Cardozo
 
Introduction to Jquery
Gurpreet singh
 
Performance Tuning Web Apps - The Need For Speed
Vijay Rayapati
 
Core Web Vitals in Website Design.pdf
WebGuru Infosystems Pvt. Ltd.
 
Ad

Recently uploaded (20)

PDF
Bulk Voice Call Services – Best Voice Solutions for Delhi NCR Businesses
Mishtel Services Private Limited
 
PDF
Online Digital Marketing Training in ODMT
praneethajmankar
 
PDF
What’s Next For AI Master Class - Nick Mattar, Digital Detroit LLC
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
PDF
Career Protfolio - Ms. Rence Arizapa.pdf
rencecubelo
 
PPTX
ICT4YOUTH Project - Dissemination activities by Gov2u
Pantelis Kanellopoulos
 
PPTX
Themordynamics Unit 2 Mechanical First year
TonderaiMayisiri
 
PPTX
📈 Digital Marketing Course 2.pptx......
satsahibsatshib9
 
PDF
2014 - External Marketing Strategies PPT
Cheryl M
 
PDF
New Google AI Mode: Everything You Need To Know & What To Do Next
Search Engine Journal
 
PDF
Give a Damn Mindset - Justin Ricklefs, Guild Collective
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
PPTX
Content marketing in the travel industry
elliotknight964
 
PDF
Wimbush_Yeshiva_DMBS_PB1_2025-01 update.pdf
yeshwimbu
 
PDF
VirtualRep
VirtualRep
 
PPTX
E-Commerce SEO Market in Dubai 2025: Trends, Insights & Strategy
Rankability
 
PPTX
Surface Cleaner. Megaclean is a Surface cleaner
danishhussain1003
 
PPTX
Optimizing for AI Chatbots - Pubcon Austin 2025 - Jesse McDonald (@jesseseogeek)
Jesse McDonald
 
PDF
From Invisible to Iconic: How to Outrank With Multi-Format AI SEO - Zhelinren...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
PPTX
STP Marketing Strategy – Segmentation, Targeting & Positioning Made Simple
Dr. Rani Sharma
 
PPTX
reflecto r telescope | Pie Matrix | pptx
Pie Matrix
 
PDF
Redacted Market Dynamics Report - Germany Pet Food
Mintel Group
 
Bulk Voice Call Services – Best Voice Solutions for Delhi NCR Businesses
Mishtel Services Private Limited
 
Online Digital Marketing Training in ODMT
praneethajmankar
 
What’s Next For AI Master Class - Nick Mattar, Digital Detroit LLC
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Career Protfolio - Ms. Rence Arizapa.pdf
rencecubelo
 
ICT4YOUTH Project - Dissemination activities by Gov2u
Pantelis Kanellopoulos
 
Themordynamics Unit 2 Mechanical First year
TonderaiMayisiri
 
📈 Digital Marketing Course 2.pptx......
satsahibsatshib9
 
2014 - External Marketing Strategies PPT
Cheryl M
 
New Google AI Mode: Everything You Need To Know & What To Do Next
Search Engine Journal
 
Give a Damn Mindset - Justin Ricklefs, Guild Collective
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Content marketing in the travel industry
elliotknight964
 
Wimbush_Yeshiva_DMBS_PB1_2025-01 update.pdf
yeshwimbu
 
VirtualRep
VirtualRep
 
E-Commerce SEO Market in Dubai 2025: Trends, Insights & Strategy
Rankability
 
Surface Cleaner. Megaclean is a Surface cleaner
danishhussain1003
 
Optimizing for AI Chatbots - Pubcon Austin 2025 - Jesse McDonald (@jesseseogeek)
Jesse McDonald
 
From Invisible to Iconic: How to Outrank With Multi-Format AI SEO - Zhelinren...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
STP Marketing Strategy – Segmentation, Targeting & Positioning Made Simple
Dr. Rani Sharma
 
reflecto r telescope | Pie Matrix | pptx
Pie Matrix
 
Redacted Market Dynamics Report - Germany Pet Food
Mintel Group
 
Ad

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