Learn about how to organise the Core Web Vitals Audit, what tools to use and get thing done.
Table of Contents
During last year everybody in the SEO community was talking about Core Web Vitals update from Google. I decided to use it as an opportunity to deepen my tech knowledge and work closely with developers. After 6+ months of working on page speed optimisation, I came up with a pretty good CWV audit and improvement process I am using now. I hope this will help other people in the industry without deep tech and code knowledge to be more confident with Page Speed & CWV audits. The article consists of two parts: the audit process & a list of main issues and how you can solve them.
Core Web Vitals Audit
In this part, we will go through the process and steps of the audit with examples of documents and instruments to use.
Instruments
Collect the data from different sources
Step 1
In the first step, I use Sitebulb to audit the website. It helps to understand what is going with the website’s page speed, security and other tech issues.
Configure an audit:
- In the crawler’s setting, choose Chrome Crawler
- Choose to crawl the mobile version of the website
- Choose Page Resources, Page Performance & Security
- Keep in mind that by default, Sitebulb will collect only 10% of the Web Vitals metrics per page while it does not apply to the Hints (issues and opportunities)
Sitebulb has a good tutorial about it. Also, I have added screenshots of where you need to change the setting to the one you need for CWV.
As an outcome, you will have a list of issues divided by priorities. For each hint (if possible), you have a list of URLs affected by it. Also, for some hints, you can see the code error marked in red. That is pretty useful to understand what is behind the name of the issue.
Step 2
Create a spreadsheet and add them to the document. I am using Google Sheets as it is easy to share afterwards with colleges and track statuses. Here are the columns used in the document:
- the type (Page Speed /Security/Mobile Friendliness)
- name of the issue
- description of the issue and how to fix it
- priority
- comments about how many pages affected by it
- month to solve this issue
Sitebulb data is very valuable and easy to use. Also, I found that it is beneficial to review the some issues with Chrome DevTools. As a result, you can provide more details to developers supported with the data from Sitebulb and your tests. We will talk about that in a few steps.
Step 3
Crawl the website with Screaming Frog to have data for each page about its performance. You can connect PageSpeed Insights through API to Screaming Frog and have all the data per page. They have a pretty good guide on how to do the settings for this kind of crawl here.
Copy all the data to the Google Sheet you have created as an additional tab.
We use this data to see the results of the optimisation work by comprising data for the month before optimisation and after work has been done.
Step 4
We have already the data from Sitebulb about the main issues and opportunities to improve our website. The next step is to identify the main templates we would like to work on. For example, in my case, we had an e-commerce shop, and we were working on five templates:
- Home page
- Category pages
- Product pages
- Blog articles
For each template, we review data manually with PageSpeed insights. Collect your average score of each template. I add it manually in the table on Google Sheets. Keep in mind to run at least three rounds for each page to see the average score. They can (and will) be slightly different.
Add additional issues and opportunities from PageSpeed Insights to Google Sheet, where we have already Sitebulb data. While most of the issues overlap, there will be new suggestions for improvements.
Review the data you have collected to prepare action plan
For some issues found by Sitebulb/PageSpeed Insights, I do additional research to provide details to the developer. I use the data from Sitebulb: URL affected by this and Hints details I have mentioned earlier. Also, I recommend investigating deeper issues like Render Blocking Resources & Unused CSS/JS. It will help you to set priorities for developers by resource.
Eliminate Render Blocking Resources
Use WebPageTest to check what render-blocking resources you have on pages. They are marked with X in orange.
Create Google Word with this data or add screenshot links to the spreadsheet we have created.
Remove Unused CSS and Javascript
I use Chrome DevTools to get more details. You click inspect on the page you would like to investigate and choose the Performance tab.
There is also a report in Sitebulb. It shows not only unused bytes but also how many pages have this.
Additional things to check
Check Console in DevTools for any errors. Click Inspect and choose Console tab for details. These errors could indirectly influence page speed and user experience on the website.
Use SpeedVitals for even more insights and things to improve
SpeedVitals shows you not only suggestions from the PageSpeed Insights but provide additional things to improve. To see the list click on the Boost performance section and add relevant tasks/issues to the spreadsheet you have created.
In the end, you will have a list of issues from three tools: Sitebulb, PageSpeed Insights and SpeedVitals, supported by your additional manual tests with Chrome Devtools. Do not forget to add this findings to the spreadsheet.
Set priorities
After collecting and reviewing all the data, we need to prioritise the tasks we have. I use suggestions about priority from Sitebulb, how many pages are affected (or templates) and how easy it is to accomplish. It is not always easy to estimate the outcome, but ideally, this is also very important to keep in mind during prioritisation.
Discuss with developer
After we have the spreadsheet finalised, we have to discuss the prioritisation with the developers. For me, it is a valuable part because you have input from the person who actually will implement most of the recommendations.
Create a road map
After the discussion, create a road map for 3-6 months depends on the list of tasks and how much time you can allocate.
Review results each month
After each month, review the performance using Screaming Frog and manual checks through PageSpeed Insights. You need to know how the website has improved and spot any bugs which can pop up after the optimisation work. Also, sometimes fixing one issue leads to improvements in other areas you had in the pipeline.
Do not skip to review the task which is marked as accomplished if one of the tools still shows this as an opportunity for optimisation. There were cases where we had 2-3 rounds of improvements. The developer has done what was easy/clear to do in the first round. After that, I deepen my research on that specific issue and bring more details/possible solutions. And we have another round of development work.
Common Issues
I worked with different websites on WordPress and have come up with a list of general issues and improvements we can make to speed up the website and make it more secure.
Here is the list of issues and tools/plugins to use to improve it or articles about how to improve this area.
Code Improvements
- Minify HTML, CSS, Javascript
- Tools: plugin Autoptimize
- To read: while I have seen Autoptimize is not the ideal one, we are using it for now. You can check additional information about plugins and page speed here.
- Eliminate render-blocking resources
- Tools: use WebPageTest to find resources for each page.
- To read: https://kinsta.com/blog/eliminate-render-blocking-javascript-css/
- Specifically for Typekit: Blog Typekit & Css-Tricks
- Remove unused CSS & JS
- Tools: use ChromeDev to identify these resources. You can also use Asset Clean Up plugin. Be careful with it. While we had tested it, it has broken our website. But the review are good, so you can try it 🙂
Images
- Add width and height for image elements
- I have done that for main templates manually through the code.
- Lazy loading images & do not lazy load images above-the-fold (logo and header images)
- Tooles: plugin Autoptimize
- To read: Kinsta Blog
- Optimize size of the images.
- Tools: ShortPixel plugin
- Preload Largest Contentful Paint image
- To read: Corewebvitals.io
- Add favicon if you do not have one
- Self-host Google Fonts
- Lazy load videos
- Remove Unused Icons from Font files
Security
- Use https:// URLs when loading resources on your page
- You do need a plugin to fix this in most of the case. Either you fix it manually in the code or ask developers help. It is easy fix and improve the security a lot.
- If a resource is available over SSL, then always use the https:// URI
- Same here. You can either do this manually in Theme Editor or ask developers help.
In conclusion
Hope that this audit and working process will be helpful. Especially for people who just started to work on PageSpeed optimisation. Do not hesitate to contact me through LinkedIn or email if you have any questions.
Author: Irina Serdyukovskaya