There is no denying website speed is one of the most important elements of user experience (UX).

A fast website creates a positive first impression. According to Google, it doesn’t take long (3 Sec) for users to run out of patience. And yes, Google uses site speed as a ranking factor. Faster websites rank higher on search engine results pages (SERPs), attracting more traffic.

Especially on mobile, speed matters the most as networks vary in capability. Efficient, fast websites use less data, which is a no-brainer for users on limited data plans.

Before we dive into the Tips, though, you need to know how to measure your site speed first. You can use a tool like Google LightHouse or GTMetrix.

If it doesn’t look something like this 👇, then keep reading …

1. Optimize All Your Images

This is usually the most obvious starting point and the first culprit (LCP) to tackle when it comes to website performance.

By the way, most of the tips here are catered towards WordPress for obvious reasons.

Your images are either way too large, or they are in PNG or another non-efficient format. Here are some issues to look out for regarding images on your site:

• Large image file sizes. One of the most common issues is using images with large file sizes, which can significantly slow down a website’s loading time. This can be caused by using high-resolution images, not compressing images, or using the wrong file format.
• Incorrect image dimensions. Using images with incorrect dimensions can also impact website performance. If an image is too large for its intended use, it can slow down the site, and if it’s too small, it can appear pixelated or stretched.
• Lack of image optimization. Many webmasters neglect to optimize their images, which can lead to slower loading times and a poor user experience. Optimization includes compressing images, resizing them, and using the correct file format.
• Missing or incorrect alt tags. Alt tags provide a text description of an image, which is important for accessibility and SEO. Missing or incorrect alt tags can negatively impact a website’s search engine rankings and make it difficult for users with visual impairments to understand the content.
• Incompatibility with different devices and browsers. Images that are not optimized for different devices and browsers can appear distorted or not load at all, leading to a poor user experience. It’s important to test images on different devices and browsers to ensure compatibility.

What format should you use? Webp.

WebP provides superior compression for images on the web, with an average of 30% reduction in file size compared to JPEG and PNG.

You can use a plugin like ShortPixel that will automatically handle the conversion and compression for you.

But since we want to avoid plugins for an even better performance of our site, you can convert your images to Webp before even uploading it to WordPress or your CMS.

Use a free tool like BulkResize, to bulk convert your images to Webp, you’re welcome.

If you’re using Photoshop, you already have the option to export to Webp, so that your images are optimized from the get go. Simply hit Ctrl + Alt +S and you’ll see an option to save the image as Webp.

And finally, you should probably know about Image Sprites.

This is where you combine multiple images into a single sprite sheet and use CSS to display the appropriate part of the sprite. It works best for icons and images that are present one after each other in a page. This reduces the number of HTTP requests.

2. Avoid Heavy Page Builders and Plugins

I came across an interesting approach to web design while reading a web-design manifesto from a highly optimized website called Xrilion. They took an aggressive stance on performance by completely eliminating their page builder yet managed to maintain a visually appealing and functional site.

Why Avoid Heavy Page Builders and Plugins, you ask?

• Performance Impact. Heavy page builders and numerous plugins can slow down your site by adding extra code, scripts, and CSS.
• Security Risks. More plugins mean more potential security vulnerabilities.
• Maintenance. Keeping many plugins updated can be cumbersome and may lead to compatibility issues.

Most bloggers want to incline toward easy plug-and-play builders like Divi, Elementor, or WPBakery. (When it comes to WordPress).

Actually … (clears throat*).

Most bloggers don’t even know that you don’t have to use age builders!

I’d say it’s one of the myths of blogging, you don’t need to use fancy software or be a designer to have a successful blog.

Although this can be controversial in the sense that page builders are sooo easy to use, they have a significant impact on your performance nonetheless.

Think of using lightweight themes instead. (Again, if you are not a techie or can’t hire one, then skip to the next tip). Use the built-in WordPress block editor (Gutenberg) which is lightweight and well-integrated. (And now very capable with the new site-wide editor)!

For example, Astra, Generatepress, and Kadence are known to be fast and fatless.

Another thing to consider is to Limit Plugin Use.

This will have a direct impact on your performance: Only install plugins that are absolutely necessary. Regularly audit your plugins and remove those that are not in use.

For example, For some things Instead of relying on plugins, consider adding custom code. This can be done by directly editing theme files or using a child theme. If you’re not comfortable with coding, hiring a developer to implement custom solutions can be a good investment.

