Skip to content

Website Speed Optimization: How to Do It #Step-by-Step

More than a decade ago, Google let it be known that site speed officially became a search ranking factor. Although the post did not clarify the impact of speed on the rankings, webmasters reading the announcement understood that website speed optimization should be at the top of their development plans. Nowadays, this is more valid than ever, and arguably even more so than back then.

If you’re in the process of building your first website, it’s crucial to keep in mind that page load times are vital in keeping visitors on your website. HubSpot reports that a drop in conversion is related to increasing page load times – a one-second delay in load time could lead to a ~20-30% reduction in conversion [1]!

Website Speed Optimization Guide.

Over the past several years, there has been a steady increase in average page sizes. This is partly – though not solely – due to the explosion in popularity of video, with more websites embedding videos into their content. Of course images and static files have also played a role.

Even with these elements and the ever-increasing page load that accompanies them, there are still actions you can take to improve how your site handles things. This article that you’re reading right now is going to teach you what those actions are, so that you can improve your website speed optimization.

Table of contents 📚

Website speed optimization: What you need before we get started

We assume that you have two key aspects of building your website already taken care of. These two things are that:

You’re using…

  • An optimized theme that doesn’t introduce much bloat on top of WordPress itself.
  • A sufficiently fast hosting provider.

If you can say “yes, I am” to both of those, then you may skip to the next section to start learning about how to speed up your website.

However, if you answered “no, I can’t”, then you don’t need to abandon this tutorial or your goal of making your website faster. Here’s what to do instead:

Once your website is locked and loaded with a solid foundation for takeoff, feel free to move forward with ignition below.

Getting started with website speed optimization

Anatomy of a web page

anatomy.

The trick to optimize your web pages for speed is to understand what goes into a web page. Let us go through the most popular components:

  • The HTML code that gives structure and content to a web page – even with WordPress running the party on your site, all it does is take what’s in the database – all the content – and convert it to static HTML output
  • Static files that help in design, functionality and interactivity (CSS, JavaScript)
  • Images for backgrounds, logos, and content
 

In order to render a page, the browser requests for each element of a web page – the page itself in the form of HTML, static files, images, external content. Therefore, the number of HTTP requests also plays a crucial role in the website speed optimization.

Finding out where you stand: website speed optimization tools

Before we move on to specific techniques that help you in optimizing your web site, let us take a moment to review tools that help in analyzing the speed of web pages.

If you are a beginner looking for a casual testing tool, you can consider using the Pingdom Tools suite for a quick appraisal of your web site. For a more complete solution, you can head over to Google’s Page Speed Insights.

Pingdom Speed Test.
Pingdom Tools for Speed Tests

In addition to those, if you are looking for a quick option in the form of a browser plugin, you can try YSlow, which tests websites and provides suggestions from within the browser. Further, the GTmetrix tool utilizes YSlow’s test results for reports.

💡 If you want more options to test your site speed, this post lists 5 of the best speed checking tools out there.

Before going through the techniques listed in this post, make sure you run your website on one of the tools listed here to serve as a benchmark. As soon as you make any website speed optimization, make sure to go back to the tool to check for any speed improvements.

How to increase website speed in five steps

Step 1: Optimize static files

The first step of this guide focuses on the optimization of static files – most popularly in the form of stylesheets (CSS files) and scripts (JS files).

(a) Move CSS to head, JS to bottom

The first optimization to perform is to make sure the stylesheets go in the <head> section of your page structure, whereas all the scripts are moved to just above the closing </body> tag of your page. The logic behind this is simple:

  • Generally, stylesheets are smaller in size than scripts
  • Once stylesheets are loaded in the <head> tag before the browser renders the body of the page, any elements that are rendered in the page will have proper styling
  • The functionality of the scripts generally comes into play once the content of the page is loaded, so, scripts can generally be placed at the bottom

This practice ensures that visitors to your website do not leave a page in frustration while waiting for it to load.

To handle the scripts part quickly, you can install the Scripts to Footer plugin for WordPress. It works on autopilot and does the job well.

(b) Set up minification

Minification is the process of removing those parts of a file that are not necessary for its execution. For instance, in your stylesheets or scripts, the following are not necessary for execution:

  • whitespaces for indentation
  • comments
  • long function and variable names
  • unused code

Minification helps in greatly by reducing the size of your static files. You can minify your JavaScript or CSS files by using a service like Minify, or installing one of these minification plugins in WordPress.

(c) Use asynchronous loading

A web browser renders and requests for resources sequentially as they appear on a web page. This is termed as synchronous loading. However, you could change this default functionality of the browser by using the async attribute to load resources as soon as they are available. For instance, you can load a script asynchronously as follows:

<script src="script.js" async></script>

Here is a list of plugins that help you with asynchronous loading in WordPress.

(d) Use GZIP compression

GZip compression is a technique to compress resources through HTTP requests. With GZip compression, the server sends zipped files of resources, which the browser unzips while rendering a web page.

The time and resources required to compress and decompress a resource is outweighed by the time and bandwidth saved in transferring a smaller file from the server to the client. This technique not only loads pages quicker, but also saves on server costs.

GZip compression is a part of a few WordPress caching plugins like WP Fastest Cache.

(e) Use Google CDN for popular libraries

The final optimization technique in this step is to use either Google or Microsoft CDN when fetching any common libraries that are used on your site. The reason behind is simple – due to the popularity of these CDNs, it is probable that a visitor has already a cached version of the resource in their browser.

You may also be interested in:

Step 2: Optimize images

As discussed above, the primary source of increasing sizes of the web pages over the years is images.

Even take a look at CodeinWP’s own numbers:

image load.

Therefore, tackling images should lead to the most significant improvements in your website speeds, and it does.

Images are essential for a web site, however, the use of full-quality images for the web isn’t really recommended. You should compress images to a degree that reduces the size drastically, while giving a fair visual quality.

You can do a couple of things to make that happen and have website speed optimization in mind:

(a) Upload images of the right size

Your current theme likely has the maximum size of image that it’s able to display – dimension-wise. Find out what that is and then upload only images that are maximum twice as large as that.

Why twice? This will also allow the theme to display retina-quality versions of the images.

(b) Use the correct type of image

The two most commonly used types of images on the web are JPGs, PNGs, and increasingly, WebP.

They are not alike.

  • JPG images are ideal for photos and other complex images that contain a lot of color information. They are widely used because of their ability to compress detailed images with minimal perceptible loss of quality.
  • PNG images are perfect for graphics with less color information, such as interface screenshots. They offer lossless compression, meaning the quality of the image remains high, making them ideal for images with text or sharp edges.
  • WebP, a newer format developed by Google, combines the strengths of both JPG and PNG. It provides high-quality images at significantly smaller file sizes, supporting both lossy and lossless compression. This makes WebP versatile, suitable for a wide range of web imagery, from detailed photos to simple graphics.
Example of a JPG image
Example of a JPG image
Example of a PNG image
Example of a PNG image
Example of a WebP image
Example of a WebP image

(c) Optimize images locally before uploading

There are various tools you can use prior to uploading any images to your site.

tinypng.
imageoptim.

(d) Lazy load your images

Another technique to optimize images is lazy loading, a practice where an image is not downloaded until a visitor scrolls down to see it.

lazyload demo.
Lazy loading demonstration on CodeinWP

Here’s a complete guide to lazy loading images on your site.

(e) Get an image optimization plugin

Last but not least, you should get a quality image optimization plugin for your WordPress site. Depending on which one you’ll end up using, you might get the bulk of your image optimization needs done on autopilot.

Here are 6 of the best image optimization plugins compared.

If you need a quick recommendation, check out our own Optimole. It provides highly efficient image compression, in addition to a CDN in the free plan! Optimole also delivers some stellar results when put against its main competitors:

PNG optimization results
PluginOriginal PNG SizeAfter OptimizationOptimization %Compression
Optimole301 KB34 KB88.7%Lossy and Lossless
Imagify301 KB67 KB77.7%Lossy
TinyPNG301 KB79.7 KB73.5%Lossy
ShortPixel301 KB90.4 KB69.96%Lossy
Smush301 KB247 KB17.9%Lossless
EWWW301 KB257.4 KB14.6%Lossless
JPG optimization results
PluginOriginal JPG SizeAfter OptimizationOptimization %Compression
ShortPixel518 KB169 KB67.36%Lossy
TinyPNG518 KB248.6 KB52%Lossy
Optimole518 KB274 KB47%Lossy and Lossless
Imagify518 KB338.7 KB34.64%Lossy
EWWW518 KB488.9 KB5.7%Lossless
Smush518 KB493 KB4.9%Lossless

