19 Killer Ways to Make Your Website Load Lightning-Fast
Page load-times are one of the most important aspects of successfully marketing a website today. If your visitors have to wait an eternity for your pages to load, they’ll simply leave your site and go somewhere else, let alone the impact this will have on your Google search engine rankings.
In this guide we’ll provide 19 killer strategies you can use to ensure your web pages load lightning fast. Follow this guide, and you'll be well on your way to providing an improved user experience for your customers and hopefully drive more traffic to your site.
1. Hire a Website Developer to Look at Time to First Byte (TTFB) issues
If you haven’t heard of TTFB before, it's basically the time your web pages take to connect to the server before all your images and page content begin loading.
Generally slow TTFB values are due to poor coding practices or unsuitable hosting. In the below example you can see a value of 941ms. Ideally you should be aiming for something less than 200ms.
Slow TTFB values are one of the most common load-issues we see at OSE. If your web pages are loading slowly, this is almost always part of the problem. If this sounds like you, then we recommend talking to a web developer with experience in TTFB issues for assistance.
2. Optimise Your Images for Fast-Loading Web Page Performance
Number two on our list of improvements we help clients with is optimising their image load times. This can happen two ways. Either through reducing the file size of images (without loss of quality) using clever tools like TinyPNG or batch image processing, or by combining images together to reduce the number of images you're actually loading (spriting).
We’ve seen page performance increase by up to 80% alone using clever image optimisation techniques, so make sure you don’t ignore this technique!
3. Decrease the Number of Elements in Your Pages
4. Minify CSS and JS files
Haven’t heard of CSS and JS minification? No problem. Minification services such as JSCompress and CSS Minifier are awesome for shrinking the file sizes of your scripts and styles. By removing white-space and changing the names of variables, these services can reduce the size and increase the performance of these types of files by up to 30%. Not bad.
If you're considering trying out minification practices, remember that most developers minify their CSS and JS for production sites and keep a copy they can develop with on the server as backup or on a staging site.
5. The rule of 4
Did you know browsers can load up to four elements on a page simultaneously? By using subdomains or loading elements from code libraries such as the Google Hosted Library you can load up to four elements at once bypassing the standard "two elements" at a time processing most browsers implement.
By using multiple domains to load your content you can reduce incremental loading (i.e. loading one element after another) and really speed things up, not to mention taking advantage of super-fast servers like those owned by Google who will always outperform you. Modern browsers such as Chrome are better at this than most, however working with multiple servers or a CDN is an awesome way to speed up your page load times.
6. Localise Your Website Hosting for Speedy Web Pages
If you’re hosted on shared website hosting, chances are your website is hosted overseas in the U.S. What this means is that every time you try and open a web page here in Australia, your site is going to have to request that data from overseas which takes times. If you can host your website in an Australian data centre like those offered by Amazon, you’re going to see much better performance. If you’re considering a hosting transfer, we recommend moving your site to Amazon’s Sydney data centre which offers awesome reliability at an affordable price-point that OSE can manage.
7. Avoid Storing Video Content on Your Server
Companies like YouTube and Vimeo both have excellent business services where you can host videos and embed them on your site. Not only do they assist you to avoid hefty hosting bills if your web-pages go viral, but the load times of these sites are amazing due to the heavy investment in enterprise architecture they've made to ensure optimal performance.
So next times you’re embedding a video into your page, ensure the URL is from an external source. This way you can avoid lag in video streaming, initial load and hosting costs.
8. Reduce Your HTTP Requests
Say what? Basically, every web pages loads a certain number of elements in a page. Reduce the number and you’re more likely to have a fast-loading web page. This can be done a number of ways, but aiming for no more than around 60 requests is a good place to start. You’ll be amazed at the reduction in load-time a site with 60 request vs a site with 200 requests will see. So to check your count out, just visit the Network tab in your Chrome developer tools by inspecting your web-page and reloading it.
9. Don’t Throw Money at Powerful Hosting and Expect Results
Unfortunately, we see a lot of customers come in who have been advised to spend large amounts of money on hosting to fix performance issues with their sited. Nine times out of 10, unless you’re receiving massive volumes of traffic, you don’t need to do this. In general, poor load times are due to lazy coding practices. So before you open the cheque book, look at the code first.
10. Consider Using SVG Images as Code Blocks
If you’re really looking to ramp up the performance of your web pages, one thing you can do is open an SVG image in a text editor, copy the code, and paste it into your web pages as oppose to referencing it as an image like you would a JPEG or PNG image. This bypasses the block rendering slowness of modern browsers and is read just like plain-old HTML in a page. Super fast!
11. Review Server-Side and Client-Side Caching
Caching is one of the tools professional web developers use to improve the performance of web-pages, and this comes in two formats; Server-Side and Client-Side caching.
These caching methods allow you to store either previously accessed content locally on your PC or the server for fast-access. If you’ve got caching turned off for server-side elements such as your PHP code, or client-side for elements such as images or CSS, turning this on can have a huge impact on your load times.
12. Utilise AJAX Calls to “Access What You Need”
Many websites are built to load everything you could need to run on a web page every time you visit a site. But what if there was a better way? Enter AJAX calls.
A simple example of an AJAX call may be loading a second picture of a product on an eCommerce store. You only need to do this if your user has clicked to see the picture (i.e. a handbag in a different colour), so why load all product variations at once which is just going to slow your pages? A simple restructure of your page content from an experienced web designer can reduce load times using this technique by massive amounts.
13. Try Advanced Performance Testing with Blackfire
Every now it's really difficult to determine why a web page is loading slowly using the usual bag of tricks. Sure, you can pinpoint generic issues, but what about what’s going on behind the scenes?
At OSE we use a service called Blackfire for advanced website performance diagnosis. Blackfire is an awesome tool we’ve discovered and has helped us uncover some startling issues with sites. From locating excessive programming loops, to hardware issues and much more, Blackfire is a great tool!
14. Setup a Content Distribution Network (CDN)
You may have heard of CDN’s. Basically, they’re used to serve content efficiently across the web to different locales using load-balanced servers.
For example, you may have a site which receives half its traffic from Australia, and half from the U.S. In this instance, you can host all your images and files in a synced-environment which serves the U.S customers a version sitting on a U.S server, and the Aussies a version sitting in Australia.
The benefits of file access and time to load are significant with CDN’s. But bear in mind, this usually works best when setup by a professional.
15. Optimise Your Database Tables, Columns and Queries
Chances are your website is using some kind of database to serve your content, but did you know that database performance can be one of the major detractors to page load times?
By having a professional optimise the fields in your database to be as lean as possible, you can reduce seconds of your page load times. Couple this with database queries that only select the very minimum amount needed and your site will really start to sing.
16. Avoid Background Images in Favour of Flat Colours
If you compare the load-time of a full-width background image to a flat colour background, the difference can be many seconds. By using flat-colours in your designs, you can save a lot of time. If you’ve ever seen a web page with large background images, they generally load pretty slowly. So, if you can use flat colours with some clever CSS, your site pages will load a lot faster.
17. Ensure HTTPS Errors are Removed
One of the areas which browsers choke on is loading non-HTTPS content in HTTPS environments. An easy way to clean this up is using the Chrome developer toolbar and identifying all the items in red within the Console that are being referenced from non-HTTPS addresses. Fix these, and your pages should load a lot smoother.
18. Tinker with Load Order Using Perceived Load Time Techniques
If you’ve ever installed a script on your site, you’ll generally be asked to add the script to the HEAD or just before the end of your BODY tag. You’re given this option because often pages don’t need to use scripts when the page initially loads and can be added the base of a site (just before the end BODY tag).
By placing scripts that are not required for a fully functional page at the end of your code, you can take advantage of a technique called ‘Perceived Loading’. Loading scripts at the bottom of a page allows your users to begin interacting with your site even though the page load isn’t finished. Cool huh?
This is not a technique widely used by the developer community unless you have a CMS templating system that supports it, but the less render blocking JS you have in your pages the better your load times will be!
Need more assistance?
If you need assistance implementing any of the above techniques to improve the load times of your web pages, OSE's web development team is more than happy to assist.
Feel free to drop us a line via our contact page or call us directly to get the conversation started.