What are “Essential” plugins?

• Caching. WP Rocket, W3 Total Cache.
• SEO. Yoast SEO, Rank Math.
• Security. Wordfence, Sucuri.
• Image Optimization. Smush, ShortPixel.

3. Minify CSS, JavaScript, and HTML

Before you do anything in this step please take a complete backup of your website. This will ensure that you can restore your site to its previous state if anything goes wrong. It’s best to create one in Cpanel on the hosting side.

Many caching plugins for WordPress come with built-in minification features. Some popular caching plugins that support minification include W3 Total Cache, Litespeed Cache and Autoptimize. I’m also a big fan of Perfmatters.

From my experience, I’d avoid things like WPRocket or Nitropack.

If you prefer not to use a plugin, you can manually minify your CSS, JavaScript, and HTML files. Here’s how:

• CSS. You can use online tools like CSS Minifier or Clean CSS to minify your CSS files. Simply copy and paste your CSS code into the tool, and it will generate a minified version. Replace the original CSS code with the minified version in your WordPress theme’s style.css file.
• JavaScript. You can use online tools like JavaScript Minifier or UglifyJS to minify your JavaScript files. Similar to CSS, copy and paste your JavaScript code into the tool, and it will generate a minified version. Replace the original JavaScript code with the minified version in your WordPress theme’s JavaScript files.
• HTML. WordPress doesn’t have a built-in way to minify HTML, but you can use plugins like Autoptimize or WP Super Minify to minify your HTML. These plugins will automatically minify your HTML code when your pages are loaded.

I’d stick to one (or two max) plugins for all my optimization needs though.

If you’re using Lite Speedcache (which I’m), then here are the steps to enable those options.

Step 01: Go to Litespeed Cache Settings > Page Optimization

Under CSS Settings, Turn On “CSS Minify” Option, like this:

Step 02: Go to JS Settings > Turn on the “JS Minify” Toggle.

Step 03: Go to HTML Settings > Toggle the “HTML Minify” Option.

Done!

It’s as easy as that … But please test your site after, especially with the js minify turned on, it might cause layout issues. Ensure that everything is working correctly. Check your website’s functionality, layout, and design to make sure that nothing has been broken during the minification process.

4. Reduce HTTP Requests

Yet another really critical issue.

Reducing HTTP requests is an effective way to speed up your website by minimizing the number of resources that need to be loaded. Did you know that website speed improvements of just one second can double conversion rate?

After testing and manually analyzing 1,000+ websites over the past two months, I have realized that most of the HTTP requests are from either Images or JS Files (sometimes from too many fonts).

So the obvious solution that works for most people is to combine these files. Merge multiple CSS files into one to reduce the number of CSS file requests. Similarly, combine multiple JavaScript files into one.

Again, using Litespeed Cache as an example, you can enable these options right in the plugin. Look:

Example.

Before combining:

<link rel=”stylesheet” href=”styles1.css”>

<link rel=”stylesheet” href=”styles2.css”>

<script src=”script1.js”></script>

<script src=”script2.js”></script>

After combining:

<link rel=”stylesheet” href=”styles.css”>

<script src=”scripts.js”></script>

Same thing applies for JS, look:

Another thing to worry about is image requests …

You might wanna replace your small image icons with inline SVGs. Use CSS for Small Images. Or Encode small images as Base64 and include them directly in your CSS.

Example (Base64 Encoding).

.icon { 

  background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA’) no-repeat; 

}

Finally: Defer Non-Critical JavaScript and Optimize Fonts.

Defer and Async Attributes: Use defer or async attributes to load JavaScript files without blocking the page load.

As for fonts: Use modern, compressed font formats like WOFF2 and Use the font-display property to control how fonts are displayed.

Example.

@font-face {

  font-family: ‘MyFont’;

  src: url(‘myfont.woff2’) format(‘woff2’);

  font-display: swap;

}

5. Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a system of distributed servers (network) that delivers web content to users based on their geographic location. The primary goal of a CDN is to improve the speed, reliability, and performance of your website by serving content from locations closer to the user.

If your web server is located far away from the user, the request and response can take a long time, resulting in slow load times.

Yikes!

A CDN solves this problem by caching your website’s static files on its servers located in different geographical locations. When a user visits your website, their browser sends a request to the CDN server closest to them, which then delivers the cached files to the user’s browser. This reduces the distance the files need to travel, resulting in faster load times and improved website performance.

