Optimizing Page Speed: Google PageSpeed Insights

Follow

 

Overview


Google PageSpeed Insights is a popular tool many site admins use to optimize site load speed. One thing to keep in mind, however, is PageSpeed Insights does not measure speed directly: it measures how certain resources on the page load, then offers suggestions on how those resources might be sped up. This means a site with a low score could still have a great load speed and achieving a 100 is very difficult. We recommend testing other eCommerce websites you're familiar with in order to get an idea of how other websites score compared to your own. This article will take a look at each possible suggestion and detail the steps that you can take to follow them.

 

Optimize Images


PageSpeed Insights docks points for large images (by file size, not dimensions). This is typically where site admins can make the biggest impact on site load speed. Large image file sizes can significantly decrease performance, especially on pages with lots of images, like category pages. There's not a hard rule on how large a file size your images should be, however, in general under 100KB is recommended, and even smaller is better for performance. 

Solution: The solution is to optimize the images. Image optimization means compressing the file using special software that leaves image quality completely unchanged (lossless compression) or slightly affected (lossy compression), while significantly reducing file size. If you're not already familiar with this type of software, use your favorite search engine to search for "Image optimizers" or "bulk image optimizers" -- There's many free and paid tools to accomplish this task.  

Pro-Tip: To make this job easier, submit a support ticket to request SFTP Access (if you don't already have it) -- This will allow you to access your store's file system directly and bulk edit/move images and other files using an FTP Client

Pro-Tip: Google also provides a link to do download a zip file containing optimized versions of the files from the page tested: 

 

2017-05-12_12-28-31.png

 

Eliminate Render-Blocking Javascript and CSS


A file or resource is considered render-blocking if it prevents the visual stuff on a page from displaying while the file is being loaded. A browser loads pages sequentially, one at time. So, if a file is at the front of the line, but doesn't contribute to the display of the above-the-fold content (the first stuff on page before scrolling down), it is blocking the content from displaying by some fraction of a second. Even though render-blocking scripts only contribute small fractions of a second, many such resources can add up, which is why google recommends limiting the number of render-blocking resources. 

Solution: There's not a one-size-fits-all solution to eliminating render-blocking Javascript / CSS; however, in general, this can be accomplished by moving the file from the HTML <head> of the page to the bottom of the HTML, just before the closing </body> tag. For more information, see: Adding a Script to the Bottom of HTML Body.

Note: It is only recommended to make these changes if you are knowledgeable in HTML and JS code. We also suggest testing the changes in a cloned copy of you're theme so you can see the changes in an inactive theme environment before altering the active version of your theme. 

 

Leverage Browser Caching


Google recommends "[s]etting an expiry date or a maximum age in the HTTP headers for static resources" so that the browser will "load previously downloaded resources from local disk rather than over the network."[1] 

Spark Pay does this for you automatically by setting the appropriate HTTP headers on the page and its resources. This can be confirmed by using browser developer tools (ctrl+shift+u in chrome) to view the server response headers on a resource. Below is a screenshot showing the response headers on style.css: 

 

2017-05-15_12-57-10.png

 

So, If PageSpeed Insights suggests this, it is most likely due to external resources (files served off the Spark Pay Platform) or a false-positive:

Below is an example of external resources being flagged by Google as needing maximum age HTTP headers (ironically, they're google hosted files!): 

 

2017-05-12_12-45-36.png

 

Solution: Only the external server hosting the file can set the HTTP headers for that file. Spark Pay already sets the appropriate HTTP headers that leverage browser caching, so nothing needs to be done on your Spark Pay store to take advantage of this.

[1]Browsers keep copies of images, Javascript, CSS, and HTML from web pages in a special location on your computer. This is called a browser cache. When you return to a previously visited website, the browser uses the cache to display the content, so that it doesn't have to reload content it already downloaded. This saves server resources and makes the page load faster. Setting maximum age or expiry date headers is a servers way of telling the browser how long to keep things in the cache before downloading them again.

 

Minify CSS / JS / HTML


Put simply, minifying is the act of removing all unnecessary spacing from source code file. Each space contributes to a larger file size; so, removing the spacing can decrease file size, which can lead to slightly faster load times.

As an example, consider the following CSS:


.category-product .description { 
    display: none; 
    opacity: 0; 
    transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -moz-transition: 0.5s; 
}

 This CSS could be minified like so:


.category-product .description{display:none;opacity:0;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s}

Solution: At the time of writing, Spark Pay does not have a built-in solution for automatically minifying source code files. This means, that site admins will need to minify files themselves, should they desire to do so. The downside to this is that, in order to be easily edited, the file will need to be unminifed each time changes need to be made, then reminified before saving.

Note: Files located in /store/inc/ are not accessible for editing and can not be minified.

Pro-Tip: There are online tools that will minify copied-and-pasted JS, HTML, and CSS.

 

Enable Compression


PageSpeed Insights checks to see if source code files (for example HTML, CSS, and Javascript) loaded on the page are compressed, and subtracts points if they are not. 

Solution: Since file compression is determined by server configuration settings (and not store settings), site admins can not enable or disable file compression. However, you can check to see if the source files on your store are being compressed using your browser's developer tools (ctrl+shift+u in Chrome). Refreshing the page with the network tab open displays the files loaded, and clicking on a specific file will show the request and response headers:

 

2017-05-15_12-26-41.png

 

Getting Help


 If you need help finding locations in the Spark Pay admin to make changes, our technical support team can direct you to the location; however, optimizing site speed is outside the scope of our free technical support. If you're not comfortable making the changes described in this article, we recommend hiring an experienced web developer to perform the work. If you plan on tweaking the site yourself, here's some helpful tools: 

  • webpagetest.org: Shows the load time of specific files; can help identifiy which files are taking the longest to load. For example: can help identify large images they may need to be optimized. 
  • minifycode.com: Minify HTML, CSS, JS

Helpful places in the Spark Pay Admin: 

  • Themes > Edit Theme > Heads Tags: Tags here get added to the HTML <head> of every page. Many JS scripts and css file references are located here. 
  • Themes > Edit Theme > Theme Files: Easy way to see a theme's files. 
Have more questions? Submit a request

Comments