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.
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.
Lengthen the Cache Time of Your Resources
16.9% of resources were cached for less than 24 hours, and 9.8% had resources cached for less than 1 hour. Essentially, this means that a sizable fraction of websites were cached in a way that visitors arriving even just one day later had to wait to download resources that probably haven’t changed during that time period (the average resource age is 146 days).
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.
Use a CDN
Similar to caching as many of your resources as possible, you should consider using a CDN to serve as many of your resources as possible. While caching reduces the number of HTTP calls required, using a CDN minimizes the overhead required in the event that an HTTP call is made. In addition, your CDN might offer up content in its most optimal form and offer built-in scalability features, which is helpful for unexpected surges in traffic.
Configure Your CDN Properly
Once you’ve chosen a CDN, ensure that it is configured properly. Some common questions to ask when looking at your setup are:
- Is it caching (for example, are your pages sending out no-cache directives, rendering your CDN ineffective)?
- Are you caching everything that could be cached, not just large files like images?
- Have you updated your domains and subdomains appropriately to reflect the changes to where files should be obtained?
- Are your resources working appropriately with edge servers?
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 Images and Optimizations
You can use lossy compression to generate even more savings in page load times by sending smaller files. With lossy optimization, you are modifying graphical data, and in a lot of cases, this loss of data is not apparent from the user’s perspective.
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.
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.
However, due to HTTP/2’s use of multiplexing with regards to simultaneous requests, avoid combining CSS/JS files and inlining CSS/JS, both of these are hacks to make HTTP/1.1 work better, but hurt performance in HTTP/2
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.
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.