Book Image

Instant PageSpeed Optimization

By : Sanjeev Jaiswal
Book Image

Instant PageSpeed Optimization

By: Sanjeev Jaiswal

Overview of this book

PageSpeed is an important aspect of web design and site management. It is a Google measure of how well the site performs to technical measurements. PageSpeed can be measured using Google's own tool or a browser plugin. It is used to score sites in indices, and is important from a UI view as it forms a large part of the success of your site.Instant PageSpeed Optimization is a practical, hands-on guide that provides you with a number of clear, step-by-step exercises, which will help you to take advantage of the real power that is behind web optimization techniques, and give you a good grounding in using it in your websites.The book explores topics like HTML standards used for optimization, minifying scripts, and taking care of images, and solves the common errors that users do unknowingly. It will take you through a number of clear, practical recipes that will help you to take advantage of all the possible technologies to make your websitess efficient, fast, and accurate. You will not only learn basic standards to optimize your websites, but you will also learn some advanced level methods such as Apache handling, Flush methods, making AJAX cacheable, setting up browser caches, and reducing image size using CSS sprites. If you want to take advantage of all the necessary methods to make your website faster and efficient, then this book is a must-have.
Table of Contents (7 chapters)

Using Apache mod_pagespeed – installing and configuring (Advanced)


Do you want to make your website much faster by making minimum changes to the code? If yes, use Apache's mod_pagespeed module, which will take care of web optimization best practices automatically after properly setting up and configuring.

Getting ready

Before diving deep into this module, let's analyze your website score using Google's page analysis online tool, which will not only check all the best practices to make your website faster, but will provide you detailed information about what changes are needed to make it more responsive and fast. Check the following URL: https://developers.google.com/speed/pagespeed/insights.

The preceding URL will show you a textbox where you need to enter your website name and click on ANALYZE, as shown in the following screenshot:

After a few seconds, it will give you a score on a scale of 100 and on the left you can find the suggestion list categorized by the priority level.

For Alien Coders, it is 90 out of 100, with some suggestions for best practices, as shown in the following screenshot:

How to do it...

There are a lot of things to do with this module, which we can't just explain as it requires another book to explain it fully with real-life examples. We will try to cover the basic things to get started with. So, mod_pagespeed is an Apache 2.x module, which is added into an existing Apache server with the help of the pagespeed.cong configure file. Here, we will deal only with the basics of installing and configuring the mod_pagespeed module. You may explore the rest of the work easily after that as follows:

  1. Install mod_pagespeed. Currently it supports only:

    • CentOS/Fedora (32 bit and 64 bit)

    • Debian/Ubuntu (32 bit and 64 bit)

  2. So, to install it on Debian or Ubuntu, please run the following command, make sure you are as root:

    pkg -i mod-pagespeed-*.deb apt-get -f install
  3. To install it on CentOS or Fedora, please execute the following commands as a root:

    yum install at # In case you don't have "at" installed which is required to download rpm package
    rpm -U mod-pagespeed-*.rpm

    Tip

    As it is from the Google code repository and they maintain it, so it's a good idea to let it update automatically if any updates are available there. So by default, the Google repository will be added to your system.

  4. So it installs mod_pagespeed.so for Apache 2.2 and mod_pagespeed_ap24.so for Apache 2.4, upgradable configuration files pagespeed.conf, pagespeed_libraries.conf in Fedora, and pagespeed.load on Debian provided you don't change these files ever and JavaScript minifier pagespeed_js_minify

    mod_pagespeed Configuration
  5. The mod_pagespeed configuration directives should be wrapped inside an IfModule module as follows:

    <IfModule pagespeed_module>#config lines here</IfModule>
  6. An example of the mod_pagespeed configuration that can be used as a guideline is as follows:

    # This page shows statistics about the mod_pagespeed # module.
    <Location /mod_pagespeed_statistics>
    Order allow, deny
    # One may insert other "Allow from" lines to add hosts that # are allowed to look at generated statistics. Another # possibility is to comment out the "Order" and "Allow" # options from the config file, to allow any client that # can reach the server to examine statistics. This might be # appropriate in an experimental setup or if the Apache # server is protected by a reverse proxy that will filter # URLs to avoid exposing these statistics, which may reveal # site metrics that not be shared otherwise.
    Allow from localhost
    Allow from 127.0.0.
    SetHandler mod_pagespeed_statistics
    </Location>
  7. The output filter is used to parse, optimize, and re-serialize HTML content that is generated elsewhere in the Apache server as follows:

    # Direct Apache to send all HTML output to the # mod_pagespeed output handler.
    AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
  8. It is noteworthy to mention that mod_pagespeed automatically enables mod_deflate for compression.

    • To turn mod_pagespeed on, insert at the top line of pagespeed.conf: ModPagespeed on

    • To turn it off, just write ModPagespeed off

    • To disable it permanently, write ModPagespeed unplugged

How it works...

You just need to install mod_pagespeed properly for the first time and need to remember how to disable or enable it. That's it. The rest of the configuration settings that set filters are already set at the best for your website by Google developers. If you wish to explore more and want to make settings, configurations, and filters according to your requirements, you must go through the PageSpeed documentation provided by Google.

Once Apache gets started and you start to visit any website, send the PageSpeed statistics to the stats folder. By default, it will set the localhost to 127.0.0.1, but you can allow more sites as per your needs.

There's more...

If you host a website and have no control over mod_pagespeed, try the browser's plugin from https://developers.google.com/speed/pagespeed/,and perform the following steps:

  1. Check Download link at the right-bottom corner for Firefox and Chrome.

  2. Once you download the plugin and restart your browser, open any website to analyze the speed. Then press F12 to turn on the plugin, select the PageSpeed tab, and click on Run Analyze.

  3. Once that is done, you will be able to see something like the following screenshot, which will explain all the errors, warnings, and remedies for the given site:

  4. Click on the text Expand All, as shown in the preceding screenshot to see all the suggestions listed by Google to make the website much more faster and efficient.