Page Speed Best Practices
- Monday, November 29, 2010
Page Speed is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices. Web developers that would like to evaluate the performance of their web page to improve them should download the extension.
Google team confirmed that they have started putting this in action though the number of websites ranking changed on the basis of load time are very less. Google strongly recommends that all webmasters regularly monitor site performance using Page Speed, YSlow, WebPagetest, or other tools.
Best practices for making web pages load faster!
Minimize HTTP Requests
Reducing the number of HTTP requests in your page is the key for faster web pages. Below are some techniques for reducing the number of HTTP requests.
Combining files: By combining all external Java Scripts into a single Java Script file, and similarly combining all CSS into a single Stylesheet file, will reduce the number of HTTP requests.
Example: Many website will have multiple Java Script files inside <HEAD> tag for different purpose.
<script src="http://www.example.com/menu.js"></script>
<script src="http://www.example.com/ajax.js"></script>
<script src="http://www.example.com/nav.js"></script>
<script src="http://www.example.com/tools.js"></script>
<script src="http://www.example.com/footer.js"></script>
<script src="http://www.example.com/others.js"></script>All the above six Java Script files can be combined in one Java Script file:
<script src="http://www.example.com/combined-all.js">
</script>See the example below:
- 1 User x 6 Java Script HTTP Request = 6 HTTP Request
- 1000 Users x 6 Java Script HTTP Request = 6000 HTTP Request
- After combining Java Script file [5000 less HTTP Requests to the server]
- 1 User x 1 Combined Java Script HTTP Request = 1 HTTP Request
- 1000 User x 1 Combined Java Script HTTP Request = 1000 HTTP Request
By doing this I have reduced the numbers HTTP Requests to my web server from six Java Script HTTP Requests files to only one Java Script HTTP Request, which can really add up when you have thousands of visitors visiting your website every single day.
Similarly combining all my external CSS into a single Stylesheet file I can further reduce HTTP requests to the web server.
CSS Sprites: These are used to reduce the number of HTTP Requests for images on a web page. In this process, a developer combines all images into a single image and use the CSS background-image and background-position properties to then display the desired image segment.
Avoid bad requests: Avoid wasteful requests like unwanted redirects, broken links, error responses etc. Removing all broken links, unwanted redirects and requests that result in 404/410 errors can help reducing the HTTP Request.
Optimize Images
It is very important to keep all your website image(s) size at minimum. Lighter, optimized image(s) will load faster for users and are preferred by indexing sites like Google Images. Properly formatted and compressed image(s) can save many bytes of data, and improperly optimized images can take up more space than they need to.
You can optimize your image(s) by cropping unnecessary space (white space), reducing color depth to the lowest acceptable level, removing image comments and saving the image in a more web-friendly file format (.jpg, .gif)
Specify image dimensions: Specifying the height and width attributes for all the images helps web browsers render web pages faster, as the web browser is not forced to spend time unnecessarily on calculating the height and width of image(s) and can instead use this time to render other elements of the web page.
Example: Instead of coding image(s) like this:
<img src="http://www.example.com/logo.jpg" />Always code image tags with height and width attributes, like this:
<img src="http://www.example.com/logo.jpg" width="250" height="100"
alt="Unique and relevant keyword(s)" />SEO Tip: ALT tags filled with keywords can also be used to boost your keyword frequency and help you achieve better rankings.
Don't misuse the width and height attributes: Do not use the height and width attributes on the fly to scale the images. If an image file is actually 60x60 pixels, don't set the dimensions to 30x30 or 90x90 in the HTML code or in CSS. If a smaller or bigger image is required, scale it in an image editor and set its dimensions to match your requirement.
Optimize CSS (Stylesheets)
Cascading Style Sheets (CSS) are better than table-based layouts when designing a website.
Combine all your external CSS: Combining all your external stylesheets into a single file will reduce the numbers HTTP Requests and reduce latency. Google recommends a maximum of 3, but preferably 2, CSS files.
Place CSS tags first in source code, before Java Script tags: One of the best practices for page speed loading is to place CSS tag(s) before any Java Script tag(s), ordering stylesheets before external or internal scripts enables better, parallel download which can speed up browser rendering time. Javascript code can modify the content and layout of web pages, and browsers can delay rendering page content that follows from script tags until they are fully downloaded, parsed and executed.
Example: Let's say you have 3 stylesheets and 2 Java Scripts and you specify them in the following order in the document (inside <HEAD> tags).
<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script src="scriptfile1.js" />
<script src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>The second two stylesheets must wait until the two java script files are finished downloading. The total download time equals (in this case 100 ms + 100 ms + 100 ms = 300 ms).
Now we will change the order of the CSS and Java Script resources to this:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script src="scriptfile1.js" />
<script src="scriptfile2.js" />
</head>Minify CSS (GZIP): This is the process of removing unnecessary characters from CSS code to reduce the file size, thereby improving load times. To minify CSS code, all comments and unneeded white space characters (space, newline, and tab) are removed.
Many free tools are available to minify CSS and JavaScript, including the YUI Compressor, cssmin.js and JSMin.
Example: This is the sample CSS code:
/* This is a unwanted comment */
h1{
font-size: 18px;
font-family: arial, helvetica, sans-serif;
color: #FF0000;
}
/* unwanted comments comments comments */
p{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
color: #000000;
}
After removing all comments and unneeded white space characters (space, newline, and tab):
h1{font-size:18px;font-family:arial, helvetica, sans-serif;color:#F00;}
p{font-size:12px;font-family:arial, helvetica, sans-serif;color:#000;}Optimize Java Scripts (JS)
Java Scripts can be optimized the same way we optimize CSS. (see Minify CSS above)
- Combine all your external Java Script files.
- Put Java Script tags after CSS tags.
- Minify Java Script (GZIP).
- Remove Duplicate Scripts.
Avoid Redirects
In general, websites should avoid wasteful requests. Unnecessary redirects increase the total amount of HTTP Requests made to a web server. Redirects are accomplished using the 301 and 302 status codes or META Refresh tag and JavaScript code.
Example: One of the most wasteful redirects happen when a trailing slash (/) is missing from a URL.
If the user visits the URL ‘http://www.example.com’ {note no trailing slash (/) at the end} results in a 301 redirect response code, and redirects to ‘http://www.example.com/’ {note the trailing slash (/) at the end}.
Having clean internal linking instead avoids the need for a 301 altogether.
Add an Expires or a Cache-Control Header
Browsers and Proxies use a cache to reduce the number and size of HTTP requests, making web pages load faster. By using Expires header, you increase the number of static resources that are cached by the web browser and are re-used on subsequent page views without making a single HTTP Request.
Browser Caching: Web servers use the Expires header in the HTTP response to tell the clients how long any component can be cached at user end. Any first time visitor on your website has to make several HTTP requests, but by using the Expires Header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Use expires header for all static resources like image(s), script(s), CSS, PDF, Flash etc. (HTML is not static, and shouldn't be considered cacheable)
Google: For all static resources set “Expires header” to a minimum of one month, and preferably up to one year. Do not set it to more than one year in the future, as that violates the RFC guidelines.
Click here: http://code.google.com/speed/page-speed/docs/caching.html
Proxy Caching: Enabling public caching in the HTTP headers for static resources allows the browser to download resources from a nearby proxy server rather than from a remoter origin server. HTTP provides for proxy caching, which enables static resources to be cached on public web proxy servers, most notably those used by ISPs.
Other optimization techniques:
- Use <link> and NOT @import (while calling external CSS)
- Reduce DNS Lookups (Domain Name System): Reducing the number of unique hostnames from which resources are served cuts down on the number of DNS resolutions that the browser has to make delays the response.
- Make favicon.ico (small & cacheable): Web browser do request for favicon, so it's better not to respond with a 404 Error. Favicon should be small in size, preferably under 1K.
- Remove Comments: Remove all unnecessary and unwanted comments from your HTML, Java Script and CSS, as it save many bytes of data, and reduces the file size and browser renders them faster.
- Avoid Broken Links and 404’s: If any broken link(s) or 404 URL(s) is/are present in your web page(s) the web browser will call for those HTTP Requests and waste time in loading the web page(s).
- Use DIV/CSS based layouts over TABLES: Websites written using DIV/CSS are considered to be coded cleaner while tables can increase page weight.
Joydeep Deb is a Senior Digital Marketer and Project Manager with strong experience in Digital Marketing, Lead Generation, Online Brand Management, Marketing Campaigns, Project Management, Search Engine Optimization (SEO), Search Engine Marketing (SEM), PPC, eMail Marketing, Web Analytics, Web Technologies, Web Design and Development.
With an MBA in Marketing. IIM Calcutta Alumini. Lives in Bangalore, Karnataka - India.