Last week, not only did Jon Henshaw talk us through his detailed presentation on site speed optimisation during our webinar, but he also answered some great questions that were submitted to him by our attendees.
In fact, there were so many questions submitted to Jon that we had to give them their own dedicated post! Some of the questions below were answered during the webinar, but Jon wrote up answers to the remaining questions we didn’t have time to ask him during the session. So read on to find out a site speed expert’s answers to some pressing questions posed to him by the SEO community.
What’s your guidance on handling 3rd party scripts that you have no control over?
It’s important to find the balance between critical and non-critical scripts. Can you keep these scripts but async and defer loading to make them secondary to the primary content? If you can’t do this then reconsider using the scripts in the first place.
What’s the best way to measure First Meaningful Paint (FMP) for a developer and for live users?
Google Chrome Developer Tools is the best tool for this. If you go to the Performance view, it will show what your website looks like as it’s rendered over time. (Screenshot)
Can you give an example of what is non-critical CSS?
Non-critical CSS would be CSS that is used to style something below the fold or doesn’t adversely affect the user experience above the fold.
What limit would you set for designers for web fonts?
I recommend that designers use them sparingly. To me that means 1-2 web fonts, typically used for headers, and don’t use every style option for each font. For example, Google Fonts can have options like bold, thin, italic, and many more. Each of these styles has additional file size attributed to it. In most cases, CSS can be used for making text bold and italic without having to link to that particular font style.
Does Cloudflare interfere with caching?
That depends on your hosting environment. I use a combination of WPEngine, WP Rocket and Cloudflare. They all have caching features that work harmoniously together. Depending on your hosting environment and if you’re using a caching plugin, you may need to do a lot of configuration changes and tests to get it working optimally. I usually work with WordPress, but bear in mind that you may see caching problems for a custom CMS.
What are your performance optimisation recommendations for WordPress sites?
- Look at your theme – most themes are loaded with excess code even if they say they’re SEO-friendly.
- Look at your plugins – if you use excess plugins this causes stability issues and code bloating due to excess JavaScript libraries. Be very particular about which plugins you use and in what quantity.
What are your preferred image optimisation tools?
I like to have control over the images on my sites and do image optimization myself, using EWWW Image Optimizer and TinyPNG. I also use ImageOptim for Mac and Pixelmator Pro which has a great ‘save for web’ functionality.
How can you minimise latency issues caused by tracking codes?
I recommend testing the use of the ‘async’ attribute and the defer.js solutions I mentioned in my presentation. The key with tracking codes is to make them secondary to the initial loading of the page.
Tracking and ads slow your site down significantly and most of these are 3rd party, but are important to the business due to revenue implications. You have to do what you can, so host what you can locally as well as loading async and deferring where possible. Keep testing and moving different scripts to different places to ensure quick rendering and that key scripts are still running.
How can caching software help with speed, and which ones do you recommend?
I have tried them all and the one I rate the highest is WP Rocket. This is the only one I’ve used which hasn’t broken in any way and is the easiest one to use, and I personally finds it to be the best solution for caching.
What do you think of Google’s speed testing tools such as PageSpeed Insights and Lighthouse?
PageSpeed Insights has always been suspect, but it has gotten better in the past year or so. Lighthouse is a great overall tool to look at many different aspects of your site that you could optimize, and the resource being put into it by Google suggests the features in the tool are where site speed is heading in the future. However, I don’t spend much time using either of these tools. I spend most of my time using Chrome Developer Tools to continually diagnose and test speed optimizations.
How do you work with development teams who push back on your site speed recommendations?
When you’re dealing with difficult developers, the best way to approach them is with data and facts. I think a tool that will help you better make your case is the Lighthouse Chrome extension. While it does emulate a fast 3G connection, the report is wide in scope and provides enough information to highlight trouble areas you can research further. You can also remind your developer(s) that if it’s important to Google, it’s important to the site.
Is there a tool that lets you run a load test comparing HTTP/1.1 vs HTTP/2?
Cloudflare has an HTTP/1.1 vs HTTP/2 demo.
How do you recommend making inlining changes without placing unnecessary burdens on developers?
Inling doesn’t take a lot of maintenance for developers if you’re adding it to templates or using server-side includes.
It’s difficult to optimize for something that may feature for one browser – how widely supported will Priority Hints be?
Priority Hints isn’t widely supported. I just like to try and test anything that might give me a competitive advantage. If you don’t have the resources, time, or interest to do that, then I would skip it.
Can you only change the cache time for Google Analytics if you have a local copy of the file?
You can ignore that. It’s not a big deal.
Will your performance optimisation tips work on a CMS like Adobe Experience Manager?
I’m not familiar with that CMS, but if it uses a page template system that you can edit, then there’s a good chance you can implement many of the optimizations I covered in my presentation. However, if you’re using a WYSIWYG hosted solution like Wix or SquareSpace, you’re out of luck.
Who do you interface with the most when relaying notes about site speed optimization work and getting things implemented?
Since I’m an in-house SEO, I interface with the product teams to get technical changes implemented. I used to have an agency though, and we had developers on staff that would implement the changes for our client’s sites. I agree that it’s difficult if you’re relying on the client’s teams to coordinate the implementation of site changes. Unfortunately, I don’t have an easy solution for how to accomplish that.
How do you track/measure speed over time? Do you use site speed metrics within GA?
Once I’ve optimized a site, I don’t track its speed performance anymore. The only time I look into it is if it’s suddenly dropped in rankings and traffic.
How do you identify the critical rendering path to be able to optimize that?
I use Chrome Developer Tools’ Performance view. (Screenshot)
Any recommended resources to help me grow my technical SEO knowledge?
I think Google has some of the best resources as it relates to technical SEO and speed. Here are some resources to check out:
- https://developers.google.com/web/fundamentals/performance/why-performance-matters/
- https://developers.google.com/speed/
- https://builtvisible.com/resources/
- https://varvy.com/pagespeed/
Further your understanding with our site speed & performance guide
Have you read all of that and still want to learn more about site speed and performance optimisation? Then you’re our type of digital marketer. We’ve launched DeepCrawl’s Ultimate Guide to Site Speed & Performance, which explains everything you need to know from what the different speed metrics mean and measure, which ones to prioritise for your business, as well as how to tackle problem areas such as JavaScript and images to make your site faster.
