How to speed up your website

Share This Post:

Share on facebook
Share on linkedin
Share on twitter
Share on email
How to speed up your website

The time it takes for your website has a direct impact on how Google ranking, with user experience and mobile friendly sites now given priority. Aside from how it influences SEO, a slow loading website will also affect conversion rates as visitors often become frustrated and click away to search for a competitor. From optimising your images and videos to assessing how your site is hosted, there are a number of things you can do to speed up your website.

Images and videos

Images and videos play a key role in the success of brand and product presentation, but in order to support your website loading speed they need to be optimised. They are often the number one reason why a website is slow and bogged down with weight.  Changing this should improve your natural page ranking on Google and also enhance the user’s experience. 

Large and cumbersome images and videos that have not been optimised to suit your website will slow down the page loading speed. User experience is now central to almost everything Google do when it comes to ranking a website, so it you do not meet the minimum requirements in this field you will suffer as a result. 

Similarly, customers landing on your site will also quickly become frustrated with the slow speed and are far more likely to click away and make an enquiry or purchase elsewhere. 

Look at things such as:

  • Reducing the size: Size matters when it comes to images and videos on your website. Images should be reduced so they are in ratio to the rest of the site design. Compression of both video and images can help maintain speed without lowering quality. 
  • Using the right file type: PNGs are generally considered to be of better quality, and will not degrade in quality if saved numerous times. JPGs also offer a good standard even after being compressed. For video, WebM is a lighter option than MP4, although MP4 files tend to work better on mobile devices. 
  • Keeping the name relevant: Google needs to understand what the image is, so instead of giving the video or image a generic title, or a bunch of random letters and numbers, call it what it is. For example, an image of an Apple laptop charger would be “apple-laptop-charger”. 

Excess CSS and JavaScript/JS

Once you have optimised your images and videos, it’s time to look at the next biggest cause of a slow website – JavaScript and excess CSS (Cascade Styling Sheets). Download time of the site is increased as a result, and once the script begins to run, further delays can occur rendering key elements on the page. 

The scripts on a page are there to manage things like ad loading, tag management, A/B testing and displaying inline video players (if present). If the script is put at the start of the page it will not show the page content until the scripts have been fully downloaded, slowing down the page quite considerably. 

JavaScript has become one of the most commonly used programming languages in the world and is relied upon to perform tasks that CSS and HTML cannot easily do. To maximise website performance it is advisable to build a site without using JavaScript in the main, and only implementing it where absolutely necessary. 

It also helps to minimise the size of JavaScript files using Closure Compiler or UglifyJS, as recommended by Google. 

3rd Party Links or “Requests by Domain”

Third party apps can prove extremely beneficial for your website, enabling video embeds, Google Maps, Instagram feeds and other useful applications, although if not managed correctly they could end up having a negative effect on your page loading speed. 

If you have too many of these services it creates a lot of weight for the page and the loading speed is slowed as each one is constructed and prepared for use. Thankfully, you can easily identify where the problems exist using a website speed test tool which will list all of the resources loaded on a particular page. When you hover over a resource it should display your domain name. For those that don’t, these will either be an external asset or service. 

These suggestions below can help you reduce the effect 3rd party links can have on a WordPress site:

Remove the third-part script

The easiest way to stop a third-party script slowing down your site is to remove it altogether. If it doesn’t add value to your site or its users, this is a move worth considering. If you are not sure of it’s worth, use an A/B testing tool to see what sort of impact removing it will have on usability or performance. 

Delay 3rd party loading 

Use HTML’s async or defer attributes to load any third-party scripts that are slowing down the load times of your website. Async tells the browser to carry on parsing the remainder of the HTML document until the script is fully downloaded. The parsing of the HTML document is paused while the script is then run. Defer works in a similar way, although the script is not run until the full HTFL document has been parsed. Unless essential for the critical rendering path of the page, ideally you should load all 3rd party scripts using one of these two methods. 

