Speed up Web Page Loading Using Google Page Speed

The easiest way to improve your website’s conversions may have less to do with SEO and your content and more to do with how fast your pages load. Internet users have a short attention span, and won’t wait for your pages to load when the next site is just a click away. Fortunately, you can fix your web page loading times with the help of Google Page Speed.

Website loading time is one of the most important performance elements of a website. It has been said, according to a study at Peer1, that there is a “loss of one third of the visitors who abandon the site” after four seconds of website loading time.  

Graph: % of visitors retained vs. Website loading time:

 

 

What is interesting is that there are almost no visitors interested in waiting for your website to completely load after 25-30 seconds. Loss of visitors translates to losses everywhere, including sales, other income revenues, subscribers, readers, etc.  

There has also been some buzz in the SEO community that “page speed” may become a future search engine ranking factor in Google. 

This is how critical website loading time is. Instead of drastically focusing on other aspects such as SEO, any smart webmaster should FIRST focus on improving website loading times before trying to solve other problems.  

Here is a case study:

Website average loading time: six seconds 

  • Average monthly visitors: 1000
  • Conversion rate: 1%
  • Average profit per sale: $10  
  • Visitors retained at 6 seconds (estimate): 50%
  • Visitor loss due loading time: 100% – 50%: 50%
  • Visitors retained: 1000 x 50% = 500
  • Average conversions: 500 x 0.01 = 5
  • Monthly profit (average) = 5 x $10 = $50

 Website average loading time: less than five seconds 

  • Visitors retained: 1000 (no visitor loss due to slow website loading)
  • Average conversions = 1000 x 0.01= 10
  • Monthly profit (average) = 10 x $10 = $100  

As you can see from the above example, it is possible to double website profit simply by improving website loading times.

{mospagebreak title=Introduction to Google Page Speed} 

Google Webmaster Tools recently added a new site feature called “Site performance.” You can access your site performance data by logging in to your webmaster tools account, and then going to Dashboard à Labs à Site performance.

 

 

You will be provided with the average number of seconds it takes your website pages to load. For example, the above screenshot says that it takes 5.2 seconds for a particular website’s pages to load on average. This is slower than 75% of the sites online. This result practically screams that the website needs to improve its website loading performance.  

One of the key features of Site Performance is “Page Speed,” a Firefox plug-in that can provide suggestions to help you make your website load fast. By default, Site Performance does provide suggestions for improvement based on the “Page Speed” tool. First, you need to install it by clicking the "install" button at the bottom of Site performance.  

It is also suggested that you install Firebug before installing Page Speed, because it is a pre-requisite. Downloading Firebug will make it possible to use the Page Speed tool in a Firebug console (see below for details).  

How to use Page Speed to analyze performance using a browser 

Once installed, you can start using Page Speed by following the steps below. 

Step 1: Go to any important page of your domain (e.g. home page). Using your Firefox browser, click View à Firebug.  

Step 2: Under “Page Speed,” click “Analyze Performance.”

 

 

Step 3: After analysis, Page Speed automatically lists the problems and its recommendations.

{mospagebreak title=Page Loading Improvement Case Study}  

After analyzing the performance of the test website, http://www.php-developer.org , the following are the results: 

The red exclamation marks are serious problems. For the purpose of illustration, we will only tackle the most pressing problems/actions, which are enabling Gzip compression, and some JavaScript optimization tips like optimizing the order of styles and scripts.  

Enabling Gzip Compression. This works by compressing the output to the browser instead of sending the uncompressed file, which is heavy. See the illustration below:

 

 

If it is compressed, it will be retrieved very easily by the browser — in short, the page loading time should improve. 

There are different ways to implement GZIP compression. It can be done either in .htaccess or PHP. For simplicity, we will implement GZIP compression using PHP to make the process easy to understand. 

There are basically three types of files that you need to compress for efficiency. These are HTML-related files, JavaScript files and CSS files. For illustration purposes, we will be using WordPress, since it accounts for the majority of the CMSs used; however, the principle discussed can be applied to any platform. To compress HTML, follow the steps below.  