Now that we got that outta the way, how do we actually use a CDN?

This can be implemented from the hosting side or the plugin side.

The two famous options are Cloudflare CDN or QUIC CLOUD. If your host uses a Litespeed server, then go for QUIC CLOUD, otherwise go for Cloudflare CDN.

To set up your CDN, you need to create an account with your chosen CDN provider. Add your website to the CDN provider’s dashboard. This usually involves entering your domain name. Change your DNS settings to point to the CDN. This may involve updating your DNS records with your domain registrar to point to the CDN’s servers.

6. Enable Browser Caching

Browser caching is a technique that allows a user’s browser to store static files, such as images, CSS, and JavaScript files, locally. This means that when a user visits your website again, their browser can load the files from the cache instead of making new HTTP requests, resulting in faster load times and improved website performance.

In our Litespeed example, In your WordPress dashboard, go to LiteSpeed Cache > Cache > Enable Cache.

And then, go to Browser > Browser Cache. And turn the toggle on:

After configuring LiteSpeed Cache for browser caching, you can verify if it’s working correctly using browser developer tools:

• Google Chrome:
  1. Right-click on your website and select “Inspect”.
  2. Go to the “Network” tab.
  3. Reload the page.
  4. Check the “Size” column. Files with “(from cache)” indicate browser caching is working.
• Firefox:
  1. Right-click on your website and select “Inspect Element”.
  2. Go to the “Network” tab.
  3. Reload the page.
  4. Check the “Size” column. Files with “(from cache)” indicate browser caching is working.

Benefits of Browser Caching with LiteSpeed Cache

• Improved Page Load Times. Returning visitors experience faster load times as static files are retrieved from their browser cache.
• Reduced Server Load. Fewer requests for static files reduce the load on your server.
• Better User Experience. Faster load times lead to improved user satisfaction and engagement.

7. Optimize Your Fonts

This is my fav!

You’d think fonts won’t have that much effect on your site right?

Wrong!

In my opinion Fonts are the third most impactful request element next to Images and scripts … think about it, they are loaded on every page of your website.

If you’re using a web font or the defaults provided by the browsers and you don’t mind the Aesthetics, we’ll let you go here.

But if you’re loading custom fonts I would recommend the following:

1. Choose Modern Font Formats

WOFF2 (Web Open Font Format 2) is the most efficient and widely supported modern font format for the web. It offers better compression than WOFF and supports advanced features.

WOFF (Web Open Font Format), While still widely used, it’s recommended to use WOFF2 where possible due to its superior compression and performance benefits.

As for TTF/OTF (TrueType/OpenType), These formats are older and larger in file size compared to WOFF2. Use them as fallbacks for older browsers that do not support WOFF2.

2. Reduce the Number of Font Variants

• Subset Fonts. Include only the characters that are necessary for your website to reduce file size. This is particularly useful for multi-language websites or sites with limited character sets.
• Limit Font Weights and Styles. Include only the font weights and styles that you actually use on your website. Avoid loading all available weights and styles if they are not needed.

3. Use Font Display Optimization

I use perfmatters for this, I just preload fonts and try to limit my number of fonts to max 2. (Regular and Bold). By the way italic fonts can be handled by browser rendering and you no longer need to upload them as a separate font.

And as mentioned earlier: font-display: Use the font-display property in your @font-face rules to control how fonts are displayed while they are loading. This property allows you to balance between ensuring text is visible quickly and maintaining the desired font rendering.

Example.

@font-face {

  font-family: ‘MyWebFont’;

  src: url(‘myfont.woff2’) format(‘woff2’),

       url(‘myfont.woff’) format(‘woff’);

  font-display: swap; /* Fallback to system fonts until web font is loaded */

}

Conclusion

We have seen that faster websites provide a smoother and more enjoyable browsing experience, reducing bounce rates and improving user engagement. And that speed is a ranking factor for search engines like Google, so faster websites tend to rank higher in search results.

Naturally efficient websites consume fewer server resources, potentially reducing hosting costs and improving ROI. They provide a smoother and more enjoyable browsing experience, reducing bounce rates and improving user engagement.

I hope these tips were (at least some of them) helpful in taking back your website’s potential! Now it’s your turn, go ahead and apply these tips and let us know the speed gains you were able to observe on your site!