Nobody enjoys waiting when a website takes too long to load. In fact, you will lose tons of visitors if your website doesn’t load quickly. Don’t believe us? Check out these stats:

• Even if your website loads in a second, you’re likely to lose 7% of all your visitors.
• If it doesn’t load for three seconds, you’ll lose 11% of visitors.
• If it takes five seconds to load, you’ll lose 38% of all your visitors.

And trust us when we say that this percentage of people bouncing away from your webpage just keeps increasing as your loading time gets longer. More importantly, it also affects how Google ranks you on the search pages.

Google’s algorithm, “The Page Experience Update”, rolled out in 2021, announced priority to the webpages offering better performance. And, if it wasn’t already clear, quick loading times are a critical measure of performance and user experience. 

While page speed has been an important metric since 2010, the 2021 algorithm update introduced three metrics that determine the performance of a website based on its speed and overall experience. These metrics are known as Core Web Vitals, and that’s on our list to discuss in this article to help you understand:

• Why should you care about page speed?
• What slows your website?
• How can it be fixed?

Yes, it’s gonna be a little long but a very interesting and knowledgeable ride. So hang tight, keep reading, and stay with us till the end!

Tip : you can use our on page navigation, to jump to topics that can interest you based on your current knowledge about this entire topic, but we strongly recommend that you read each and everything so you understand this well. Alright, lets dive in.

Why is page speed so important?

Google loves high-speed websites and so do users. The way it performs can be the deciding factor between a consumer staying and leaving and if it will make it on the search engine result pages (SERPs). Here are a few other things that website performance optimisation will impact and make essential for every website owner.

User experience 

The user experience (UX) is paramount when making design decisions, and speed is a key determinant of this. 

User experience (UX) will impact nearly each and every facet of your website. It affects how people see your brand, where you rank in search results, as well as how many people ultimately decide to become your customer. 

Visitors will leave your website quickly if they encounter clumsiness and slowness in how the pages load. However, a well-functioning website can make a positive impression, too and encourage repeat visits.

Improving your website’s performance is essential if you want to give your visitors a satisfying experience. 

The reputation of your brand

The impression that potential customers form of your company depends in large part on how they engage with your website. A well-performing website performance guarantees a good first impression before any other encounter with a potential customer.

On the other side, website visitors will form an unfavourable opinion of your business if they are forced to wait for pages to load or experience other performance issues. Why? Because your company often comes off as unprofessional and inexperienced in the industry.

Visitor retention

The primary goal of any website’s layout should be immediate engagement and interest site visitors. Visitors who experience long wait times sometimes become frustrated and leave, resulting in a high bounce rate.

The percentage of site visitors that immediately abandon the website without interacting is known as the bounce rate.

Everyone loves a sleek and stylish website. Yet, it is not likely to provide the desired outcomes if it loads slowly and has a high bounce rate.

SEO

Since 2010, the loading speed of your website has been a part of the ranking algorithm of Google, and since 2018, mobile pages are ranked by the same metric too. Why? Because Google ranks based on user experience (UX), and as we mentioned:

Slow website = Poor UX

The bounce rate is just an additional attestment of poor experience of the users. A high bounce rate will be interpreted by Google as an indication of bad content and poor UX. Therefore, page speed optimisation is one of the important practices of SEO, without which site visits, potential customers, and revenue may all be impacted.

Conversion and sales

Website speed directly impacts conversion rates and ultimately profitability. Visitors who enjoy their time on your site are more likely to make a purchase. Over 70% of customers say page load time affects their decision to purchase from an online marketplace.

Therefore, website performance optimisation will show a direct impact on your bottom line and ability to attract new customers. Boosts in efficiency, however little, may sometimes be decisive.

By now, you should be convinced to optimise the speed and performance of your website. So, let’s now jump on to understand what can slow down your web pages and cause a lag in their performance.

Alright, so now that you have understood why its IMP, lets give you a detailed context on

• How to identify issues related to site speed?
• What are the common issues you may come across 
• How to fix them

