Page Speed
Google Page Speed is a family of tools that can help you optimize the performance of a website.
http://developers.google.com/speed
Run Insights, enter your web page URL, then click Analyze.
https://developers.google.com/speed/pagespeed/insights/
Read the list of Possible Optimizations and follow the recommendations.
Lighthouse (Chrome Extension)
Use Google Lighthouse to expose more performance issues and get more recommendations.
https://developers.google.com/web/tools/lighthouse/
Chrome DevTools
- In the Network Tab, checking the Disable Cache option is a great way to figure out exactly what’s loading into your page and it can give you some hints about which assets might be slowing things down.
- Right-click on the header of one of the columns to get more viewing options
- At the footer you’ll find general information about loading the web page.
Performance Budget
The total allowed page weight of your site or app.
A performance budget is a development spec that can be used to visualize how well we are maintaining our performance goals.
It is intended to help individuals or teams of people make decisions about how to optimize a website.
A performance budget could be as simple as:
- A target for the load time for the page.
- The number of HTTP requests.
- Or the total page weight.
Measuring performance helps website creators determine if a change improved performance or made things worse.
Performance Budget Builder
Visualize how well you are maintaining your performance goals.
http://bradfrost.com/blog/post/performance-budget-builder/
Server Side
Not all optimization happens in the front end, server side compression plays a huge role as well.
GZip – A popular server side compression method
Brotli – A newer server side compression method developed by Google
Check if your server uses Brotli or GZip:
https://tools.keycdn.com/brotli-test
https://checkgzipcompression.com