The Need For Speed: Resources To Optimize Site Load Time


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.

Our featured article this month teaches you how to speed up your site to meet the expectations of visitors and search engines. We’ve compiled a list of tools to help you measure your site’s speed and identify bottlenecks. We’ll also review techniques like CSS sprites, JavaScript minification, lazy loading, and CDN.

Tools to Measure your Site Speed

tools

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
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
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 Plugin
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

reading

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

caching

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
HTML5 introduced several new features to the web such as multi-threaded JavaScript, cross document messaging and local storage. This article will teach you how to create an offline application caching feature of HTML5.

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 Loading

lazyloading

Lazy loading is the opposite of pre-loading whereby which elements are loaded on-demand only when they are needed. It is a commonly used technique for long pages with graphical content – the images are loaded only when the user reaches a certain viewpoint (usually when they scroll down further the page). It is however not limited to images only – you can use it to lazy-load HTML content, JavaScript files, and much more.

Lazy Load jQuery Plugin
Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) won’t be loaded before user scrolls to them.

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.

Image Sprites

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:

sprite

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
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

compression

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:

Minify
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Microsoft Ajax Minifier
The Microsoft Ajax Minifier enables you to improve the performance of your web applications by reducing the size of your Cascading Style Sheet and JavaScript files.

Online JavaScript/CSS Compression Using YUI Compressor
An online tool provided by YUI that will help you compress your JavaScript and CSS files. You will be given several compression options and you can upload or copy-and-paste your source.

CDN Networks

cdn

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
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.

Hosted Libraries

hostedlibraries

Based on the concept of CDN, hosted libraries allows you to call popular JavaScript libraries hosted on content distribution network. Below is a list of some of the hosted libraries:

Google Hosted Libraries
Gogole hosts several popular JavaScript libraries including Dojo, Ext Core, jQuery, jQuery UI, Mootools and Prototype. It also makes an effort to make any latest stable version available as soom as they are released and will host prior releases indefinitely as well.

Microsoft AJAX Content Delivery Network
Microsoft also runs their own CDN for hosting popular libraries. It includes jQuery and several ASP.NET JavaScript files like ASP.NET Web Forms and ASP.NET MCV.

CDNJS
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.

Related Posts:

Leave a Comment