Introduction

Over the last few weeks, I have been trying to tweak my blog to make it faster and more responsive to users. I simply want to give you all the best user experience I can. I am also curious how different things affect the speed of my pages.

While goofing around with some of the free Google developer tools, I stumbled across a tool called PageSpeed Insights.

This utility is based on a tool called Lighthouse . Looking at the overview on Google, Lighthouse is an open-source tool that examines web pages to help developers improve the quality of the web pages.

Using the Site

To use this utility, we just need to go to https://developers.google.com/speed/pagespeed/insights/ .

Once you go to the site, simply enter the URL for the page you are wanting to check and click Analyze.

Make sure you enter the url of the page you are wanting to examine and not just a siter address as this utility examines web pages and not web sites as a whole. This is very handy if you have particular pages that are causing you issues. However, it can be a pain if you have a lot of pages that you are wanting to look through.

Examining the Results

Once you analyze the page, you will see a set of results like this:

Another thing to point out with this tool is there are tabs for MOBILE and DESKTOP . Clicking on these tabs will likely give you different scores based on how your page renders on desktop vs mobile. I find this useful so I can see what tweaks I can further do to make my site a better experience on a mobile device.

As of this writing, there are six sections to the results.

• Field Data
• Origin Summary
• Lab Data
• Opportunities
• Diagnostics
• Passes Audit

Since my site is newer, the first couple of sections did not populate. However, the sections that did populate were very useful.

First, let's check out the lab data. This section has a few different metrics used to determine how fast the page loads. There is a button at the top-right of this section that you can click to get more in-depth information about each metric. Lower in the section is a button I found really interesting called VIEW TREEMAP . It shows you a treemap of the different JavaScript packages used by the site.

Moving further down the results we find the Opportunities. For my site this was a few packages that I have hosted in a CDN that are considered render-blocking resources. Essentially, this few resources are slowing down my site from loading quickly.

The next section is Diagnostics. This section gave me all kinds of information about small things that were causing me issues. Some were a matter of the packages I am using in my site. Other things were pictures on my site that I could resize the image file to a better size to improve speed of loading the pictures.

Conclusion

Google's PageSpeed Insights is a really interesting tool that is extremely handy for web developers that are looking to make sure their pages are providing as fast of a user experience as possible. While I have not played around with it yet, according to the Lighthouse page, there is a version of this utility that supports pages that require authentication to access as well. I will definitely be utilizing this tool more often as I am working on new projects.

Let me know your thoughts on this tool and if there are any other tools that you can't live without when it comes to web page development.

I don't have a comments section yet, so feel free to send me feedback on this blog.