Don’t worry, we will try to make it as simple as possible to follow and be technical enough to cover the depth as well.

Tools to help you find issues with your page speed

It says, You can’t fix things, if you can not measure. So we will start with identifying the issues your site might have. 

It would be nice if a single solution would work for all, but thats not how it is. So lets see how we can define your site problems and possible solutions for the same.

There are several tools in the market that you can avail of for free and at a fee to help you test speed. Google puts a lot of emphasis on Core Web Vitals in determining a page’s quality of UX. Thus, it is dedicated to bringing these metrics to the forefront of all of its most widely used tools.

Since our team has dedicated a lot of time and energy to core web vitals optimisation, we have some favourite tools and we’d like to let you know about them:

Google lighthouse

Lighthouse is a great lab tool to enhance the performance of any website, be it public or private. Developers may script user flows in Lighthouse to evaluate the site’s performance after it has loaded completely. Features include checks for:

• Speed
• Accessibility
• Progressive Web Apps (PWAs)
• search engine optimisation (SEO)
• and more.

Lighthouse performs testing in a mobile or desktop environment with simulated throttling. This page of Lighthouse literature will teach you all about the inner workings of simulated throttling and how it compares to real-world throttles.

Google search console

Search Console tracks metrics like Core Web Vitals and search engine traffic for any website. Search Console’s ability to analyse clusters of similar sites is useful, such as pages with the same or similar template. It provides reports and solutions for the following:

• Verify that Google can index your site. 
• Resolve indexing issues and ask for a reindexing of revised materials. 
• See the search volume for your site, the queries that lead users to your site, the percentage of users that clicked through to your site, and more. 
• Be notified if Google has trouble with your site’s indexing, spam detection, or anything else. 
• Lets you know which other sites have linked to yours. 
• Find and fix bugs in Search’s AMP and mobile optimisation features.

Learn more about who should use Google Search Console and how to get started with it using its About page.

GTmetrix

GTmetrix is another tool that analyses the speed of your website. It will generate a detailed report and offer actionable solutions by checking its:

• Load time
• Page Size 
• Number of requests
• Which resources are render blocking 
• Which resources takes a lot of time 
• How many css / js request are done etc.

The basic free plan offers page performance checks in seven locations around the world. You can get access to 15 test locations once you sign up with the paid version GTmetrix Pro.

Factors which can slow down your site speed

We mentioned core web vitals earlier, and since you’re still with us, it’s time you understand them in a bit more detail to understand what can affect the speed of your website. First, let’s answer the question of what core web vitals are:

Google’s Web Vitals is an effort to standardise measures for assistance on quality signals vital to providing a satisfying online encounter for users. A subcategory of web vitals, called core web vitals, can reveal slowdowns in loading, performance problems, and limitations in the user’s potential to engage with content. 

Each Core Web Vitals reflects three different but equally important, user-centric outcomes and quantifies them. The latest lineup of 2020 indicators and their corresponding criteria concentrate on three key components of the UX: loading time, interaction, and visual stability.

The picture above shows a scale for each core web vital within which your website must hit a certain score for optimum speed and performance of the website. Most difficulties pointed out by the core web vitals’ score stem from faults with codes, hosting, unoptimised images, plugins, etc. These, among many, are some common factors that could be slowing down your website. 

Let’s discuss some crucial slowing factors in detail and see how you can solve them for core web vitals optimisation.

Problem: coding issues

Experts developers know the downside of sloppy coding that is not optimised to give you speed. Some of the coding issues can include:

• Utilising unnecessary codes
• Extra coding for functionality that doesn’t add value to the website
• Inefficiently structured codes causing invalid HTML markup and errors in JavaScript

Solution:

To keep your coding issues at bay, make sure you’re tracking the addition of any extra code, be it tools for analytics or pixel tracking. 

With our extensive experience as WordPress speed optimisation service providers, here’s what we suggest:

• Remove functionalities that aren’t adding enough value to your website pages
• Check your site health on a regular basis using tools like Google Serach Console / Ahrefs.com 
• Make sure that you employ a wp speed optimisation service by using a good CMS for website building like WP and also use lighter in size themes / plugins which matches the best practices for coding

