Optimizing NGINX with Google’s PageSpeed Module

pagespeedOne of the recent improvements we’ve made to our network of sites is to decrease the amount of time between when a site visitor clicks on a link to us and when the page is rendered and displayed on their browser. There are many factors involved in optimizing web traffic and one of the easiest and most comprehensive tools we’ve started using is the PageSpeed module from Google.  This module, available for Apache and Nginx, automatically optimizes your pages by modifying the CSS, HTML, JavaScript and images.  There are options for combining all JavaScript into a single file, outlining or inlining CSS, optimizing images by stripping out meta tags and resizing them based on the dimensions defined in the HTML,  it can also take smaller images and base64 encode them and insert them as data:image/ resources.

All of this combined can greatly reduce the payload size and improve the speed of delivery and rendering of your pages.

The optimizations come from a few different categories:

Images

  • Lossless compression of various image formats.
  • Inline images, automatically base64 encode and insert them into the HTML
  • Convert formats, you can automatically convert between various file formats like PNG, JPG and WEBP.
  • Remove meta data, by removing various bits of unused META data, you can save precious bytes.
  • Resize images based on the dimensions defined in the <img> tags
  • Add image dimensions to <img> tags

CSS

  • Combine multiple CSS files into one
  • Flatten CSS by combining multiple external CSS files into a single page
  • Inline CSS by taking smaller CSS files and directly inserting them into the page
  • Move CSS blocks to HEAD area
  • Outline CSS – CSS blocks above a certain bite length are removed from the original page and moved to a new page.
  • Prioritize important CSS, by moving the render blocking CSS to the top of the page you can reduce the time needed to render a page
  • Rewrite CSS by automatically scanning and minifying it and optimizing images listed.

Javascript

  •  Inline small blocks of JavasSript instead of loading an external file
  • Outline larger blocks of JavaScript so they can be cached and shared by multiple pages
  • Minify your JavaScript by removing line breaks and comments

HTML

  • Collapse whitespace
  • Removing comments and quotes
  • Combine HEAD elements

Why optimize?

Improved user experience: Rendering the page faster on the visitor’s browser is always a better thing.  More and more visitors are using mobile devices and it’s our goal to provide the best possible experience for them.  These devices are generally slower due to processors and reduced memory and by optimizing our content, we can still deliver a great looking site to them in a timely fashion.

Page speed effects SEO results: Google uses the page speed as one of the factors when ranking a site.  It may not be a very strong signal, but we constantly strive to improve all aspects of SEO and the work involved is worth it.

Reduced bandwidth: Depending on your hosting plan, you may be paying for your bandwidth and this could reduce your overall cost.

 

Read part two of this series…

This entry was posted in Technical Talk and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *