Page speed is an important search engine ranking factor that should be addressed, and the Google Developers PageSpeed Insights tool is a great way to pinpoint how to further optimize your site. PageSpeed Insights analyzes the page at the URL you specify and provides a score (out of 100) along with a list of “fixes” for issues that are decreasing your page speed. But if you are not a developer or tech-savvy, these helpful suggestions might seem a bit overwhelming. This is why I am breaking down and simplifying each of PageSpeed Insights’ speed fixes.

Prioritize Visible Content

• Visible content, also known as above-the-fold content, is the portion of the page that can be viewed without scrolling.
• Not only does PageSpeed Insights measure the amount of time it takes for the entire page to load, but it also measures the amount of time it takes for above-the-fold  content to load.
• The longer it takes for a user to see content, the more likely it is that they will abandon the page.
• One way to address this issue is to restructure your HTML so that the main above-the-fold content will load first.
• Typically, your content/resources will load in the order that they are shown in the HTML. Therefore, make sure your main content is listed before widgets, sidebars, etc.

Eliminate Render-Blocking JavaScript & CSS in Above-the-Fold Content

• This “error” is telling you that the JavaScript and CSS resources on your page are required to load before the rest of your above-the-fold content can load.
• PageSpeed Insights provides a list of all of the JavaScript and CSS files on your page that are blocking the above-the-fold content from loading.
• Google recommends deferring, asynchronously loading or inlining the files. You can find examples of each of these methods below:
  • Make JavaScript Asynchronous / Defer Loading
  • Inline JavaScript
  • Inline CSS File
• Moving scripts to the footer is a great option, according to step one in this article:
  • “Improving Page Speed: How to Make Your Site Slicker Than Snot“

Leverage Browser Caching

• When a browser loads a webpage it has to download all the web files in order to display the page.
• Browser caching helps by storing some of these files in the user’s browser.
• The user’s first visit to your site will take a little longer to load, but when they revisit the site or move to a different page, it will load faster because the “cached” resources are saved and will not need to load again, resulting in a decreased load time.
• To enable browser caching, you must add some code (code example) to your .htaccess file on your web host/server that specifies what to cache and for how long.
• Google recommends a minimum cache time of one week and, preferably, up to one year for static assets.

Optimize Images

• This means that the file size of some or all of the images on your page can be further reduced to improve page speed.
• PageSpeed Insights provides the optimized image files for both lossless and lossy compressed image.
  • Lossless compression means that your image can be exactly reconstructed from the compressed file. In other words, the image will appear unchanged.
  • With lossy compression, the quality of your image will appear reduced.
• You can also compress your images by using tinyjpg.com or tinypng.com.

Enable Compression

• Here, PageSpeed Insights is telling you to enable gzip compression on your web server, which allows your web server to provide smaller files that load faster.
• Enabling gzip compression differs between servers but typically involves adding some code to your .htaccess file.
• Find the code or the steps to enable compression on your server here.
• You can use this gzip compression test to make sure everything was implemented correctly.

Minify Resources: JavaScript, CSS & HTML

• Minifying involves reducing the size of your JavaScript, CSS or HTML resources by removing parts of the file aren’t required for the page to load such as code comments, white space and formatting.
• Here are some tools that can help you minify your resources:
  • HTML Minifier
  • Refresh-SF
  • CSS Compressor

Avoid Landing Page Redirects

• Redirects cause visitors of a page to be automatically taken to another version of the page or another page altogether.
• Simply put, redirects cause your pages to load slower because a direct flight is faster than a trip with a layover.
• Redirects have become a big issue for mobile sites, as many sites must redirect to the mobile version of landing pages (abc.com > m.abc.com).
  • The best solution to this problem is to create a responsive design landing page that will automatically adjust to all devices rather than a separate mobile page that will require a different URL.
• Other common causes of redirects include updating from non-“www” to “www” and site restructuring (abc.com/resources/blog > abc.com/blog).
  • In these cases, make sure to update all of the internal links on your page to the new final URL.

Reduce Server Response Time

• Server response time is the amount of time it take for your server to respond to a browser’s request for a page to load.
• Google recommends reducing your server response time to under 200 ms.
• High site traffic, resource usage and many other factors can contribute to a slow server response.
• By implementing all of the previously mentioned page speed best practices, you will put less pressure on your server, thus improving server response time.
• By upgrading to a web host that can better support your site traffic volume, you can also provide a significant improvement.
  • You can find the best web host for you by learning about the different types.

Hopefully you now have a better idea of what it will take to improve your page speed.  In part two of the “PageSpeed Insight Help” series, I will go over how to interpret the mobile user experience fixes. Have questions? Find me on Twitter or continue the conversation below.