With technology making things more quick and accessible, we humans have grown more accustomed to the things we do and process more efficient and faster (even in our everyday lives), making us more impatient in the process, especially when things are too slow.
Concerning the things up on the web, users are more likely to access your website if the load-time is quick and would not appreciate it if your site takes longer than normal to load. Today, we are going to explore the seven ways of improving website speed and performance, also including resources that can help you.
Why is speed so important?
As mentioned above, technology today has made us human take speed and efficiency for granted. So if a website takes too long to load, an average user of the Internet will just leave your site and go to another website (probably your competitor), this happens especially for people who browse to your website using a mobile phone and other portable devices. An online research states that 40% of users will leave your site if it fails to load within the first 3 seconds, just image that, losing 40% of potential clients or customers due to a slow website.
The point is that the load-time of your website is essential for good user experience and also the faster a website loads the likey-hood of more traffic there is going to your site, and the more traffic you have means a higher conversion rate through your website.
1. Compress your files
The tools I use to compress the files for my website varies depending on the file type:
- CSS Files: GiftOfSpeed
- HTML Files: HTML Compressor
- Image Files: TinyPNG
- Video Files: VideoSmaller
If you are using WordPress, here are some plugins you can use to compress your pages and improve the overall speed of your website:
2. Reduce HTTP requests
The above image is a website speed test that I have done using Pingdom, it gives you a depth of results including the number of HTTP request (marked in red) on the web page you have tested. As you can see, www.gudideas.co.uk makes 23 HTTP request to other resources.
The ways that you can reduce HTTP requests on your website are:
- Manage the number of images used on a single web page.
- Avoid using too many external HTTP requests.
- Avoid redirects on pages.
3. Server-side compression and caching
Another way of improving website speed is using a htaccess file to enable server-side caching and compression. htaccess files are server-side configuration files that can be used to configure settings such as redirections, password protection, error document, and much more.
Concerning improving your site’s load-time, you can use the htaccess file to do certain things such as deflating file types, setting an expiry date to cache files, adding file mime-types to compress files (especially font files) and most importantly enabling Gzip to compress files over the network.
# BEGIN Deflates <IfModule mod_deflate.c>
The above htaccess code helps with deflating, compressing and caching web content, it also turns on Gzip with reduces file sizes over the network.
The htaccess file that you create should be uploaded to the root directory; this should take effect almost immediately. You can test this by checking your website on Google speed test tool. However, it is important to check your htaccess file for errors before uploading it; you can use a website called htaccesscheck.com.
4. Make images web-safe
Images are very important on a website, it allows the user to see what you want to present to them and it is no secret that “images speak louder than words” (sorry about that cliche quote). All the images on your website make a huge difference on your website load speed, the images’ dimensions and file-size to be exact.
As you can see on the image above, on the speed test I did on Pingdom, the images take over 68% of the content size when the web page loads.
So what can we do to images to improve page load speeds on your website, well here are a way:
- Reduce Image Dimensions: One way of improving page load speeds is to reduce the dimensions of an image to an appropriate size depending on where the image is on the website page. Make sure that the image is not too small so that it does not pixelate.
- Compress Images: Another way is to compress your images using a compression tool, I use a tool called TinyPNG which is a simple image compression tool that uses “smart lossy compression techniques” to reduce image sizes. The great thing about TinyPNG is that you can upload up to 20 images and compress them at the same time and the average file compression size is around 70% for the images I have been compressing.
- Reduce Image Resolution: Reducing image quality and resolution is another way of reducing file-sizes of images, you can reduce image resolution by using image editors such as Photoshop.
- Crop Images: An lastly, another way of improving page load speeds is to crop parts of images the are not necessary needed. Cropping images helps with both reducing file-size and dimensions at the same time.
5. Optimising web pages for mobile
As stated earlier in this article, it is important that websites can be accessed and used through mobile and other hand-held devices. Optimising your site for mobile is crucial because an online statistic shows that this month (September 2017), the percentage of the users is higher than the users who are using a desktop on the Internet for the first time worldwide.
So what do you need to do to optimise your site for mobile phone and other hand-held devices? Well there are a few thing you must do, they are:
- Make sure that all elements have a good tap size (make sure they are not too small).
- Create fluid layouts.
- Reduce the number of elements on smaller devices.
- Cater responsiveness for all devices.
- Use compression tools for better load-time.
- Make sure that web page loads within 3 seconds at most.
There is so much to go into regarding optimising your website, so in the near future, I will post an article dedicated to mobile optimising. However, before I move on to the next part there is a framework I use for optimising web pages called AMP. AMP, otherwise known as Accelerated Mobile Pages, is an open-source framework that allows you to create consistently fast web pages across all devices and platforms. AMP is great for mobile optimisation because AMP pages still can be accessed when a user is out-and-about on portable devices or even in an area with a low Wi-Fi connection. AMP also has a WordPress Plugin that allow you to convert your blog posts to AMP pages.
6. Take advantage of CDN (Content Delivery Network)
Another way of improving speed on website pages is using CDN. CDNs, also known as Content Delivery Networks, are basically “optimised servers around the world that deliver web content based on the user’s geographic location”. Using CDN makes big improvements to website speed and load-time because if someone were to access your website from a country like Canada, the web content that will be delivered to them will be from servers nearby their location helping with the time the HTTP request travels from.
The above image show how CDN works (Image Credit: MaxCDN).
Within CDNs, you can store your website’s resources such as CSS files, JS files, Image files, Videos, PDFs and any other files that your site may need.
Popular CDNs you can use
Here are some popular CDNs you can use:
7. Change your hosting providers
“If all else fails… change your hosting provider” (I think that’s what the saying is). If you are not getting any luck with the other options in this article, change your hosting plan or provider. A good web hosting company or hosting plan is crucial for website speed. Think about it, if you are using a normal server rather than a dedicated server, your website will be among other people or companies websites meaning your website is essentially competing for bandwidth space with the other website on the server. This is where your hosting plan comes into place, make sure that your plan includes the right amount of bandwidth and disk space you need depending on the amount of traffic there is to your website and how content-heavy your website is respectively.
However, some hosting providers either store an excess amount of web content on a server or do not offer much regarding bandwidth, which does not help with website page speeds. The only thing you can do is to change your hosting provider, look carefully at the hosting provider you want to choose and do your research. Make sure they offer the right hosting plans you need for your website and check their customer reviews to see other people’s experience of them.
Can a Fast Website Make a Difference?
It is a proven fact that a fast website make a big difference in both usability and SEO, think about it. If you where a customer trying to access a website that is taking too long to load, you would leave to another website. So take a look at your website today on the testing tools mentioned above and get the speed up to scratch.