Rules:
20+
Reduce js execution Time by removing unnecessary.
inline critical css & load remaining css in footer
Test your server efficiency from different locations to reduce TTFB root cause of all issues.
detailed article reduce TTFB / server response time (you should be server,sys,db,app admin)
Images : biggest resources size images, then js, html, then css.
| Mobile | Desktop | ||||||
|---|---|---|---|---|---|---|---|
| Audit | Weight | Green | Yellow | Red | Green | Yellow | Red |
| First Contentful Paint | 15% | 0–2s | 2–4 | 4+sec | 390 ms | 390-1590 | |
| Speed Index | 15% | 0–4.3 | 4.4–5.8 | Over 5.8 | 720 ms | ||
| Largest Contentful Paint | 25% | 2.5 | 2.5-4sec | Over 4sec | 620 ms | ||
| Time to Interactive | 15% | 0–3.8 | 3.9–7.3 | Over 7.3 | 869 ms | ||
| Total Blocking Time | 25% | 0–300 | 300-600 | Over 600 | 60ms | ||
| Cumulative Layout Shift | 5% | 0.1 | 0.25 | 0.25+ | 0.03 | ||
Google pagespeed insights score Red To Green
- 0 to 49 (red): Poor
- 50 to 89 (orange): Needs Improvement
- 90 to 100 (green): Good
Speed index Score
comparison of your page’s speed index and the speed indices of real websites, based on data from the HTTP Archive.
how quickly contents of a page visibility populated.
3.2sec green
4.2 need improve
4.2+ need to fix
Minimize main thread work
Reduce JavaScript execution time
Reduce JavaScript execution time
largest contentful paint LCP
largest image or text painted time.
green 2.4secs passes contributes 25% in 100%psi score.
2.4- 4 secs then need to improve
4 second s + delay indicates as red errors. Need to fix.
If FCP passed green then LCP do.
time to interactive TTI
amount of time it’s taken to a page to fully interactive.
Dom Loaded vs fully loaded.
page loads in 1 sec, but adsense loads in 6-9 secs
Total blocking time
Unnecessary JavaScript loading, parsing, or execution
sum of all the time from
FCP to TTI=
when task length exceeded 50ms
more than 50ms script execution treated as long task, counted each from FCP to TTI
1.6sec is good score. but it’s often cross the 4-5 seconds due to js download, parse and excute
ex: Google Adsense (it improves by reducing ads)
1600ms or 1.6sec
cumulative layout shift CLS
CLS is filed data not lab or realtime
measures movement of visible elements within viewport
in desktop wordpress sidebar has to populate, but in mobile no need.
The score percentage is 15% in lighthouse.
Ideal 0.1sec to 0.25 (100ms-250ms)
CLS score in sec 0.1 to 0.25 to 0.25+
most of the uses almost 80%-90% visiting from mobile then we keep it in less priority.
Disabling sidebar not a good idea, also fixing cause of slow sidebar population code level practices & performance level.
Avoid large layout shifts
Impact of 3rd party code
blocked main thread for
1180 ms
Core web vitals
FCP
LCP Loading
2.5
2.5-4 sec
4+sec
FID (fist input delay) interactivity
100ms
100-300 ms
300+ ms
This is a field data, (past 28 days report from Google search console, chrome, psi etc)
Lab data is instant test results,
By improving
total blocking time and time to interactive improves FDI.
First input delay user interaction after page load, search or touch the page.
1st Step How to Improve FCP & LCP
Slow server response times / TTFB
Render-blocking JavaScript and CSS
Critical Rendering Path
First content full paint FCP vs TTFB
TTFB= DNS Lookup , TCP handshake + SSL +first byte(background server+php+mysql)
first image or text pointed time
FMP: First Meaningful Paint.
Read More on How to Reduce TTFB / Server Response time (Server access needed)
green
yellow
red
LCP Largest Contentful Paint
FCP & LCP not captures the load responsiveness
(how quickly a page responds to user action)
total blocking time TBT helps to fix FID & TTI
poor FID is heavy JavaScript execution.
browser cannot respond to most user input while it’s executing JavaScript on the main thread
75% of page loads at green for past 28 days.
tools collected
search console
PSI
chrome user experience report
don’t load those below-the-fold ads until they’re scrolled closer to the viewport
Defer js
parse, compile, and execute that JavaScript
<script defer src=”…”></script>
<script async src=”…”></script>
Pagespeed Insights Lab Data
Lab Data shows specific data for a simulated page load:
Field Data uses actual loading speeds collected over time.
Minimize main thread work
Reduce javascript execution time
reduce ttfb passed audits
lighthouse scoring for mobile
Preconnect to Required Origins
header.php or add header
preload files headers.php
Main-Thread Work
more than 50ms considered bas long task or main thread.
Old Rules without lighthouse V6
Gzip
eliminate render blocking resources
Reduce server response time TTFB
With light house New Rules
FCP first meaningful paint
LCP last meaningful Paint
TBT total blocking time
TTI Total time to interactive
FID first input delay (TTI,TBT)
also read improving score in gtmetrix.
PRPL pattern
Push Preload preconnect pre browsing hints
Eliminate render blocking
Eliminate render blocking
Pre-cache Service worker
Lazy load other routes and non-critical assets. Images,s in footer
Lazy load other routes and non-critical assets. Images,s in footer