The 'how-to' guide to improving your Google Core Web Vitals score.

Below is a video tutorial on how you can improve your PageSpeed Insights or GTMetrix scores by using the Staq Hosting caching and optimizer tool.

1 - CORE WEB VITALS

Welcome to the Staq guide on how to become a Core Web Vitals expert. Please make sure that the website has already been migrated to Staq or already exists on Staq. Click to see how to migrate a website to Staq.

  • Open Chrome browser in Incognito Mode, right click on the page and click inspect
  • Go to 'Network' and make sure you have 'Disable Cache' turned on
3 - REVIEW EXISTING PLUGINS
  • Select all performance based plugins and 'Deactivate' the plugins
4 - HOW GOOGLE CALCULATES CORE WEB VITALS
  • Go to Lighthouse Scoring Calculator and evaluate how you can improve your website speeds.
  • Open URL in Chrome Incognito mode
  • Go to www.speedvitals.com and test the URL
  • In Chrome, click on 'Lighthouse' and then click 'Generate report'
  • Evaluate www.speedvitals.com waterfall breakdown and look for slowest aspects and where potential improvements are
  • Turn on Staq Cache
5 - OPTIMIZING
  • In Staq Cache, click 'Enable Optimizer for website'
  • Click CSS > 'Minify', 'Defer' and 'Extract critical CSS' and click Save
  • Refresh page to rebuild cache
  • Re-test site
6 - IMAGE OPTIMIZATION
  • Go to 'Site Optimizer' In Staq Cache
  • Go to Media, click Serve images in Next Gen and 'Rewrite URLS'
  • Save and refresh page to rebuild cache
  • Regenerate report.
  • Now click 'Lazy Load' in Site Optimizer
  • In lazy load text box, copy all images you shouldn't lazy load, such as the site logo.
  • Refresh page and then re-test the page
7 - OPTIMIZING JAVASCRIPT FILES
  • Go to 'Site Optimizer' In Staq Cache
  • Go to Javascript
  • Minify tags, Minify files, Combine Javascript and Delay Javascript
  • Save and refresh page, then re-test
  • Delay Javascript Execution
  • Save and refresh page, then re-test
  • Open the page with ?nocache after the URL
  • Open selector and find the affected DIV and find code containing the image
8 - REDUCING HTML SIZE
  • Go to 'Site Optimizer' In Staq Cache
  • Go to Extra Options
  • Click enable on 'Optimize HTML'
  • Save and refresh page, then re-test
9 - REDUCING UNUSED CSS
  • Go to 'Site Optimizer' In Staq Cache
  • Go to CSS, Optimize Google Fonts and click Remove Google Fonts
  • Save and refresh page, then re-test
  • Go to 'Site Optimizer' In Staq Cache
  • Go to CSS and 'Regenerate Critical CSS'
  • In 'Elementor' in WordPress dashboard, go into Settings, then Experiments
  • Click Enable Optimized DOM Output
10 - STAQ NEXT GEN CDN (PART 1)
  • Go to 'CDN' in Staq Dashboard and click 'Deploy Now' on Next Gen CDN.
11 - STAQ NEXT GEN CDN (PART 2)
  • Check if site is loaded from CloudFront
  • Once you've verified it is, re-test site
12 - DISABLING GUTERBERG & FONT AWESOME
13 - TESTING THE SITE
  • Test every site function on your desktop
  • Test every site function on your mobile device
  • Go to 'Site Optimizer' in Staq Cache > Javascript and Enable 'Apply after combine javascript' is loaded under 'Double Click Fix for Mobile' and click save.>
  • Re-test
14 - DELAYING & DEFERRING JAVASCRIPT
  • Test if defer is a good option. Otherwise, use delay functions
15 - FIX JAVASCRIPT ERRORS
  • Debug issue via Chrome console
see-how-bg