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)

Setting up browser caching (Simple)


Web cache is like a middle man between your page and the server from where the page gets fetched. It helps to send static content, for example, CSS, images, and JavaScript directly to the client without sending a request to the server, which ultimately reduces latency and network bandwidth.

Usually caching can be achieved in three ways, caching at browser end, which is called browser cache or private cache; whereas proxy cache also termed as shared cache would serve the same cache to as many users as possible to route through them that is, proxy cache. Nowadays Content Delivery Network (CDN) is getting popular, which is also used to serve as a cache medium to the users and is also termed as gateway cache.

How to do it...

You may increase the cache size and frequency to check the page's freshness, image caching, and so on, by setting the cache option available in all major browsers. I am showing you the same using Mozilla Firefox browser as follows:

  1. Open the browser and navigate to Tools | Options | Advanced, and then select the Network tab to get the following screenshot:

  2. If you wish to go ahead and are sure about the config details, check out the about:config options for cache. You will see the warning message on doing so, which says, It might void your warranty!, just click on the I'll be careful, I promise button, and then on the filter box type cache. Now, you may change the browser cache disk space size, the check_doc_frequency setting, and so on.

    Note

    For browser.cache.check_doc_frequency, the default value is 3. You can use 0 to 3 where:

    0 means to check for a new version of a page once per session

    1 means to check for a new version every time a page is loaded

    2 mean never check for a new version, always load the page from cache

    3 means to check for a new version when the page is out-of-date, which by default exists

  3. Change the config settings at your own risk as shown in the following screenshot:

  4. For proxy cache, we need to either set the proxy server details to our browser ISPs, already save them through routers and firewalls that we can directly use, or just use interception proxy to figure out automatically, which proxy server to use for caching.

  5. For gateway cache, webmasters are responsible to set up the correct cache settings to use the CDN's properties efficiently. Everything is customized and user friendly, one just needs to use their services. Famous gateway cache servers are Akamai and AWS.

  6. We can set a cache-control header and expires to make them working as we discussed it in the Adding an Expires or Cache-Control header (Simple) recipe. If you are using the Apache server, use mod_expires and mod_headers for this purpose as follows:

    ### activate mod_expires
    ExpiresActive On
    ExpiresByType image/gif seconds
  7. In CGI-Perl, you may write cache-control as follows:

    print "Cache-Control: max-age = 3600\n";

How it works...

As we have manually set so many rules of web cache and few are already implemented under HTTP 1.0 and HTTP 1.1, whenever a page is requested, it would check the following things to decide to cache it or not:

  • If the header response sends any cache-control parameters to have cache, it will serve from the cache and save the cache for future use.

  • If the request is authenticated or secure like HTTPS, make sure it isn't cached.

  • A cached material will be server, if the cache checker or content-header for expires max-age is way ahead.

  • You might have observed that sometimes there is no Internet connection, but still you are able to browse pages hence and forth. This is what the magic of cached stuff.

  • If no cache-control or expires or ETags headers is present, it is not meant to be cached indirectly.

Browser cache helps you by not sending the request to the server again when you click on the Back button. But if it's a login page or any transaction secured page, it must revalidate. So, use the cache settings carefully according to the page requirements.