On the modern web, users expect things to be fast. There are lots of published studies showing that if a website loads in a mere 3 seconds, it loses over one-third of the traffic it would have received had it loaded in 2 seconds. Keeping this in mind, here are a few ways to get your website responding faster.
Choosing the right host
One of the most important factors in getting your website speed up is to choose the right host. There are two primary factors to consider: location and price.
Getting a host in the right area
When a user tries to access your website, there are a number of steps that his web browser takes to find your website. If the user is on a WiFi or wired network, the web browser asks the local router if it knows where your website is. The local router (Router #1) probably does not; but it knows of a router (Router #2) that says it does, so Router #1 asks Router #2 for the website location. Now, Router #2 probably doesn’t know either, but it knows of yet another router (Router #3) that may, so it interrogates Router #3. This chain repeats until a router is found that knows where your website is physically located, and then sends the information back to the original web browser.
Choose a host that is near where most of your clients are going to be; if you need to cover a wide area like Canada, choose a CDN to ensure there are servers located near your client.
A host that responds quickly
Once the connection to your website is established, the server (which is just the computer that hosts your website) needs to do all the steps required to show the page to the user. This means that the server needs to:
- Ensure that it isn’t too busy rendering a page for someone else.
- Find out what page the user has requested on the website.
- Run any code that the page says it will need.
- Send back the HTML of the final rendered page.
Of these steps, the first can be addressed by choosing the right host. A good host will have a server with a lot of memory, CPU cores, and additional disk drive space; these features allow for the server to render more pages for more users at the same time. One thing to consider, though, is how much traffic you expect to see on your website; a niche market that receives 1,000 visitors per day needs much less expensive hardware than one that receives 1,000 visitors per minute.
Quick Tip
Try to match your website traffic to your website’s host’s technology; you can save money by choosing a smaller host for a smaller website. Don’t skimp on hosting for a busier website though; losing traffic to slow response times will cost you more money than the savings in hosting.
Writing your website for speed
Although hosting is very important to website speed, even the most expensive hosts cannot solve the problem of a website that is poorly written. If the code that the page needs is overly long, the page will take a long time to render. With that in mind, here are a few ways to get your website running better for all users.
Optimize for Google Pagespeed
The services provided by Google themselves are quite honestly some of the most informative and relevant options available to website owners and developers concerned with traffic from search.
In a more recent article on image optimization for websites, we discuss the options for improving image sizes in great detail. This is a must-read for image-heavy websites!
Develop in a mobile-first environment
When compared with desktop computers, mobile devices often suffer from poor connectivity and weaker processors. This means that any slowness on the website will punish mobile users far more than the equivalent desktop user.
When developing your website, it is absolutely a mistake to ignore mobile to the very end, and oftentimes trying to get a mobile site working fast after developing a desktop site is a full project in its own right. Developing mobile-first, however, has the following advantages:
- It doesn’t ‘break’ at certain screen widths; as you are specifying the minimum width certain features will display, you will never be caught off guard by an oddly-sized device.
- A slow mobile site will be immediately obvious, and resolving it will speed up the desktop site.
- It becomes easier to maintain and extend the site in the future, which keeps costs down and speeds up.
Keep external resources down
It doesn’t matter how fast your site responds if the resources (such as images, styles, remarketing codes, fonts, etc.) take a long time to load. Modern browsers (under HTTP 1.1) allow a maximum of six parallel connections per domain, so if you need to load 240 images, the browser will need to repeat this process 40 times. This will make your site seem slow, even if the hosting causes the main page to be lightning-fast. Here are a few ways you can keep the number of resources low:
- Try to ‘bundle’ and ‘minify’ scripts and styles on your website; one 200kB file will load faster than eight 15kB files (even if the 200kB file is larger). Minifying your scripts and styles will lower the file size (because every little bit helps).
- ‘Spritify’ small images (such as icons) so that only one image is loaded, and use the ‘background-position’ CSS rule to display the icon you want.
- Run an image optimization tool over any images you upload to your website; a lossless compression on a slideshow image can reduce the image size by over 60%.
- Keep remarketing scripts and truly ‘external’ resources to a minimum; do you really need 12 fonts on your website?
Quick Tip
Every bit of code you add to your website matters; make sure you are getting value out of it before enabling it.
Write code designed for efficiency
One of the major pitfalls that many new developers encounter is when they try to reinvent the wheel; they will write their own function to accomplish a task that is done better and faster by the language in which they are working. Take, for example, a simple sort function. A naïve developer may try to implement it by swapping elements in place until the list is sorted.
A list like:
Would take the following steps to complete:
Looks great, right? Unfortunately, this algorithm (known as “Bubble Sort”) has a runtime that grows with the square of the input length; the worst-case scenario will take 25 iterations with an input of length 5.
The built-in algorithm for sorting, “Merge Sort” is much faster; however, it is slightly more complicated to mentally visualize what is happening. As a result, many developers choose the easier-to-develop option at the cost of speed. The downside, of course, is that something that could be done very quickly ends up bogging down the server with a lot of extra work.
Quick Tip
Be wary of throwing more hardware at a software problem; even the most expensive hosting cannot work around code that is written badly.
Putting it all together
Hopefully, the breakdown above has clarified some of the mysteries behind making your website a bit faster. If you have any further questions or own a slow website you’d like us to look at, contact us today.