8 Tips on Site Speed Optimization

Site speed optimization is a hot button topic for any website owner.

On one hand, there are users that are not willing to wait longer than 3 seconds, according to Google. On the other hand, there is Google itself that considers the site speed as one of the primary ranking factors. So if you want your website to generate conversions and have a good SEO ranking, you need to optimize its performance to deliver a superior user experience and delight Google.

Because every website is unique, there will be a unique set of bottlenecks that slow the performance down. However, all websites are built with a standard set of tools so there are several ways of optimizing the performance that will be applicable for any website. We have collected the top 8 recommendations and broke them down in two articles for easier read.

Compress the files

There may be thousands of files on your website and every file takes some time to load. The bigger the files are, the longer the loading time will be, thus, dragging the site performance down.

One of the best ways to deal with the issue of site speed optimization is file compression. By minifying the files, you will speed up the site load and improve the performance significantly.

Before the actual compression, first, run the compression audit to see the uncompressed size of your page and compare it to the compressed result. To run an audit, go to GIDNetwork and enter the URL of your site. In the results, you will see the current size of your page and suggestions on possible compression.

After the audit, use Gzip to compress the files. According to Yahoo, Gzip is the most effective compression method which is capable of reducing the response size by 70%. This application locates similar strings of code on your site (mostly CSS, JavaScript and HTML) and replaces them, thus, making the file smaller.

There are a few ways to enable Gzip for your site:

• For W3 Total Cache: check the “Enable HTTP (gzip) compression.” box
• Enable Gzip in .htaccess file 
• Add this code <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?> at the top of HTML/PHP file
• Use plugins to enable Gzip

And if your site already uses Gzip, you can check out the saved size here.

Minify JavaScript and CSS

Every time your site downloads a certain element (i.e. image or script), an HTTP request is made for every element. So if your website is complex and has many components, you can imagine how many HTTP requests are made upon every site load.

In order to cut down the number of HTTP requests and boost the load speed, you can minify and combine your JavaScript and CSS files. In this way, you will reduce the file size and the actual number of files, thus, minimizing the number of HTTP requests.

The process of file minifying implies the removal of any whitespaces, extra line breaks or unnecessary pieces of code. And in case you have several JavaScript or CSS files, you can combine them into one. 

There are several plugins which you can use for minifying your files:

• WillPeavy 
• WP Rocket 
• BWP minify (for WordPress only)

You will need to install the preferred plugin and set it up according to the guidelines.

Fix render-blocking JavaScript

Your browser may encounter a render-blocking external JavaScript file in the above-the-fold area of your page. This file will slow down the page load and thus will hurt the overall performance.

Here are several methods of dealing with the issue.

Use specialized plugins

There are two most popular plugins that can help you get rid of blocking JS (and CSS): Autoptimize and W3 Total Cache. 

Autoptimize is simpler and W3 Total Cache demands a bit more work. The W3 Total Cache is mostly recommended for those users who already have experience with this plugin.

Inline blocking JavaScript

As recommended by Google, you can inline the external blocking scripts content directly in the HTML document (upon the condition these scripts are small enough). This will eliminate the request latency and will fix the issue.

It is important to remember that inlining will increase the size of the HTML document, though, and the same script content may need to be inlined multiple times. To prevent the risk of hurting the performance, it’s recommended to stick with the small script inlining only.

Use the async attribute

To make the JavaScript asynchronous and prevent it from blocking the parsing, use the async attribute on the external blocking scripts. Example: <script async src="my.js">

Remember though that asynchronous scripts would not execute in a specific order. As well, they should not use document.write.

Enable browser caching

Every time a user comes to your site, the browser will load its full content, including all images, stylesheets and more. Now, imagine how many times the users hit your site on a daily basis and how many times a browser has to load the same content again and again.

To speed up the content loading process for returning users, enable caching for your site. In this way, the elements will be stored in a temporary database, waiting for their turn to be loaded. By using caching, you can reduce the load speed from 2.5 to 0.9 seconds, which sounds pretty impressive.

Note that caching will save load time for returning users only as first-time users will have an empty cache and will be loading your content for the first time ever. However, it is still recommended to enable a full browser cache to speed up the performance and provide a better user experience.

Tools to use for different websites:

