How to speed up your site to meet the expectations of visitors and search engines.
Even with increasingly fast Internet access and responsive browsers, online visitors have little-to-no tolerance for slow websites. No pun intended, but the quest for faster websites is a never-ending race for web designers and developers alike. Several surveys and research projects have revealed that a strong correlation exists between page speed and overall user experience, which ultimately governs conversion rate and engagement levels. According to some of these surveys, nearly half of all web users expect a site to load within three seconds or less. Further, a one-second delay in page response decreases user satisfaction by 16 percent.
In addition to affecting user experience, site load time is now also a factor search engines use to determine rankings. And, of course, optimizing a web page can help significantly in reducing operating costs such as bandwidth and other server resources. Several techniques can help in optimizing site speed, and the good news is that most of them aren’t that difficult to implement.
Tools to Measure your Site Speed
Before undertaking any site optimization tweaks, it might be wise to run your site against a site speed tool. This will allow you to benchmark your site and identify bottlenecks that are slowing your pages. Below is a selection of online services that you can use to measure your site’s speed:
Pingdom offers a really comprehensive load time testing tool. By simply typing in your URL, Pingdom will help you analyze the load speed of your websites and learn how to make them faster. It lets you identify what about a web page is fast, slow, too big, what best practices you’re not following, and so on.
GTMetrix has a suite of features and options to make optimizing your website speed clear and easy. By signing up for an account, you will be able to track your page load time history in interactive graphs, test from multiple locations and set up monitored alerts.
YSLow is a popular Firefox plugin that sits in your browser and help you analyze web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
Recommended Reading on Site Speed Optimization
To accelerate your site effectively, you might want to go through the following articles. They will teach you the basics of optimization and provide handy tips.
Best Practices for Speeding Up Your Web Site
Yahoo’s ‘Best Practices for Speeding Up Your Web Site’ is a must-read. This article outlines 35 best practices divided into 7 categories for making web pages fast.
Google’s Make the Web Faster
Google has a dedicated resource center that covers several aspects of page speed optimization. You will find tools that will help you analyze and optimize your site as well as articles and best practices on caching, request overhead, payload size, browser rendering and mobile speed optimization.
Why You Need a Seriously Fast Website
A recently-published article that explains how your page load time can affect every metric you care about from bounce rate, search ranking, conversion, pageviews and even revenue.
Caching is a popular method used to speed up pages – it can be implemented on the client-side (browser) or server-side.
Caching Tutorial for Web Authors and Webmasters
A great introductory article on caching. Through this article, you will learn what exactly is a web cache, when are it is the most effective as well as notes on implementing caching on server and client sides.
Caching HTTP Headers with Cache-Control
An article that explains how you can use cache-control: max-age to inform browsers that component won’t change for a defined period. This way you can avoid unneeded further requests if browser already has the component in its cache and therefore primed-cache page views will be performed faster.
HTML5: Offline Application Caching
PHP Caching Class
With this script you easily can make your PHP scripts 50% faster by caching SQL results, big arrays or for example HTML tables that contain dynamic content.
Lazy Load jQuery Plugin
YUI Image Loader
The ImageLoader Utility is a Yahoo User Interface (YUI) component that allows you as an implementer to delay the loading of images on your web page until such a time as your user is likely to see them.
Images sprites are becoming increasing popular as they offer a great way to reduce site load time and server resources. It works by combining several images into a single larger image to avoid multiple HTTP requests. Below is our selection of resources that will help you get started with image sprites:
The Mystery of CSS Sprites
A nice introductory article on CSS sprites – you will learn what they are, when to use them, what’s the best approach to slicing your images, etc.
SpriteBox eases the process of creating CSS classes and IDs from a single sprite image. After you upload your image, you will use its selection tool to mark the position of the individual sprites and SpiteBox will generate the relevant horizontal and vertical background positions.
Creating CSS Sprites with PHP
The one major drawback of CSS Sprites is maintaining the images and recompiling and uploading every time one of the sprites changes. CSS Auto Sprites changes all that by automatically building the CSS sprite image from files in a directory as well as generating the CSS code for you.
Minification is the process of removing unnecessary characters from code to reduce its size thereby improving load times. When applied to your CSS and JS files, you can achieve up to 20% reduction in file size. Here are some tools that will allow you to minify your files:
Microsoft Ajax Minifier
CDN networks are distributed servers spread across different geographic locations aimed at serving web objects (text, scripts), files (document, software) and multimedia content (audio, video). By serving content from a location that is closest to the end-users, CND networks are able to dramatically speed up the time your site takes to load. Below is a list of popular CDN networks:
Amazon CloudFront CDN
Amazon CloudFront is a web service for content delivery. It integrates with other Amazon Web Services to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no commitments.
Windows Azure Content Delivery Network
The Windows Azure Content Delivery Network (CDN) offers developers a global solution for delivering high-bandwidth content that’s hosted in Windows Azure. The CDN caches publicly available objects at strategically placed locations to provide maximum bandwidth for delivering content to users.
Google PageSpeed Service
PageSpeed Service is an online service to automatically speed up loading of your web pages. PageSpeed Service fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google’s servers across the globe.
CloudFlare designed its CDN (Content Delivery Network) without the legacy of the last 15 years. Their proprietary technology takes advantage of recent changes to hardware, web server technology and network routing.
Google Hosted Libraries
Microsoft AJAX Content Delivery Network
One of the issues with the Google and Microsoft CND is that they only host popular libraries. CDNJS offers a similar CDN service but it hosts over 250+ libraries making it the most comprehensive hosted library service.