Step 3: Optimize HTTP requests

Earlier in the post, we discussed that when a user browser starts loading a web page, the actual transfers are done via individual HTTP requests. A single request fetches each resource. Hence, an increase in the number of such requests increases the load times of your web page.

site requests.
HTTP requests of a web page

(a) Combine files

The first task to minimize the load of HTTP requests is to combine similar resources. When you are minifying resources, you can combine similar files together. For instance, all stylesheets (CSS files), and all custom JavaScript files can be combined into single files. This reduces the number of requests that a client has to make to load all resources.

Again, these minification plugins for WordPress can help you do that.

(b) Minimize DNS lookups

When an HTTP request is made to a domain like wpshout.com, a DNS (domain name system) lookup is performed to find the IP address of the server. Consequently, your target should also be to minimize the number of DNS lookups across all the requests, in order to speed up website loading.

Here’s a cool guide on how to do that.

(c) Enable keep-alive

Without any optimization, the browser sends a single HTTP request for every resource. This connection closes once the download is complete. The browser then makes a new request to the server for a new resource. Keep alive is a technique that does not terminate a request when a resource download is complete.

You can enable keep alive through the following ways:

(d) Minimize redirects

A redirect is an instruction to automatically take a client from one location to another location of a resource. Each redirect increases load times of your web page and unless absolutely necessary, you should avoid any redirects in your code.

(e) Use a CDN

A CDN (content delivery network) is a collection of web servers present across vast geographical locations that deliver content quickly and efficiently to clients.

A client requesting for a resource will be served the resource from a server that is geographically closest to the client’s location. This ensures that the content requested reaches the client in the shortest time possible!

We have a separate resource comparing the top CDN solutions for WordPress sites, along with info on how to get stared. Check it out in the related posts list at the top of the page.

Step 4: Caching

No website speed optimization guide can exist without a section on caching. Some techniques that we discussed earlier, such as GZip compression and minificaiton, are a part of many caching solutions today.

Caching refers to a phenomenon of storing a resource in a temporary storage to retrieve it quickly when required. There are various forms of caching:

  • Page caching: A static HTML version of a page stored on the server
  • Database caching: The results of common database queries (such as top 10 posts on your site) stored on the server
  • Browser caching: Storing parts of your page in the browser

We have compared the most popular WordPress caching plugins in this post.

TL;DR: Go check out WP Rocket if you are looking for a complete solution. Alternatively, if you prefer something that’s free, here’s a guide on how to configure W3 Total Cache.

Step 5: Optimize for mobile

In the earlier parts of this article, we discussed optimization techniques that are relevant for both desktop and mobile. However, the consumption of content on mobile is increasing, and there are new challenges a smaller screen brings. This section, thus, discusses website speed optimization methods for mobile devices.

Mobile optimization refers to the practice of ensuring that mobile visitors to your web page experience the same functionality and efficiency as their desktop counterparts. The following list contains certain hygiene factors for ensuring that your website speed optimization is up to par for mobile devices:

  • Use responsive web design to ensure different devices get different versions of a web page
  • Avoid use of flash and pop ups, as mobile devices may not support it
  • Do not position interactions such as links too close to each other

In addition to these factors, AMP (Accelerated Mobile Pages) is a project that aims at creating content that is fast and consistent across devices.

Here is a guide to getting started with AMP in WordPress.

Conclusion 🧐

I hope this guide has given you some tips on what you should do to improve your site’s overall level of website speed optimization.

Just to recap; we first looked at the anatomy of a web page to tackle specific areas to improve. Then, we moved on to specific steps for optimization:

  • Step 1 covered the optimization of static files in the form of stylesheets and scripts
  • Step 2 tackled images and their optimization
  • Step 3 was all about techniques to optimize HTTP requests
  • Step 4 discussed a few popular caching techniques
  • Step 5 covered optimization for mobile devices

Is there anything you’re struggling with when it comes to website speed optimization? Do let us know in the comments below.

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 

Layout, presentation and editing by Karol K.

Yay! 🎉 You made it to the end of the article!
Shaumik Daityari

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...