10 Website Optimization & Performance Tips [for 2022] (2024)

‍

In three decades, we’ve had over 1.7 billion websites. But today, less than 200 million of these websites are still active.

One reason for this is the fierce competition.

For one, your website is among millions competing for the attention of 4 billion internet users. And that’s a tough battle considering the average web visitor has an attention span of 8 seconds.

Because of this, If your website takes forever to load, it makes your business look bad. And this statement is true in a world where website speed impacts nearly 70% of consumers’ willingness to purchase from a business.

As such, your website has to gain the user’s attention in the shortest time possible —-there are no second chances.

Cynthia Ozick puts it like this —-

“Two things remain irretrievable; time and first impression.”

And your best shot at impressing your users before losing their attention is to optimize your website’s speed.

If your website is slow, and you’re noticing high bounce rates and declining conversion rates, this guide is for you.

Why Does Page Speed Matter?

Consumers don’t like to wait. Anything longer than 3 seconds’ wait, and the probability of bounce rate increases by 32%.

When visitors keep leaving your website, you get lower rankings on organic search, low conversion rates, poor user experience, and overall, a bad reputation.

Google’s Analytics Advocate, Krista Seiden, confirms this:

“Page speed is one of the most overlooked and yet most important factors in customer attention, retention, and ultimately, converting browsers to buyers. Ensuring that you’re taking measures to increase page speed or reduce lag can be the difference between failure and success.”

Overall, page speed is focused on improving the user experience when they land on your website. And the best way of making this possible is to optimize your website.

How To Tell Where Your Website Needs Improvement

Improving your website is half the battle. Knowing what to improve on is winning the war.

Here’s what you need to do:

1. Run your site through a performance evaluation tool

There are several available performance evaluation tools through which you can run your website, but here are the three we recommend:

• Google PageSpeed Insights is a free web performance tool created by Google to analyze your website using Core Web Vitals benchmarks. This benchmark grades your website on a scale of 1-100 on desktop and mobile. The faster your website, the higher your score.

• GTMetrix is a web performance analytics tool created by GT.net. The tool tests your website using a server in any location and scores your performance in percentages 1-100% and grades A-F.

• Pingdom is also a free web performance tool that offers real user and synthetic monitoring of your website using 70 global polling locations. Pingdom also grades your website on a scale of 1-100 and A-F.

2. Review the recommendations

Once you run your website through any of these tools, you’ll get your results (score) and actionable recommendations for improving your performance. Some of these recommendations can range from easy fixes, such as optimizing your hero image, to complicated fixes, such as inlining your CSS. If any of the recommended fixes are beyond your scope, reach out to a professional.

For example, let’s test our website https://edgemesgh.com on Google PageSpeed Insights.

How to check your website performance using Google PageSpeed Insights

• First, you’ll have to check our page speed by visiting Google PageSpeed Insights and inputting your website URL.
• Then click on “Analyze.”

• Once the screen loads, you’ll get your page speed for both desktop and mobile.

On Desktop, our page speed reads 99/100.

On Mobile, our page speed score is 82/100

Depending on your score, you’ll want to optimize your website for the best performance. In our case, our website’s desktop version needs no fixes with a 99/100 score. However, on the mobile version, there are recommendations to review.

• To do this, scroll down to find two sections: Opportunities and Diagnostics.

‍

With these recommendations, we now know where the problem is and how to solve it. If you’ve done this step, optimizing your website speed is next. Here are ten tips that can help you.

10 Website Optimization Tips To Help Speed Up Your Site

1. Optimize Your Image Sizes

Quality images are aesthetically pleasing but come at the cost of slowing down your website due to their size. However, removing them isn’t an option, especially if you run an e-commerce store where high-quality images help establish trust among online shoppers.

The best approach is to optimize the image sizes for responsiveness without losing quality and here’s how:

Reduce image size using compression tools

Tools like Compressor.io help you compress high-quality images up to 81% of their original size without losing quality. Simply upload your images, and the tool will compress your images in the best way possible. Other tools such as Kraken, Tiny PNG, and JPEG.io also offer up to 50% lossless image compression.

Upload your images in WebP format