Problem: inadequate hosting platform

What is website hosting? 

In simple terms, Its a place where your site will find its home and all your website code lives. 

There are many hosting providers in the market and offer too many options for hosting solution, how to pick the right one that is out of scope for this article but you will need a sufficient powerful server that can manage your user visits and serve them content with nearly ZERO Downtime and quick response. 

There are also some other IMP factors like

• HTTP2 protocol support
• SSL
• caching 
• Regular backups 

needs to be provided by your hosting provider so you can have a piece of mind when it comes to your website availability.

Solution

There are some good service providers that support good CMS solutions like 

• WpEngine 
• Hostinger 

Pick the one that suits your budget and requirements.

Need help choosing the right hosting provider? Book a free 30 mins consultation call with us.

Problem: large image sizes

Large images and visual elements can significantly slow down a page’s load speed. Core Web Vitals can be badly affected by the use of several high-resolution graphics.

Solution:

We think it’s necessary to figure out what your priority is: more impact or more performance. Some pages, like landing pages, need to be highly optimised for speed to load quickly and get users to click on CTAs.

As a thumb rule, it’s important to not overuse images on your website. You should also consider the following as a word of advice from us:

• Manually resize the images before uploading
• Compress or reduce file size to the smallest without compromising quality
• Choose the right image format (JPG, WebP, PNG, SVG)
  • We prefer WebP file format due to its high quality with smaller image size – they’re 26% smaller than PNGs and 30% more than JPG

Tip : you can use free online services like TinyJpg to compress your assets before using.

Problem: too many HTTP requests

Web browsers make an HTTP request to the server when any website loads. The server will then respond back with the requested data. A separate HTTP request is sent for each resource, be it for an image, script, or stylesheet. When there are too many requests made to the server, the site loading speed and performance suffer. 

Solution:

Your site’s performance will improve if you can minimise the number of resource requests it makes. If you want lightning-fast load times, make sure your web host supports HTTP2.

Problem: unoptimised browser caching

Website information, such as HTML files and graphics, is stored on a visitor’s device in a browser’s cache. When a user revisits the website, the browser retrieves previously downloaded files from local storage rather than the web server. If your website doesn’t have an effective caching policy, it could be taking longer to load than it should. 

Solution:

A caching policy can be a great addition to the page speed optimisation process. It will dramatically reduce the loading speed, prompt the page visits subsequently, and all by using much less bandwidth. When setting a caching policy, we want you to keep the following things in mind about caching: 

• The technique is great for loading static content on the web, which is good for a full year before it has to be refreshed. 
• The other more often updated content on your site shouldn’t be kept for more than a week. 
• Make sure the “Cache-Control” and “Expires” headers have been properly set. By doing so, you may verify whether your website’s caching policy is effective.

Problem: lack of CDN

The time it takes for your website’s data to transmit and load depends on the proximity between the user’s device generating HTTP queries and the servers. One possible cause for the delay from this is the absence of a content delivery network (CDN) when the distance between the two is considerable. 

Solution:

A content delivery network (CDN) is a network of servers located in several locations that store static assets of your website. By distributing your static assets over many areas, you can make the files more accessible to your users. 

Your content delivery network (CDN) will automatically route a user’s request for a file download to the data centre that is geographically nearest to them. If your website isn’t already geographically distributed and load-balanced, this can be a great way to improve speed.

Problem: no mobile optimisation

More and more individuals rely on their mobile phones to access the internet. Mobile users account for 58.43% of all internet traffic, as accounted for last in March 2023.

It’s easy for inexperienced developers to overlook that mobile devices are preferred by such a large percentage of consumers, and instead focus only on desktop screens. 

Solution:

Let us tell you a secret: Google Analytics is a great tool for finding out what kinds of devices your site visitors are using. If you find out your users are mostly using smartphones, then take the smart approach of mobile-first. 

With years of experience in WordPress SEO, we know that it’s simpler to implement responsive web development practices from the outset of a project. This guarantees an efficient strategy from the get-go, rather than adding expensive features later on to accommodate new devices.

Problem: too many plugins

Most of the time, developers use code-based frameworks and CMS platforms like WordPress, offering several types of plugins. These plugins may be tempting as they come off as an easy way to add advanced features to the website; however, they may be the reason why your website’s performance may be lagging.

Solution:

Plugins can add a plethora of additional lines of code to your site and may be unnecessary as:

• We may not add all the features a plugin has to offer, also each and every page doesn’t use that plugin
• some of which may not be optimised for speed.
• Sometimes people just become lazy and even keep the plugin which they have stopped using. Please avoid doing that. This happens a lot, regular checks is highly recommended. 

We encourage you to use these plugins with caution because of their negative impact on site speed and performance.

Problem: non-minify css / js files

To make their own CSS, HTML, and JavaScript (JS) file more legible, developers commonly add notes, markups, space, and distinctly named elements. This is great when you’re creating your site because it can also help future developers, but it will cause problems such as:

• Contribute to unnecessary increases in network traffic
• Decrease the speed of loading a page

Solution:

The process of minification can help with this, where the developer can remove extra markup and code. Delivering CSS/JS with efficient caching strategies, while maintaining the same level of functionality, guarantees that the browser only seeks the resources when needed, cutting down on the amount of unnecessary HTTP requests.

At this point, you know all the major development issues and practices that add to your website’s loading time and decrease its performance. You might have also noticed how the solutions to each problem are quite technical. This is where you can reap the benefits of using page speed optimising service, seeking expert developers who take care of your website performance optimisation from ground zero.

Experts at Anglara have incurred solid expertise in providing WordPress speed optimisation services to businesses around the globe. Over the years, we’ve polished the list of tools to optimise the speed and performance of websites we create for you. Keep reading to know which tools we use!

Still with us? Great, we’re just getting to the part where you learn about how you fix your page speed. Continue reading till the end!

The best approach to fix your page speed

All developers have their own approach to website performance optimisation, but the approach we use has proven to give us the best results over the years. Here’s our step-by-step site speed optimisation process:

1. Check page issues

First things first, we figure out what is keeping your website from hitting the optimal performance percentage using PageSpeed Insights (PSI) or Search Console’s Core Web Vitals report. This will give you field data or real-world data usage with insights on core web vitals metrics (LCP, FID, CLS).

2. Start with fixing core web vitals

The reports will reveal what issues keep you from a good core web vitals score. We go through the report thoroughly and take every recommendation into consideration for core web vitals optimisation. We aim for 90+ on the scale.

3. Fix image sizes + image formats

We already discussed how unoptimised images can cause unnecessary lagging. So after we’ve fixed issues with core web vitals, we often optimise the images. For that, we resize them manually, use the best-compressed file format (WebP), add appropriate alt text, and upload. 

Lets take an example. if we are showing an image in 50px X 50px space, there is no need to use 500px * 500px as dimensions. We could slash the image size by 90%. Trust us, google loves this. 

4. Enable lazy loading

When it comes to third-party content, such as images and videos, we enable the practice of loading and initialising resources and objects asynchronously in order to boost performance and reduce resource consumption. This is called lazy loading. Let’s use an example to understand better. 

If there is a picture on a page of your website that the viewer must scroll to the bottom to see, you can put a placeholder, and the complete image loaded only after the user reaches that point in the page. Doing this provides the following benefits to the websites:

• Increases the speed by reducing the initial time to load the website
• Conserves bandwidth as content is delivered only if and when requested
• Spends resources of users and server mindfully as it’s just necessary to render or execute a subset of the pictures, JavaScript, and other code.

5. Remove unwanted css / js

When you are using any CMS, we don’t realise that there are so many css and js files loading for the page. 

Some of them are not even needed for that particular page but since its coming from a third party plugin / embedded code, it still loads on the page. We don’t want that. Its like serving user some extra dishes without ordering. 

Yes, it is a little advanced technique where you might need a professional’s help but totally worth it.

