Learn how to make your website lightning fast
Most people that
build a website for their business are focused on making it as visually appealing as they can. From the UI to animation, content creation, and more; each element is customized to grab their attention and convey the right message with the intention of converting their interest into a positive action that will move them a step closer to doing business with you.
However, after the long-haul of getting the website complete and ready for the world to see; the visual finish is marred by a major problem.
The website takes forever to load.
This can be a major deterrent for people visiting your site.
According to global marketing Guru
Neil Patel, you will lose out on both sales and traffic if you have a slow-loading site. In fact, he even goes a step further by providing
research direct from Google, who claim that over 53% of mobile users will leave your site if it takes longer than three seconds to load.
Page speed is one of the most important factors determining whether people stay on your site or abandon it to head back to the search results page. Users today expect a seamless experience when visiting web pages, and they expect sites to load quickly and provide them with the information they need in a matter of seconds.
To prevent users bouncing off your website, it's important to make your website load as quickly as possible. However, we know that it’s not a walk in the park to get the green-light status for your site, and for this reason, we have collated the following steps to help you understand the best route to success.
Why should you care about page speed?
We’ve already talked about traffic, and that people expect a site that loads quickly. Aside from this, page speed is one of the most important metrics for your website’s SEO due to the importance it has with the
Google Search Ranking Engine.
Having a low page speed will negatively impact your SEO.
Google prioritizes web pages that load fast because it wants to improve the user experience. That's why it's crucial for any site to have a fast page speed; for better Google SEO and subsequent customer interaction.
According to a recent study by Backlinko, Page Load Speed was the most important factor in the top 10 Google results. This makes it mandatory for every modern-day company to optimize their page load speeds to match Google’s standards. If you ignore this, you will lose business and reduce the visibility of your website online. Nobody wants this, and thankfully, there are lots of quick and easy fixes that will help you boost your page speed and get it to green.
To help webmasters and website owners know what to do, Google has provided users with the Page speed tool to extensively check their web page for elements that contribute to page speed. A Green page load score is a huge factor for top result rankings. In fact, there are lots of tools you can use to help you understand and analyze your page speed score, but going direct to Google is often considered to be the best source of data.
Here’s a quick list of a few of the best page speed analyzers that you can use for free.
Before we explore the practical steps you can take to remedy a low page speed score, it's important to realize that throughout the general process, always focus on firstly using the metrics provided by Google as they're the clearest indication on the issues that might be problematic with your current web page. The other tools can be useful to help give you clarification on the points, and some present the data in a different way to Google. Ultimately, they should all be telling you the same thing.
There are a wide range of underlying causes that could be the trigger behind your website’s page speed. So, without further ado, let's look at some of the common culprits.
Identifying the biggest pain points
The first step of the improvement process is identifying what's thwarting your page speed. Having an understanding of the missing elements allows you to eventually work towards a proper strategy to course-correct and remedy the situation.
Thankfully,
Google’s Lighthouse open-source tool allows you to evaluate the issues present on your website; and it gives you a specific list of recommended actions. This information comes direct from Google, and is the most accurate representation of the missing pieces from your current page.
If you don’t like the look of this, or it is too technical, we’ve listed four other options for you earlier in this post, that present the data a little differently, but essentially cover the same points.
In most scenarios, the causes behind a slow page speed will be unique to your site. However, there's a range of general issues that are commonly present in most websites. Focusing on these issues can be a great way to get started with your page speed improvement; and whether or not you consider yourself to be technically minded or not, there’s actually a lot of these points which are easy to remedy.
Important aspects of page speed improvement
One of the main reasons behind page speed errors is a lack of image optimization. This very basic but essential task is a great way to exponentially increase your page load speed.
How to optimize images for a website
Images are the focal point of most websites. Your site would look pretty bland without them, and we all know just how important a visually appealing site can be. Unfortunately, combining a large number of images on a single page can seriously slow down your website.
Did you resize images for you site?
It’s a rookie error, and one which many people make. If you upload unedited images directly to a site, this could be single worst thing you can do for your page speed.
Unedited images can be HUGE in size, with a single image taking more space than 10 optimized ones. So, you need to find the perfect quality/size ratio. That is usually the lowest possible image size that retains the desired quality.
A number of different compression techniques can be used to resize the images to a lower size. This can make a major impact in improving the page speed of your website.
Next generation image format
Just resizing your image is definitely not enough. To get the right metrics on Google, it's important to convert your image into the latest generation formats recommended by Google.
The latest generation formats provide a much more efficient mechanism of image storage, allowing you to offer faster downloads and higher data savings. The best formats are the JPEG XR, JPEG 2000 and WebP instead of the conventionally used JPEG or PNG formats.
Making this change can be a major step towards boosting your page speed and getting the Greenlight from Google.
As with everything you need in life these days, there’s an ‘app’ for that. Or, in the case of a WP site, there’s a plugin. My personal favourite is
SMUSH PRO. There’s a free version and a premium version; but it takes care of all of your image optimization for you.
Image optimization is just one aspect of improvement. As websites are primarily based around visual effects displayed using code, there are several other important steps when it comes to page speed optimization.
Minimize CSS, HTML and JavaScript
JavaScript, CSS, and HTML are core facets of the visual interface of today’s websites. However, most developers can be extremely careless when it comes to the coding of these visual elements.
Removing unnecessary code is an important step towards a faster loading for your site. Thankfully, there's a wide range of tools available to help you with the improvement of unnecessary code segments. In the first instance, let’s look at JavaScript. If you defer the parsing of JavaScript files, this can boost your page speed and it is an easy win in terms of being able to see a measurable improvement once in place. By deferring the parsing, you can reduce blocking of page rendering, and reduce the total number of KiBs that will need to be parsed during that initial page load.
Getting the right plugins is the best way to optimize HTML, CSS and JavaScript on your website.
Render-blocking resources above the fold
According to the latest insights from Google, JavaScript and CSS can sometimes be interfered with by above-the-fold fonts.
What in the world does this mean?
Well, the "fold" is the area on your site that's displayed at the bottom of the user's screen. Above the fold is everything that appears on their screen when they first load your page. Below the fold is everything they need to scroll to get to. The term comes from newspaper days, when content actually appeared above and below a literal, physical fold in the paper.
Ideally, you want your content above the fold to load fastest. It's important to structure your coding in a way that enables the web browser to load content in an organized structure, giving priority to "above the fold" content.
Server response time improvement
In a number of cases, the reason for the slow speed is the time taken by the server to load the content. This can be a result of a number of different factors.
Some of the most common ones include:
Low-speed routing
Resource CPU starvation
Issues with database queries
These issues are primarily a result of the hosting platform you opt for. These are not consistent for everyone and all have their own remedies. However, to ensure that your page speed is not stemming from server issues, make sure you use a hosting service from a quality provider that has an excellent response time.
With so much choice and so many different offers to choose from, finding the best hosting provider can be quite time-consuming. They all typically offer a 99.9% guaranteed uptime, so with this in mind, how do you choose the right package for your website.
Consider customer support; do they offer 24/7 support, or is it during office hours only? Is it email support, phone, or live chat?
Are they located in your country?
Do they speak your language?
Where are their servers located?
How much do they charge?
Do you have to sign a contract?
Is it managed hosting (with support), or non-managed?
Minimize Redirects
Avoid landing page redirects at all costs. This can add more delays to the page loading and while any redirection occurs, there is nothing that is being shown to the client. If this happens in the real-world, and a person is kept waiting for anything longer than 3-5 seconds, they’ll usually hit the back button on the browser, and find another site who can serve them quicker.
Let’s say you have a number of different ‘versions’ of your domain. For instance, if your website is
www.cleverten.co.uk. You will likely also have these variants of the same domain:
Each of these will be redirecting to the core domain should they be accessed. However, in most cases, you can actually eliminate these redirections without changing the core function of the page.
What can you do?
If you need to have redirects, then you can carry out the redirection on the server-side instead of the client side. This reduces RTTs, which are round trip requests, and in reducing HTTP requests from one URL to the next, it also lessens the wait time for users too.
Asynchronous Loading for JavaScript
When you compare CSS and JavaScript, it’s a little more challenging to minify JS in the correct way. Prior to running your code though JSCompress, you can implement asynchronous code loading to start with instead. It’s also called ‘lazy loading’, and it dynamically loads various functions. If you have any longer pages on your site, then this is particularly advantageous.
It’s quick and easy to set-up, please see the below example of how you practically add this. Aside from, this method, there’s also plenty of plugins available that will do this for you.
Add the tag ‘async’ when calling the .js file.
For instance, <script src=”scriptgoeshere” async> </script>
For further information about the intricacies of how this works, take a look at these resources. If you are new to html altogether, then use
THIS link. If you’re more advanced, then use
THIS link.
Tip - you should always place JS at the bottom of a page in order to prevent users from seeing a blank page with the JavaScript is still loading.
Remove Unnecessary Plugins
This point is going to be short and sweet. It’s quick and easy to add plugins to your site. For WordPress users and devs, the plugin marketplace is an overwhelmingly large source of inspiration, giving people instant access to almost any imaginable functionality. However, too many active plugins on a site aren’t great for page speeds overall; and if you add low-quality plugins, this can have a hugely detrimental effect; often overnight.
The first thing to do is deactivate any unused plugins from your site. Next, you need to delete any plugins you will not need to use again. Please note, that any deactivated plugin will not be loaded by your site and should not impact the performance. However, getting rid of them will help you better manage* your site and prevent you from having to deal with avoidable issues.
If you have additional plugins, even when not being used they will slight notify you when a new update is available. Times this by 10-20 different plugins and you can see how easy it then becomes to stay on top of it all. Also, while they are relatively harmless, as executable files, there is a risk that should they become compromised, there is a risk of malware or virus.
Optimize CSS delivery
As with so many points on this list, this is another where there you can buy a plugin to help you if you’re not comfortable with the tasks on your own. Here are the highlights of the different ways you can optimise your CSS delivery.
Do not use any STYLE tags in the body HTML
If you have any inside the HTML body, they are classified as renger blocking. Instead, place in the header HTML tag.
If you’d like some help getting started,
here is a quick and easy way to check if you have any such code in the HTML of your site.
Do not use CSS “@import”
If you choose to use CSS @import, then it makes it virtually impossible to then import external CSS files in a CSS script. What actually happens is that the @import feature will then proceed to launch every external file that is being imported on an individual basis, and not in parallel with other vital files that also need to be served. It also makes repeated and unnecessary HTTP requests.
This handy
CSS delivery tool can help you quickly see whether or not your web pages use the CSS @import function.
Combining CSS
To help get your page speed insights score to green, you should combine as many CSS scripts as you can into one larger script. The more external files your web pages need to load, the slower the speed of your site. Because loading multiple CSS files will cause unnecessary extra requests and blocks the normal rendering of your site. If you call a CSS script using an external file, this too blocks rendering when has CSS rules that are utilized ‘above-the-fold’. By inlining these scripts, you can resolve the issue. Inlining CSS is a best-practice tactic, unless your CSS scripts are much larger in size.
Compressing your new CSS script
Finally, once all of your CSS script have been ‘inlined’ and they’re combined into a single, much larger script, then you need to compress this ins order to lower the amount of data any visitors need to download when they try to access the pages on your website. For each KB of data they need to download, your page is that bit more slow to load.
This
free CSS compressor is another quick and easy way to modernize the CSS scripts, while also minifying in tandem; without presenting any risks to the actual layout of the style of a webpage.
Use a Content Delivery Network – CDN
Using a content delivery network can help give website visitors across a globe a similar speed and standard of performance. For instance, if you host your website on servers in Australia, when a European or American user visits your site, their requests will take longer to serve than it would for those people visiting your site locally from Australia.
Simply put, a person’s proximity to your web server will impact the response time of your site. By deploying your content across a number of servers that are dispersed in different locations globally, your users will see pages load quicker.
Utilizing browser cache
Usually, the page loading process can take multiple requests between the browser and the server before we're able to see a completely loaded page.
When the page is loaded up from scratch, it can take a considerable amount of time in relative terms.
Caching is the process of allowing the browser to remember some elements that have been loaded in previous iterations. Some of the cached items include
Logo
Header
Navigation
This cached content is instrumental in cutting down the loading time of the web page due to the resource burden it takes off of the server every time. Google recommends prompt weekly browser caching to ensure efficient loading.
This can be a complete game-changer for your website’s Google Page Speed evaluation.
The importance of Google’s Page Speed Insights cannot be emphasized enough.
Following the aforementioned standards and keeping up to date with all the latest policy changes can be a great way to stay on top of your Google Searching Engine Ranking and grow customer engagement.
Find a talented website professional to help increase your page speed
If this all seems a bit too much to keep on top of, you could consider speaking to a
web developer, or an expert in
website testing and monitoring. They can help you identify the roadblocks that are keeping your site from loading quickly, and they'll know how to find and fix them, and what to do to avoid them from happening again.
Whether it’s a one-time project or ongoing website optimization tasks, we have some of the best freelance website developers who are ready and waiting to help you increase the speed of your website, so you can start looking forward to better conversions, and an all-round improvement in the usability and user-friendliness of your website.