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)

Enabling compression (Simple)


If your website contains numerous JavaScript and CSS files and images, it's better to compress them while sending them over the network. This can be done by enabling gzip, which we will show this recipe.

Getting ready

There are a few things that can't be handled by the website owner or developer, such as the client's Internet speed, ISP, and geographical location, which can affect the speed of any web page. But, programmers can tweak to reduce the file size sent over the network and can reduce the size of the HTTP response that we got under status 200 and 304 in the previous recipe. One simple technique is compressing the file size over the network. That would reduce the time taken to send the HTTP request and get back the HTTP response.

How to do it...

As we cannot control the client's browser whose job is just to send the Accept-Encoding attribute to the server with value as gzip or deflate or nothing. So, we have to configure the server so that it will return a zipped/compressed content if the browser is able to handle it, which would ultimately save the bandwidth and the user will feel that site is loading faster.

  1. If you are working on IIS, Microsoft's compression link (http://technet.microsoft.com/en-us/library/cc730629(v=ws.10).aspx) would help you set the enable compression options through the GUI, step by step.

  2. If you are working with the Apache server and have the access to modify the .htaccess file, you may try the following lines. Usually, Apache has two compression modes, mod_deflate and mod_gzip. More details on enabling compression are given in the Apache Online Docs (http://httpd.apache.org/docs/2.0/mod/mod_deflate.html).

  3. Add these lines to your .htaccess file:

    # compresses text, html, xhtml, rss, javascript, css, xml, json etc.
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/xhtmlAddOutputFilterByType DEFLATE text/xml
    
    
    # Or compress specific file types:
    <files *.html>
    SetOutputFilter DEFLATE
    </files>
    
    #or use AddOutputFilterByType
    AddOutputFilterByType DEFLATE text/html text/plain text/xml
  4. Apache checks if the browser has sent the Accept-Encoding header and according to the request, sends the compressed or uncompressed file back.

    So, first check whether your browser is able to send the Accept-Encoding header or not, as shown in the following screenshot:

  5. In case you are not permitted to modify code, you can have the PHP code return the compressed content. Try the following PHP code at the top of your script. Make sure extension is .php and not .html:

    <?php
    if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')
    
    ob_start("ob_gzhandler");
     else 
    ob_start(); 
    ?>

    This code checks the Accept-Encoding header and returns a zipped version of the file if possible. But try to use Apache to compress the file size at a server level, which would be much faster and efficient.

How it works...

Browsers usually indicate zipping support under the Accept-Encoding header as in the HTTP request, Accept-Encoding: gzip, deflate

After receiving the request, the web server compresses files and notifies the browser by returning the response under the Content-Encoding header, that is, Content-Encoding: gzip.

If you are using Apache 1.3, you should know that it uses the mod_gzip (http://sourceforge.net/projects/mod-gzip/) module and Apache 2.x uses the mod_deflate (http://httpd.apache.org/docs/2.0/mod/mod_deflate.html) module for file compression. Compressing images and PDFs don't make any sense as it is already compressed. So, it would be a wastage of server time and memory too.