6. Remove unused CSS / js

When you run your website through Lighthouse, you will often see a recommendation to remove unused Javascript (JS). After we’ve unminified the files, the coverage function in Lighthouse pinpoints unused chunks of code in the source files. We will remove that to enhance the speed of the website.

7. Async / Defer render blocking jS

What is async in speed optimisation?

• async is a boolean attribute that can be applied to a script tag in HTML.
• It allows the script to be downloaded in the background while the HTML document is still being parsed.
• Once the script is downloaded, it executes immediately, pausing the HTML parsing.

       Use Cases:

• Use async when the script is independent of other scripts or HTML content.
• Ideal for scripts that do not rely on DOM or other scripts, like analytics or advertising scripts.

      How to use apply it? 

Defer:

     Definition:

• Defer is a boolean attribute that can be applied to a script tag in HTML.
• It allows the script to be downloaded in the background while the HTML document is still being parsed.
• Unlike async, the script is executed only after the HTML document has been completely parsed.

     Use Cases:

• Use defer when the script depends on the DOM being fully constructed.

• Ideal for scripts that manipulate the DOM or depend on other scripts.

    Example:

8. When to use async and when to use defer

Async:

      Use async when:

• The script is independent and does not rely on any other scripts or DOM elements.

• You want the script to run as soon as it’s available to avoid delays.

• Typical use cases include third-party libraries like Google Analytics, ads, or other services that do not need to wait for the full page load.

Defer:

      Use defer when:

• The script relies on the DOM being fully loaded before execution.

• You need to maintain the order of script execution as they appear in the HTML.

• Typical use cases include libraries like jQuery or custom scripts that manipulate the DOM

What is the difference between async and defer?

Additional Tips:

• Both async and defer are ignored for inline scripts.
• For maximum performance, place your <script> tags at the end of the <body> if not using async or defer.

9. Fonts preload

Preloading allows you to specify which fonts a browser should request before continuing to load the remainder of your website. 

It helps

• To reduce the render-blocking behaviour of fonts.
• To improve the overall performance and perceived load time of the web page.

How to apply font preload for fonts?

While there are plugins available to assist with preloading particular types of fonts (such as Google Fonts), we do it by adding a code to the topmost <head> portion of your WordPress site to accomplish the same goal.

10. Use CDN

For the next step, we add content delivery networks (CDN) to the website, so users can load your website quickly even when their geographical region is further away from your servers. 

If your origin servers ever go down, a CDN may operate as a bridge for you and your users, providing features like load balancing, automatic HTTPS,  firewalls, and redundancy. 

You can check with your hosting platform to see if they provide CDN services in-built. CMS like WordPress even offers plugins, such as Jetpack, to enable CDN automatically. 

Originally, directing people to a CDN included updating your website’s resource URLs to link to the CDN’s own URLs. Most up-to-date CDNs prevent this by taking care of your DNS records on your behalf, allowing you to reroute visitors without making any modifications to your site. But expert site speed optimisation services can enable CDN services even in self hosted websites manually by:

• configuring DNS records 
• enabling cloud CDN
• checking that the server sends the right HTTP headers in response to requests
• and distributing uploaded it via CDN

Services like Cloudflare can be useful here as their worldwide network can optimise your content and send it to the consumer as quickly as possible, regardless of where they are located. It can also provide you the following:

• Spam attack protection
• DDoS attack protection
• Bot management
• WAF

11. Good responsive server

Lastly, we ensure that we choose the right, responsive server hosts for your website. There are five different types of web hosting to choose from:

What is shared hosting?

Shared hosting is a type of web hosting where multiple websites share the same physical server and its resources  (CPU, RAM, storage).

Pros	Cons
Cost-effective: Affordable for small websites and beginners.	Slower performance: Shared resources can lead to slower load times.
Easy to manage: Generally comes with a user-friendly control panel.	Limited control: Less control over server settings and configurations.
N/A	Vulnerability: Potential security risks from other sites on the same server.

When to use shared hosting?