Step 1: Log in to your WordPress FTP root directory and download index.php file (located at the WordPress root directory). 

Step 2: Using your favorite PHP editor, open the file and copy à paste the code below to the top most part of the script:

 

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) {

ob_start("ob_gzhandler");

}

else {

ob_start();

}

 

So that the new index.php will now be:

 

<?php

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) {

ob_start("ob_gzhandler");

}

else {

ob_start();

}

/**

 * Front to the WordPress application. This file doesn’t do anything, but loads

 * wp-blog-header.php which does and tells WordPress to load the theme.

 *

 * @package WordPress

 */

 

/**

 * Tells WordPress to load the WordPress theme and output it.

 *

 * @var bool

 */

define(‘WP_USE_THEMES’, true);

 

/** Loads the WordPress Environment and Template */

require(‘./wp-blog-header.php’);

?>

 

This code loads the call back function ob_start to facilitate sending gz-encoded data using PHP and compresses the content before sending it to the browser, which accepts gzip-encoded data. Save and upload it to the WordPress root directory. You can use this tool to make sure your compression is working. 

{mospagebreak title=GZIP Compression for CSS Files}

To compress CSS files, you need to determine the heaviest CSS files. If you compress them, you save some significant kilobytes in loading. For the test website, default.css is the heaviest. Looking at the source code:  

<link rel="stylesheet" href="http://www.php-developer.org/wp-content/themes/arras-theme.1.3.5/css/styles/default.css" type="text/css" media="screen" / 

It appears to be located in the css/styles directory. Using your FTP, download and then open it. Copy and paste the code below to the top most part:

 

<?php

    require_once("gzipCSS.php");

?>

 

After that; save the file now as default.php and upload it back to the same directory from where it was downloaded. Edit the reference of the stylesheet in your header.php to:

 

<link rel="stylesheet" href="http://www.php-developer.org/wp-content/themes/arras-theme.1.3.5/css/styles/default.php" type="text/css" media="screen" />

 

The gzip compression code located in gzipCSS.php will be parsed by the server because of default.php, thus compressing the CSS containing it.  

The following is the script for gzipCSS.php (copy and paste this to your PHP editor and save as gzipCSS.php):

 

<?php

//PHP gzip method

ob_start ("ob_gzhandler");

 

//Header to tell browser what kind of file it is.

header("Content-type: text/css; charset: UTF-8");

 

//Caching

header("Cache-Control: must-revalidate");

$expires = "Expires: " . gmdate("D, d M Y H:i:s", time() + 3600) . " GMT";

header($expires);

?>

 

Credits: gzipCSS.PHP script by http://www.devirtuoso.com/2009/07/how-to-compress-cssjavascript-files-with-php/  

It starts by loading the PHP GZIP handler, which will do the compression and then tell the browser it is a CSS file. Upload gzipCSS.php to the same directory as default.php, for example: 

 

You can perform the same process with the rest of your heavy CSS files; the same concept can even be applied to JavaScript.

{mospagebreak title=Optimizing the Order of JavaScript and CSS}  

Optimizing the order of JavaScript is simple. You will need to cluster all JavaScript together as one group if possible, and let them execute first, before loading the CSS. This will benefit from any parallel loading of scripts which have an effect on loading speed. For example, if before it was:

 

<?php

//javascript groups in the header placed here

?>

 

<link rel="stylesheet" href="http://www.php-developer.org/wp-content/themes/arras-theme.1.3.5/css/layouts/2c-r-fixed.css" type="text/css" />

 

<script type="text/javascript">

     jQuery(document).ready(function($) {

          $(‘.sf-menu’).superfish({autoArrows: false, speed: ‘fast’});

     });

</script>

You can improve the first step by placing JavaScript above the CSS and grouping it (combining it) with the rest of the JavaScript.

<?php

//javascript groups in the header placed here

?>

<script type="text/javascript">

     jQuery(document).ready(function($) {

          $(‘.sf-menu’).superfish({autoArrows: false, speed: ‘fast’});

     });

</script>

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan