So far, we've explored some of the reasons why our site might be slow, and the consequences we face if we do not address performance issues. Although some of the issues we could face may not be easy to solve, we can still effect changes that help improve performance of our sites.
Analysis shows that if a page takes longer than 4–5 seconds to load, then customers will frequently vote with their feet (that is, walk away). Any delay of more than a second can equally lead to a poor user experience.
A great source that can help us understand where some of our issues are is that behemoth, Google. We may knock it for being omnipotent, but it clearly knows some useful tricks!
Google states that our page doesn't have to entirely load within 4–5 seconds, but should be usable within this time; any content that is of a lower priority can be put below the fold or loaded in the background.
At a basic level, Google recommends that our server response time should be less than 200 ms—we should also explore aspects such as client-side rendering to help reduce the time taken to load our content:
Although much of this applies to any site, this is particularly important for responsive sites, given the extra code required to manage the experience for mobile devices.
Google also recommends that we should consider performing these tasks:
- Minimize the number of redirections and roundtrips required to render content
- Optimize JavaScript execution and image sizes
- Avoid external blocking of the JavaScript and CSS in above-the-fold content, by pushing scripts to the bottom of the page
- Reduce the number of domains called from a page, which helps avoid redirection between mobile and desktop clients
In addition, we can explore the use of other tricks to help with performance. These include the following:
- Use of cache: We can consider using this as a means to store data temporarily, that doesn't change very often; it will help reduce the number of requests to the server (and consequently bandwidth usage), if the content hasn't changed. With the advent of HTML5, we can even use the offline AppCache facility. This has the added bonus of making content available offline, if our Internet access fails. A similar technique exists with local storage; while this is not available offline by default, it can be used to cache more persistent content if needed.
- Use of Scalable Vector Graphics (SVGs): Unlike JPEG or PNG images, these can resize without loss of quality, so are perfect for responsive designs; their size is often smaller than an equivalent standard image. These will not suit every application though, as their use is more suited for line drawings or logos.
- Apply fragment caching: If we're generating dynamic pages that require server resources to render but where only a small part changes, then applying fragment caching means we can store static versions of the content that doesn't change. When a page is then requested, we send the cached content, and only apply the changes needed to update the content. This reduces the number of calls to our database backend and therefore the resources required to display our content.
- Optimize the database: If our website is one where content is posted from different sources, then content will be updated frequently; garbage data will equally increase. We should spend time regularly cleaning content in our database to ensure it is as small and working as efficiently as possible.
If we want to explore things further, then there are some more advanced, invasive changes we can use to help optimize our site. These involve more work, so should be planned as longer term changes:
- Enabling GZip compression: We can use this to compress resources, which will make pages load faster. However, this shouldn't be applied across a site without planning; some elements such as CSS or JavaScript can be compressed or minified during development, so applying GZip compression will not result in any benefits.
- Choosing our host: There are dozens of hosts available; each will offer different levels of functionality and performance that can have an impact on the operation of our site. It's important to take time to choose the right host; it's worth comparing different hosts to see how they fare, and get recommendations from others as to who has performed well over longer periods of time.
Tip
Check http://www.whoishostingthis.com for reviews on companies and see how they stack up against others.
- Excluding content or media that is not required: This should almost be self-explanatory, but we should not load content that isn't needed! It's key to understand client requirements; if clients insist on making everything available from both desktop and mobile devices, then it may be necessary to take them through the reasons why this isn't a good course of action and encourage them to see that providing less content on a mobile device won't necessarily result in a poor user experience.
- Exploring the use of Content Delivery Networks (CDNs): This helps render content more quickly, as it is fetched from the nearest local server to the client. Content is normally uploaded to one central point, but is then replicated to several key servers around the world; this reduces the distance travelled and time taken to render content on the screen.
- Limiting HTTP requests: As a part of development, we should consider the number of HTTP requests that our site will have to make to the server and aim to reduce these as much as possible. This reduction will help toward reducing network traffic and improving performance, as we do not have to access the DOM as frequently, nor wait as long for content to be downloaded. We can use tools such as creating image sprites or pre-processors to merge multiple CSS files into one, to help with keeping HTTP requests to a minimum.
It takes time to optimize a site, but the effort spent in refining it will pay dividends in increased patronage and ultimately increased sales. The trouble is, we won't know how well our site performs unless we test it; let's explore some of the tools we can use to help gauge how well our site is operating, in more detail.