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
- Select all performance based plugins and 'Deactivate' the plugins
- 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
- 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
- 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
- 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
- Go to 'Site Optimizer' In Staq Cache
- Go to Extra Options
- Click enable on 'Optimize HTML'
- Save and refresh page, then re-test
- 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
- Go to 'CDN' in Staq Dashboard and click 'Deploy Now' on Next Gen CDN.
- Check if site is loaded from CloudFront
- Once you've verified it is, re-test site
- Install Snippets plugin
- Fetch code to disable Gutenburg
- Fetch code to disable Font Awesome
- 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
- Test if defer is a good option. Otherwise, use delay functions
- Debug issue via Chrome console