WebP images offer a modern approach to optimizing images and making them more responsive than other methods. According to Google, WebP images offer superior lossless and lossy compression for images on the web, making websites run faster.

At the equivalent SSIM quality index, WebP lossless images are 26% smaller in size compared to PNGs. And WebP lossy images are 25-34% smaller than JPEGs. So for websites that use many high-quality images, switching to WebP would take some milliseconds off your load time and improve your website performance.

To convert your images to WebP, you can download the precompiled cwebp conversion tool provided by Google on your computer. Alternatively, you can use sites like Convertio and Ezgif to convert your images from PNG and JPG to WebP.

2. Minimize Your Time to First Byte (TTFB)

Time to First Byte (TTFB) is the time (in milliseconds) it takes the browser to receive the first byte of information from the server. This time includes all processes from DNS lookup, establishing a connection via TCP handshake—and SSL handshake if active via HTTPS.

‍

The crux of TTFB is to evaluate the time it takes your website to respond to a user's request. Ideally, Google recommends a TTFB under 200ms for a good user experience. If your TTFB falls between 300-500ms, you’re still doing well, and a few tweaks can get you to 200ms or close.

However, If your TTFB is hovering around 600ms, you need to check your server.

Some helpful tips to consider in improving your TTFB include:

• Switching to a faster hosting provider
• Updating your plugins and themes regularly
• Using CDNs to reduce latency between servers and users
• Improving your database queries
• Opting for a premium DNS provider
• Using client-side caching
• Keeping your PHP updated (WordPress)

2. Fix Multiple Redirects and Broken Links

Excess redirects lead to additional HTTP requests that block the main thread from responding to the user's request. As a result, the main thread cannot execute new requests until the impending task is completed.

A quick example: Let’s say a user visits your website and they have to go through four redirects:

mywebsite.com → www.mywebsite.com → m.mywebsite.com → mywebsite.com/home

Each of these redirects is an HTTP request to the server. And more redirects leads to more requests that eventually slow down your page.

The same goes for broken links, as the browser will find connecting the user with the requested page challenging. In most cases, this leads to a redirect loop, causing search engines not to index your website.

‍

You can fix this problem by identifying your website's redirects and broken links using Screaming Frog. Once you have a list of the links, you can limit the redirect to a maximum of 2 requests or remove the broken link altogether.

Related → Why Google Isn’t Indexing Your Pages—And How To Solve It

4. Reduce The Number of Plugins

Heroes have super powers; websites have plugins. These plugins offer several functionalities to the front and backend of your website. But like everything, there’s a limit.

Your website requires processing power from the server to run effectively. The more plugins you install, the more processing power needed. When your server can no longer handle your plugins competing for the same processing power, it starts slowing down your website. You’ll feel its effect on server response time, page load time, and overall user experience. A good rule is only to install plugins critical to running your website.

5. Use Content Delivery Networks (CDN)

The distance between your server and the user’s location is often one of the reasons for poor website performance. Luckily, content delivery networks offer services that allow you to deliver your website faster to users worldwide.

Content Delivery Networks (CDN) comprise a geographically distributed network of servers that work together to provide faster delivery of internet content. With CDN, the system caches a copy of your website on several servers worldwide.

Whenever a user requests your website, the CDN simply serves them a copy from their nearest server. This process eliminates latency as it doesn’t require sending a request to the origin server.

Pro tip → We recommend Cloudflare CDN to get started, and it’s even better when you combine it with Edgemesh’s smart client for an all-in-one solution.

6. Choose The Right Hosting Plan and Provider

Your hosting plan and provider lay the foundation for determining your website's performance. Ideally, when starting out, you’ll choose the most affordable or free hosting option for your website. While that’s good, there’s a limit to its performance. But before choosing a hosting plan, you need to consider the hosting provider and the features they provide—and most importantly, their guaranteed uptime. Unfortunately, many hosting providers advertise a 99% uptime as “optimum performance,” but that’s a disaster waiting to happen.

Here’s why:

7 days a week equals 10,080 minutes. With a 1% downtime, you’re looking at potentially 108 minutes of your website going dead per week. That’s roughly 2 hours weekly and 8 hours monthly.