• WordPress: W3 Total Cache
• Static HTML sites: enable cache in .htaccess file
• Drupal: Varnish

As well, configure the settings on how long you want the content to be cached - for that, you can use this module.

Integrate CDN

Content Delivery Network is a network of distributed servers that speeds up the content delivery time. CDN locates the user and finds the closest server, thus, routing your request to it. Because the server is nearby the user, it significantly cuts down the response time and optimizes content delivery.

In addition to faster content delivery, many CDNs come with several built-in features that are aimed at optimizing the website performance:

• Minify CSS, HTML
• Code restructuring
• Image optimization

Even though the usage of CDN can be quite expensive, the benefits that come with its integration overlay the cost and make a difference in terms of the website performance.

Optimize images

This is one of the most obvious yet overlooked reasons for slow website performance and one of the best methods of site speed optimization. 

Heavy images can eat up the load speed so it’s best to compress them to reduce the size. For the WordPress site owners, there is a WP Smush plugin that automatically compresses the images right after you upload them to the media library. There are also plenty of other compression tools that will help you get the image size right. 

Use CSS sprites

CSS sprites are basically the method of combining several images into one big image for the sake of faster loading. So, instead of loading multiple images, the browser will have to load only one.

Some may say: but the summarized weight of the several images is still smaller than the weight of a single big file, so what’s the point in using CSS strings? Here is the trick. Every single image requires a separate HTTP request and this eats up bandwidth while one big image generates only one HTTP request. In the outcome, the big image loads faster than several small images.

Use lazy loading

Lazy loading is a pattern that loads the images as they enter the user’s viewpoint. That means, the page and its content will not load at once - but the content will load as the user scrolls down.

Such an approach helps speed up the page load and improves the performance of the site. In addition, lazy loading brings a few more benefits:

• Reduces memory usage
• Prioritizes the content to be loaded
• Eliminates unnecessary code execution
• Improves user experience

It is important to note that the use of lazy loading means adding some extra code to your existing one so the code will become slightly more complicated. However, this is not a pitfall to worry about, especially if you consider the benefits that the technique brings.

Eliminate the ballast

Another simple yet effective way to deal with slow website performance is to get rid of all the dead weight on your site.

You may not even be aware of it but your site may contain lots of unused scripts, outdated extensions and unnecessary plugins. All this ballast drags the performance down while bringing absolutely zero benefits.

To detect the unused elements, perform a code audit and look through all your extensions. If you don’t recognize some of them, it most probably means that you can easily eliminate it.

Fine-tune the database

Just how much data does your database process on a daily basis? Probably, a lot. In order for the database to manage the data in an efficient manner without causing any delays in the load time, you need to fine-tune the database to improve its performance.

Optimize MySQL queries

One of the most common problems is the poor performance of SQL queries. When you start optimizing the issue, you’ll soon find yourself facing many choices, like using IN or EXISTS.

To make it easier for you, there are several query optimizers that are available, with EverSQL Query Optimizer being one of the most popular. What makes this tool so good is that it not only fixes the issue but also explains them and gives useful recommendations so you know what’s going on and why certain things happen.

Indexing

Indexing is an incredibly efficient method of optimizing database performance. An index is a data structure that works by a similar method as a book index in the library: the database index facilitates the data retrieval process by providing easy access to the ordered records. With index, you can select/sort the rows much faster and easier.

Note: if there are too many INSERT, DELETE, AND UPDATE statements in your tables, this may actually lead to the productivity dropdown because the indexes should be modified after these operations.

Expand the memory

Lack of memory is another common reason for poor database performance. To check whether you have this problem, see the number of page faults that your system has - a high number of faults indicates that you need more memory.

Another way to fix the database performance problem is to actually get a more powerful hosting solution. As websites grow and get more traffic, this problem will become critical and will demand to switch to a better hosting provider.

Final thoughts on site speed optimization

Optimization of website performance is a multi-faceted approach that depends on the site and its contents heavily. The methods listed above are the most common ways to fix the slow website issue. However, it is highly recommended to perform a website performance audit to identify the bottlenecks first and come up with an actionable site speed optimization plan. In this way, you will eliminate the guesswork and will ensure that all problem areas are addressed.

SoftTeco team will gladly assist you with the performance audit and further corrective actions to achieve the seamless performance of your website.