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.

Woman Using Mobile Phone

1. Compress your files

For the people who are not developers out there, your site is made up of many files. The larger your site, the likely-hood of more files on your website is higher, meaning your site may take longer to load, this is where file compression comes into place. Compression of files involves removing white-space characters and indentations; this helps with the reduction of file sizes, ultimately reducing the load-time of a web page. The file types that you must reduce are HTML files, CSS files, Javascript files, image files and more; especially HMTL files as they are the first file requested when a page is loaded.

The tools I use to compress the files for my website varies depending on the file type:

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

When a user accesses your site, their device essentially downloads the resources of the web page they have accessed. HTTP requests are requests transmitted from a user’s device to a resource file, which is used by the web browser. Resource files that can be requested on a web page are CSS files, Javascript files image files and more. The more the HTTP requests you have on your web pages, the longer it takes for the page to load because the user’s computer has to download the resource of the request.

Website Test Using Pingdom

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.

A good technique to reduce HTTP requests use is to combine files into one main file. For example, if you have a lot of CSS or Javascript files, you can combine and compress them together into one file, that means that you only have to make one HTTP request to the file.

The ways that you can reduce HTTP requests on your website are:

  • Decrease the number of CSS and Javascript files used.
  • Manage the number of images used on a single web page.
  • Avoid using too many external HTTP requests.
  • Reduce file sizes that the HTTP request requests to (CSS, Javascript and Image files).
  • 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.

Recommended htaccess Addons
# BEGIN Deflates <IfModule mod_deflate.c>
# Insert filters AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Drop problematic browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary <FilesMatch "\\.(js|css|html|htm|php|xml)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule>
# END Deflates # BEGIN Font Headers AddType application/vnd.ms-fontobject .eot AddType application/font-sfnt .otf AddType image/svg+xml .svg AddType application/font-sfnt .ttf AddType application/font-woff .woff AddType font/woff2 .woff2 # END Font Headers # BEGIN Expires Caching <IfModule mod_expires.c>
ExpiresActive On ExpiresDefault "access plus 1 month" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" </IfModule>
# END Expires Caching # BEGIN Gzip <IfModule mod_gzip.c>
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>
# END Gzip

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.

Pingdom Test Content Size Volume

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.

Toddler Using IPad

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.

Content Delivery Network Example

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.

Couple Using Technology

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.