How Co-working Office Spaces Are Beneficial For Startups
18 April 2019
How to Write an Effective App Description That Generates Downloads
18 April 2019
How South African Small Businesses Waste Money
18 April 2019
When Should You Be Replacing Your Running Shoes?
17 April 2019
Trending Music Hashtags To Get Your Posts Noticed
24 August 2018
Trending Fashion Hashtags To Get Your Posts Noticed
05 April 2018
Trending Beauty Hashtags To Get Your Posts Noticed
05 July 2018
Trending Wedding Hashtags To Get Your Posts Noticed
18 September 2018
Simple Front End Changes That Boost Page Speed
There is nothing more frustrating about the internet (apart from trolls) than a web page that takes an eternity to load. In website terms, an eternity can be 2 - 3 seconds more than the user expects and with such small margins any changes can make a big difference. Improving your page speed is always beneficial to the user and offering a superior user experience will have users coming back time and time again. Page speed also is seen as high priority ranking factor for search engines so it can help increase your chances of getting more organic traffic.
For more on how fast your website should check out our article How Fast Should Your Website Be For Mobile
So how do you know if your site meets the industry benchmark and what do if it isn't? Here's how
How can I check my page speed?
There are various tools you can use get insights about your website quality and speed. But I trust you won’t need any more than these three:
Google PageSpeed insights
It gives you a whole lot of things you can optimise on your website. We will cover the one that counts the most.
Login to your Google analytics and click on behaviour and then page speed, GA will provide you with page speed insights for each page on your site. You can then check which pages are taking their sweet time to load and then prioritise the gross offenders first. You can also check our speed suggestions under the same section for added insightsGoogle Chrome developer tools
Google chrome provides a fantastic tool to monitor and analyse the speed and resource request lifecycle. Hint: Look under Network and Timeline tabs Most important problems that these monitoring tools will point out are:
- Asset minification
- HTML minification
- Image Optimisation
- Slow image downloads
- Asset Minification
One of the most practical and easy to implement solution is to minify all the assets (CSS and JS) to decrease the size of data the browser needs to download. One of the efficient ways to automate this process is by writing a gulp task which would look something like this:
Learn more about setting up gulp tasks here: http://gulpjs.com/
While there are many ways to minify the HTML, from using online apps to writing your own. It depends upon the platform the application is built upon. If you can use Node platform then one of the recommended packages by Google itself is
Another way I would recommend will be to write your own
Something like this in PHP:
Optimising images is the most important part for frontend optimisation as the web is made of more than 64% of images, according to this interesting report.
Images play an important role in loading a web page, if the images are not optimised they can degrade the entire website performance. Google page speed tool’s recommendations can found here. The main idea is to keep images as compressed as possible.
For more on how to compress images check out our article 4 FREE Tools to compress your images
Lazy load images
Lazy loading of images can provide a great user experience and speed. This makes the above-the-fold content download much faster practically. One of the recommended libraries can be found here.
Loading multiple image files (like icons) in multiple requests is highly discouraged for best practices. The best way is to club them together and download them all in a single request. And access them through the CSS background-position property. This process can be easily automated via grunt, gulp or node. In nutshell, the sprite sheet (concatenated images) are created by an image processing program (most popular ones are compass and ImageMagick). Spritesmith is one of the popular packages available to automate the sprite generation process with
Using CDN for serving assets
A CDN is essentially a network of geographically dispersed servers. Each CDN node (also called Edge Servers) caches the static content of a site like the images, CSS/JS files and other structural components. A CDN provides great speed and stability when it comes to serving images over the network. The primary end-user benefit CDN provides is high speed. How it does it is by providing the following benefits:
- High-speed servers
- Low network latency
- Multiple edge servers
Using a subdomain to host media assets
If you're not keen on spending the budget on cloud hosting you can host your media and other assets on a subdomain to help speed things up. Just remember to treat this as a separate site and use your robots.txt and sitemap best practices accordingly.
No speed restrictions
So now that you know how to train your site, we hope you take this advice and turn your website into the next Usain Bolt. If you are having problems with a slow site? What kinds of issues have you been having? Let us know in the comments section below
If you want to know more about improving your page load speed don’t be shy we’re happy to assist. Simply contact us here