Are you willing to take that risk? Here’s another piece of data to give you an idea of how uptime is critical to the performance of your website.

We recommend hosting providers that guarantee at least 99.5% uptime to avoid losing sales, customers and, overall, ruining the user experience.

The next part is choosing the right hosting plan. Most hosting providers split their plans into three distinctive tiers:

• Shared hosting
• Virtual private server hosting
• Dedicated hosting

Shared hosting

This is the most common hosting package to get your site online. It works by allowing you to share resources from a single server alongside others (there could be hundreds or even thousands of websites).

The upside to this hosting is its low cost, as it requires little maintenance or technical knowledge. However, the downside outweighs all other factors, as it exposes your website to cyber-attacks and security issues. Also, sharing resources with several websites downgrades your website performance.

Dedicated hosting

This is the most expensive hosting plan, as it involves dedicating an entire server's resources to a single website/user. Choosing this plan, however, gives you autonomy over the server, its performance, and security. Think of dedicated hosting as owning a home instead of renting one.

Due to their flexible and customizable features, dedicated hosting is a better option for your business if you receive high traffic to your website. However, the cost and maintenance of dedicated hosting are not for everybody—especially if you run a small or medium-large website. Ideally, dedicated hosting is best suited for enterprise businesses like large online retailers receiving at least 500k monthly visits.

Virtual private server (VPS) hosting

This is created in a virtual hosting environment and functions by using the resources from a server (or set of servers). If you set this up correctly, a VPS can function like a physical server on its own. With VPS hosting, you get the same control of the server as dedicated hosting, but at a lower price.

Related → 5 Ways To Speed Up Your Shopify Website In 2022

7. Minify HTML, Javascript, and CSS files

The fewer requests your website makes to your server, the faster your page loads. When you have excess HTML, JS, and CSS files on your website, your server has to process multiple requests and eventually blocks your DOM. And when this happens, users experience a longer server response time to their requests.

Minification is the best solution when you can’t delete the code because they add critical features to your website. For example, you can use a website like Minify to remove whitespace and comments and shorten codes on your scripts without disrupting their output.

Here’s a quick example of a normal CSS code:

body {

margin:20px;

padding:20px;

color:#333333;

background:#f7f7f7;

}

h1 {

font-size:32px;

color#222222;

margin-bottom:10px;

}

When you minify this code, you get this:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}

Both codes offer the same result, but one is straightforward and saves you unnecessary load time. Additionally, you can modify your CSS and JS codes for better performance.

CSS

• Concatenate your CSS into one file
• Mark CSS resources as non-render blocking using media queries
• Use proper attributes to call your CSS internally and externally

JavaScript

• Defer loading Javascript
• Inline your Javascript if it’s small
• Concatenate your Javascript
• Use asynchronous loading to avoid render-blocking.

8. Use Prefetching, Prerendering, and PreloadingTechniques

These techniques allow browsers to execute actions before a user initiates them. In most cases, the website sends hints or signals to the browser to pre-render, preload, or prefetch a response to a possible incoming request. This method requires understanding users’ behavioral patterns on your website. Below are some of the techniques:

DNS Prefetching

This technique resolves the website’s IP address before a user clicks on the link. As a result, it reduces the time spent on DNS resolution. As a result, this attempt will minimize latency and shave a few milliseconds off your page load time.

Here’s an example:

<link rel="dns-prefetch" href="//www.example.com">

Note: Add DNS prefetching to your website's <head> section.

Prerendering

This technique is best for actions you’re certain users will take on your website. In this case, you prerender the entire page alongside its assets and resources in the background. This reduces your page load time as users receive an instantaneous response to their request.

Here’s an example:

<link rel="prerender" href="http://example.com/nextpage.html">

Preloading

This technique uses the method of storing your website resources on the browser’s local cache. So, whenever a user makes a request, the page resources (scripts, stylesheets, images, etc.) are served from the local cache instead of the server. This approach is similar to how CDNs operate when they cache your website.

9. Cache Your Website (on the client side)

There’s no debate: Caching your website improves your load time. Whether you’re caching using CDN or pre-rendering your assets via manual techniques, the end goal is the same. Most caching methods are on the server side. By default, server-side caching is the way to serve content to users. It works by fetching content from the server upon the user’s request. The problem with this caching method? It’s time-consuming.

