How Can I Improve My Site Speed?

Site Speed Checklist

1. Check Google Analytics for the 7 different speed metrics they monitor. We've found it to be most useful place to monitor your progress across your whole audience.

Server:

Avg. Domain Lookup Time (salon=0.06, tvtropes=0.02)
Avg. Server Connection Time (salon=0.11, tvtropes=0.04)
Avg. Server Response Time (salon=0.12, tvtropes=0.19)
Avg. Page Download Time (salon=0.09, tvtropes=0.11)

Page:

Avg. Document Interactive Time (salon=0.88, tvtropes=1.08
Avg. Document Content Loaded Time (salon=0.88, tvtropes=1.08)
Avg. Page Load Time (salon=11.54, tvtropes=4.38)

* Salon has a better Document load time because we finished moving the critical CSS into the <head> of the document and moved the rest of the CSS to be pulled asynchronously. TVTropes has a better Page Load time though because it does not use video ads, has less ad units and they are all set to lazy load.

2. Check Google PageSpeed Insights - use the ‘Audit’ tab in Chrome's Developer Tools to test fixes on your local (make sure you are in a separate window in ‘Incognito’ mode). The ‘Opportunities’ section is a great place to get a list of items to work on to improve your speed.

3. Check Google Search Console - Check the new ‘Speed (experimental)’ tab. It gives you warnings if your ‘First Contentful Paint’ or ‘First Input Delay’ speeds are slow at scale across your site (you can check these scores using the PageSpeed Insights tool from the previous step).

Results for Salon.com

Salon's speed scores in GA have improved by 200-400% at every level compared to before we started focusing on the speed. The overall ‘Page Load Time’ was above 40 seconds on average compared to 11-14 seconds now. The ‘Document Content Loaded Time’ has gone from 3-4 seconds to under 1 second on average. The combined server load times have more than cut in half as well

Optimizations Done on Salon.com (in no particular order)

Move critical CSS to <head> of document and set rest of CSS to load asynchronously (huge help for ‘First Contentful Paint’ or ‘Document Content Loaded Time’)
Lazy load images that aren't in view. This tutorial was very helpful to make it happen.
Move all javascript to load ‘async’ (not defer) and put at the bottom above </body>
Minify JS/CSS (also use GZIP and Brotli for best compression).
Compress images / server in next-gen format (can be done in Cloudflare automatically by enabling a few options).
Resized images to only be as big as we needed. We use this plugin to do this.
Increase cache time on all assets.
REDUCE JAVASCRIPT - This makes the biggest difference. We removed 3rd party plugins from our JavaScript bundle such as BootStrap and FontAwesome. We removed all tag-based ad tags and moved to using them through Proper as header bidding partners. That way they don't load 3rd party code unless we serve an ad. We replaced plugins such as AddThis.com for showing social shares in favor of building our own. At least a dozen plugins were removed or replaced with in-house code.
We moved Salon to be behind a CDN (cloudflare) and then set all pages to be cached until they are changed. This made a huge difference on all the server speed scores in GA.