Host third-party JavaScript files on your server

Doing this should give you more control over how third party scripts are loaded on your site. DNS lookups are reduced, while HTTP caching headers are improved and features such as HTTP/2 server push can also be brought into play. It’s a recommended move for any third-party scripts crucial to ensuring your website continues to function. However, be aware that if the publisher changes the script, because you are self-hosting your version may stop working until you manually update it to the latest version.

Use lazy-loading for JavaScript

Lazy-loading defers loading of non-critical resources when the page is being built. Instead, they are loaded when they are needed for use. You could lazy-load ads and videos to reduce the load placed onto the page and improve the loading speed. For example, ads positioned at the footer of the page can be loaded only once the user scrolls down to that section. WordPress 5.5 made this a default feature upon release in late 2020.

Website Hosting 

Website hosting can also have a big impact on your page load speed. The basic rule is that the faster you can access the files on the web host’s server, the faster it will load on your device. The three basic tasks a server has to complete are:

  • Execute code: In order to render a single webpage the server may have to execute numerous lines of code, which can take some time to complete. 
  • Run database queries: CMS-based websites require the site code to run database queries in order to get the content from a database. Depending on the individual page, this could require more than 100 database queries in some instances.
  • Serve files: JavaScript, CSS, images and more have to be served in order to load the page. The more content and complex the page, the more requests that will have to be made.

When choosing a web hosting package there are a number of factors to take into consideration to ensure you receive a fast service. This includes:

  • Dedicated resources: Look for a hosting plan that offers dedicated resources. This will ensure other websites do not dominate key resources need for your own site. A VPS or dedicated server is the best option instead of a shared plan. 
  • More resources: The more available memory and processing power you have the faster the server can execute requests. This is another benefit of taking out a dedicated plan.
  • Local resources: It’s a good idea to have your database and other related resources on the same web server as this will make loading speeds faster. Hosting them elsewhere will likely slow down overall performance. 
  • Faster hard drive: SSD (solid state drive) hosting will ensure files are loaded faster than a standard hard drive, which will boost performance levels.

DOM Elements 

Developers using Google Lighthouse may come across a warning that says “Avoid an excessive DOM size”, which is flagged if the webpage at hand features too many HTML tags or DOM nodes, or if they have been embedded too deeply. Not only can this slow down the page loading times, but also make it difficult for the user to navigate the page. 

A Document Object Model (DOM) is a tree structure of elements within a page that is created by the browser every time it loads. It displays all the HTML elements from the hrefs to the H1/H2 tags and more, with the structure based on how the HTML has been set up on that particular page. It uses a tree structure because some elements (not all) may be dependent on each other and this is referred to as a DOM. If you want to modify the tree structure you can do so using JavaScript. 

When you receive an excessive DOM size message it means there are too many HTML tags (DOM nodes) which requires the browser use more power to load the page, subsequently slowing it down in the process. 

Key terms to look out for related to DOM are:

  • Nodes: Every tag in the DOM tree is referred to as a node.
  • Depth: How many elements located on a DOM tree branch.
  • Child element: The final node found on branch that doesn’t connect any further.

To fix an excessive DOM warning, use Lighthouse to identify the maximum DOM Depth and maximum Child Elements, and access your browser’s DOM inspector to see how much DOM is on the page. 

The most common causes for excessive DOM are page builders that generate too much HTML, poorly coded plugins and text copy-pasted into the WYSIWYG editor. Also check that JavaScript hasn’t created too many DOM nodes as this could also be the cause.

How to speed up your website

We’ve explained the main reasons why your website may not be loading as quickly as it could, but how do you identify the exact problem to speed things up? The best place to start is with a website audit, which will highlight areas where key improvements can be made to maximise performance. It’s something we’ve done for businesses working in a variety of industries, helping to boost user engagement and conversion rates. 

Get in touch to book your free website audit on 0203 637 1260 or email hello@johnlawley.co.uk to get things started. 

More on similar topics...