Site speed has been associated with every business metric you care about: page views, bounce rate, conversions, customer satisfaction, return visits and revenue. These effects are felt at companies of all sizes, from online giants like Amazon.com to small e-commerce shops.
A full 85 percent of performance happens at the front end - i.e., the browser level - yet despite browser vendors' focus on performance, browser innovation can't keep up with the increasing demands of today's large, complex web pages.
In this post, I share 10 tactics you can adopt to take back control over the performance of your web pages. Most of these tips can either be implemented manually by your developers or be performed using an automated front-end optimization solution.
Pages are Huge
According to the HTTP Archive, the average web page is now well over 1 MB in size. That's a massive payload, and images alone account for a full 60 percent of it. In my travels, I regularly see sites that use unoptimized, unnecessarily bulky images. Combatting this bulk is a huge step toward making pages faster.
What you can do about it:
1. Ensure your images are in the correct format. Typically, use JPEGs for photos, SVG for line art, and GIFs or PNG-8s for low-complexity images with few colors.
2. Compress images. Search online for "image compression tools" and you'll find a selection to choose from.
3. Compress text-based content. Make sure your pages follow Google's best practices for compressing HTML, CSS and JavaScript.
Latency
Latency is the amount of time it takes for the host server to receive and process a request for a page resource. The amount of latency depends largely on how far away the user is from the server, but it's typically 75-140 milliseconds per resource for desktop users. When you consider that a typical web page contains around 100 resources, you can see how these milliseconds can pile up.
What you can do about it:
4. Consolidate page resources. Consolidating similar page resources into bundles is an effective way to battle latency; fewer bundles equals fewer server roundtrips.
5. Add an Expires header. Adding Expires headers lets you control how long your page resources are stored in the visitor's browser cache. Therefore, a visitor can return to your site days, weeks, even months later and still experience faster load times. Expires headers are most often used with images, but they can be used on all resources, from scripts to Flash components.
6. Minify code. A page's source code can contain a lot of unnecessary characters (e.g., spaces, new line characters, comments), and these can consume bandwidth and cause additional latency. Minification, which is usually applied only to scripts and style sheets, eliminates these characters, typically reducing file size by about 20 percent.
7. Use a content delivery network (CDN). CDNs mitigate latency by caching page content in distributed servers across a region or worldwide, thereby bringing content closer to users and reducing the roundtrip time. CDNs used to be an option only for big companies with deep pockets, but now there are choices at many price points.
Pages Are Poorly Structured
The order in which page elements appear in the browser really matters. Eye-tracking studies have shown that if the main body of a page hasn't loaded within the first few seconds, visitors are unlikely to spend much time looking at it when it finally does load.
One of the most common problems I encounter is poorly optimized third-party scripts (for ads, analytics, social buttons, etc.) that either delay the rest of the page from rendering or block page load completely.
What you can do about it:
8. Put style sheets at the top of the page. If your site uses cascading style sheets, make sure your CSS loads first so that your pages can start rendering right away.
9. Move blocking JavaScript to the bottom of page or use asynchronous versions of these scripts.Ideally, you want your third-party content to load at the same time as the rest of the page, but if asynchronous versions of these scripts aren't available, move the synced versions to the bottom of the page.
10. Ask your third-party provider for a performance service-level agreement (SLA). A good SLA should express the provider's annual uptime guarantee as a percentage — ideally, as close to 100 percent as possible — as well as describe the process for reimbursing site owners if uptime drops below the SLA guarantee.