The solution? Client-side caching. Caching your website on the client side means saving a copy of your website on the user’s phone after their first visit. This way, upon subsequent visits, the browser can simply fetch the cached content from the user’s local storage and serve it upon request. This solution eliminates the hassle of going to the origin server to fetch content.

Related → 5 Reasons Client-Side Caching Is Best For Your E-Commerce Website.

10. Enable GZIP Compression

The larger your website, the longer it takes to load, so it’s best to get your page as small as possible. A general rule is to keep your page size under 5MB. This includes compressing everything from your website's images, scripts, videos, and other assets using GZIP.

With GZIP, you can reduce the size of HTTP requests before it gets to the server. This saves you bandwidth and reduces server response time by up to 70%.

Website Speed Optimization Common FAQs

What’s a good speed for a website?

If you run an e-commerce website, You should aim for a website speed of three seconds or two seconds. Every additional second delay directly affects your sales. A recent survey of 1,100 US-based consumers found that 90% of shoppers will abandon a site if it doesn't load in a reasonable time. Additionally, more than half (57%) of consumers admit they’ll leave slow ecommerce sites for similar retailer sites.

Imagine your website is taking longer than usual to load. You risk losing your e-commerce business as customers will keep exiting your website.

Pro tip → Edgemesh makes every part of your website as fast as possible—so you have time to do what actually needs done. Go head(ache)less with Edgemesh to give your customers a next-gen seamless web experience.

Which page speed factor matters the most?

The server response time is the most important, as website optimization focuses on reducing the latency between your server response and user request.

Is Page speed an SEO factor?

Yes. Page speed is an important factor in SEO. Google introduced page speed as a crucial search ranking factor in 2010 to improve user experience.

According to Google,

“Speeding up websites is important—not just to site owners, but to all Internet users. Faster sites create happy users and we've seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don't just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed—that's why we've decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.”

Additionally, since SEO is focused on user experience, poor page speed results in high bounce rates and low dwell time that sends a bad signal to search engines.

Related → 7 Google Ranking Factors You Really Need and How They Affect SEO In 2022

Deliver Content Faster With Edgemesh

Many factors influence page speed. While it makes sense to focus on improving each factor, Edgemesh makes it easy to identify and rectify page speed issues all from one platform. This way, you can get back to running your business knowing site speed optimization is being taken care of.

Fast Implementation

Edgemesh offers a fast, simple, and easy-to-install headless solution. In 5 minutes, you can get your website up and running without adding extra infrastructural overhead or introducing complicated frontend workflows.

‍

Bonus → On our lightning-fast edge network, you can measure your speed in milliseconds—not seconds.

Identify and Rectify Third-party Issues

Edgemesh offers solutions beyond being fast. We help secure your website from internal and third-party issues. From detecting scripts slowing down your website to stopping bought traffic from becoming bot traffic—Edgemesh protects you.

‍

Real-time Actionable Insights

Data from Google and other third-party tools don’t give you the whole picture—but we do. We built edgemesh on top of a robust database that can store unabridged data at the finest level of granularity possible. Our goal is to provide you with enough authentic data to help you make informed decisions about your business.

‍

‍

Bonus tip → Edgemesh does not sample, average, abridge, or concatenate our Real User Metrics.

Experts Ready To Help 24/7

Don’t like to get your hands on the technical part of your website optimization? Edgemesh offers 24/7 expert customer support to walk you through your setup and help you understand the full Edgemesh product offering. In addition, we’ll do a deep dive into your site metrics to identify opportunities to deliver an even faster user experience.

Bonus tip → 99% of Edgemesh customers self onboard via the Edgemesh portal. Installation generally takes about 5 minutes and involves adding a line of code to the header and a single JavaScript file to the root.

The ROI of fast websites is increased conversion rates. We know this because our clients see an average increase in conversion rate of up to 20% simply because we took this statement to heart.

Your conversion rates drop by 4-7% for every additional second your website delays. The choice is yours.

Ready to improve your website performance in 5 minutes? → Book a demo now!

‍