Ideal for small blogs, personal websites, and small businesses with low traffic.

12. VPS hosting

What is VPS hosting?

VPS (Virtual Private Server) hosting provides a virtualized server environment with dedicated resources allocated to each user, offering more control and performance than shared hosting.

Pros	Cons
Better performance: Dedicated resources improve load times and reliability.	More expensive: Higher cost compared to shared hosting.
More control: Greater control over server configurations and software.	Technical knowledge needed: Requires more technical expertise to manage.
Scalable: Easier to scale resources as your website grows.	N/A

When to use VPS hosting?

Suitable for medium-sized businesses, ecommerce sites, and websites with moderate to high traffic needing better performance and control.

13. Cloud hosting

What is cloud hosting?

Cloud hosting uses a network of virtual servers in the cloud to host websites, providing high scalability, flexibility, and reliability.

When to use cloud hosting?

Best for websites with fluctuating traffic, large businesses, and applications requiring high availability and scalability.

14. Dedicated hosting

What is dedicated hosting?

Dedicated hosting provides an entire physical server dedicated to a single website, offering maximum performance, control, and security.

Pros	Cons
Optimal performance: No resource sharing, ensuring fast load times.	High cost: Most expensive type of hosting.
Full control: Complete control over server configurations and settings.	Technical expertise required: Requires advanced technical knowledge to manage.
High security: Enhanced security measures and isolation from other websites.	N/A

When to use dedicated hosting ?

Ideal for high-traffic websites, large ecommerce sites, and businesses needing maximum performance and security.

15. Managed hosting

What is managed hosting?

Managed hosting refers to a hosting solution where the provider handles server management tasks, such as maintenance, security, and updates, allowing users to focus on their websites.

Pros	Cons
Convenience: Hosting provider handles technical management and maintenance.	Higher cost: More expensive than unmanaged hosting options.
Optimized performance: Providers often optimize the server for best performance.	Less control: Limited ability to make custom server configurations.
Enhanced security: Regular updates and monitoring by experts.	N/A

When to use managed hosting?

Suitable for businesses that prefer to outsource technical management, busy professionals, and those without technical expertise to manage their own servers.

16. Questions to ask before choosing the right server for your site

Choosing the right server for responsiveness will require you to ask certain questions to figure out your website management needs, such as:

• What is the major kind of content on your website?
• What kind of features and functionality will your website need?
• What level of security do you need (are you processing online payments)?
• Do you need continuous support or do you have a professional handing it for you?
• How much can you afford to pay for hosting? Be sure to check the cost of renewals or any hidden fees.

Most of the time, website builders will include web hosting services in the package. Some web servers provide resources and infrastructure tailored to certain functionalities or website kinds. It’s possible that a web host that suits someone else may not be the best match for you, so be careful to select one that does. 

When your website goes online, you don’t want to spend most of your time managing its performance. As you might have noticed, the site speed optimisation process includes several technical nitty gritties. 

In order for you to focus on your core business and content creation, this job is better left to experts, which brings us to answer your next question: how much will you have to pay for these services? 

How much does page speed optimisation service cost?

Companies often engage in website performance optimisation since studies have shown that a one-second improvement in load time may raise the conversion rate by around 7%. Site speed optimisation costs can be affected by several variables, including: 

• Site layout and size 
• The present page speed of your website 
• The time it will take to achieve the desired goals 
• The calibre of the company you hire 

The results of your service differ in accordance with the costs associated with page speed optimisation. That’s why your agency needs to cater to the specific requirements of any website or web page; we provide just that for our happy customers. We’d be more than happy to discuss your requirements and give you an estimated quote for our services. Simply fill up this form and set up a 30-minute free consultation with one of our experts. 

How can anglara help?

Experts at Anglara have over 5 years of proven track record in providing website performance optimisation services to businesses all over the world. Our experts boast bringing the page speed optimisation score to 98%. Want that for your website too? Simply reach out to us over our website (Anglara Digital Solutions) and we’ll discuss how our fool-proof approach to boosting your website’s speed and performance can benefit your business.