Foundations of Faster Websites

At the same time that more and more people are transitioning to mobile devices that run on slower networks, users are expecting to see better sites running quickly and efficiently. The costs, both monetary and otherwise, resulting from performance issues relating to your site are high, and legacy techniques aren’t necessary sufficient to solve the issues you’re facing. It can be hard to know where to start in terms of speeding up your site, so this article discusses ten different techniques you can use to improve your pages’ performance.

Caching

By caching your resources, especially those that are static in nature, you minimize the amount of time your users spend waiting for the files your site needs to render. Each cached file means that the browser needs to make one fewer HTTP request, and due to differences in latency and bandwidth, you can’t really solve the issue that making/waiting for requests is slow, even with faster Internet connections. As such, it’s key that you minimize the number of requests browsers are required to make before your users see your page.

Cache Your Resources

One way to reduce the page load times for your site is to utilize caching early and often. By eliminating the number of HTTP requests your site makes, and your users will spend less time waiting to see the pages they have requested.The New York Times homepage is a large, dynamic site that has to load a lot of content in very little time. While a majority of their content changes frequently, that doesn’t mean that caching is out of the question for them. When looking at the waterfall chart for a repeat view of this page, we see several lines that look like static resources, which means they are prime candidates for caching.

After retrieving the initial HTML file, we see three lines that look like static resources: styles.css, framework.js, and nyt-logo-279×64.svg. This is at least three, round-trip HTTP calls that could have been eliminated, and the time could have been used to retrieve the required dynamic resources.

If you run an eCommerce site, such savings become especially pronounced, due to the heavy load typically placed by an abundance of images (which generally do not change between page views). This is especially important since users will wait no more than three seconds for a given page to load before leaving the site and abandoning their carts.

Generally, most static resources can (and should!) be cached, and by configuring your web servers to ensure HTTP caching and taking advantage of extensions to your content management systems (such as Magento or WordPress) for HTML caching, you can improve your site’s experience for your users.

While you don’t need to cache your static resources for an extended period of time, consider caching your resources for at least ten times the length of a typical session to minimize the workload placed on your server and to speed up the page load times for your users.

Cache Your API Calls

If your site loads information that comes from an API call that returns the same information every time, you should cache these calls to reduce the number of HTTP requests. Generally, such information is available to your users without requiring to provide identifying information or being logged in to your site, so the results are unlikely to be user-specific. As such, these are good candidates for API call caching. For example, some examples include map or location information about your business, Facebook page data, and so on.

Content Delivery Networks (CDN)

By hosting your resources using a CDN, you can deliver content to your users using the server(s) closest to them. Minimizing the distance between the users and the server hosting the data will reduce the amount of time the users spend waiting for a site to load, as well as take advantage built-in features such as resource optimization.

Optimize Content Size

Now that you’ve minimized the number of files you’re serving and have configured your CDNs to serve them from a location that’s closest to your user, take a look at the files themselves. More specifically, are you sending out files that are as small as possible?

Enable HTTP Compression

Rather than serving files to your users in the original sizes, be sure that you have enabled HTTP compression on your servers. This ensures that files that are good candidates (text files, fonts, and so on) for compression are served to your users that way.

However, to optimize use of HTTP compression, ensure that you are not introducing unnecessary overhead (such as compression things that are already optimized, such as JPEG images). Additionally, be sure that all your hosts (both in-house and CDNs) have the correct configuration files so that there is consistency in terms of what files are served compressed and what files aren’t.

Lossless Images and Optimizations

In instances where the you would like to retain as much detail in your images as possible, you can still make them to be smaller using lossless optimizations. For example, one such trick might be to strip a photo of its metadata, which includes details like when and where the photo was taken. While the savings in terms of size and time required for download are smaller than that obtained using lossy optimization, lossless images and optimizations are still beneficial in cases when image degradation is not acceptable.

Lossy optimizations work primarily because the human eye does not do a very good job at distinguishing between subtle changes in color. For example, an image might contain thousands of shades of one color, with one pixel showing as only slightly different from the ones next to it. Because your eye won’t be able to differentiate between the two shades, the image file can easily replace one of the colors, making the file smaller.

It can be hard to make that balance between displaying high-quality images on your site (which is especially important for eCommerce) and minimizing the wait times users face due to loading large files, but lossy optimization can help you strike that balance.

Legacy Tricks

These tricks are primarily for sites that are (and plan to) run using the HTTP/1.1 protocol, rather than transitioning to HTTP/2 in the near future. Due to the way that HTTP/1.1 handles multiple requests by queuing them up for individual handling, it makes sense to minimize the number of HTTP calls your site makes.

Combine CSS and JavaScript Files

Your site might have one main CSS/JavaScript file and several supporting CSS/JavaScript files. Depending on how large each of the files are, you might consider consolidating these files. While combining files results in the browser fetching an overall larger file, it reduces the number of calls the browser must make to fetch each individual file. Reducing the overall number of calls (and thus the amount of time it takes for the browser to fetch the files) will reduce the load time of your site.

Use Inline CSS and JavaScript Snippets

By using inline CSS and JavaScript, you can eliminate the time required for the browser to make a request for and download the external file.

The disadvantage of this method, however, is that the size of your HTML files increases (all the more so if same script contents must be included across multiple pages). As such, you should only use inline scripts for small amounts of content, such as the content required only for your above-the-fold content.

All other content should be placed elsewhere, even if doing so requires additional HTTP calls to fetch the resource, since the goal is to get the most important content to the user as soon as possible, not to load every aspect of the site as quickly as possible.

Conclusion

As users demand more and more from their websites, all while increasing their usage of mobile devices (which typically run on networks slower than those used by less portable devices such as laptops), it’s important for you to optimize your sites to maximize performance. It can be difficult to know where to start, but the ten techniques listed within this article is a good place to start. For additional information on how you might improve your site, contact Rigor for a free, personalized performance report.

Suggested Blog Posts

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...