How to make your WordPress website faster: The ultimate checklist

Robert-Jan Budding, November 27, 2018

Do you think your WordPress website is slow? You’d better get right on it! Studies have shown that the attention span of your visitors is getting shorter and shorter. If the website takes three or more seconds to load, you’ve often already lost more than 40% of your visitors. By making their website just one second faster, Amazon was able to increase their conversion by 2%. A fast website doesn’t just feel nicer, it also earns you more money.

In this how-to guide, you’ll find an enormous amount of improvements. It’s best to test them locally or in a Staging environment first. If your website is hosted by Savvii, simply copy and paste it to a Staging environment. After every change, perform a test to see whether your website still works properly before working on the next change.

You don’t have to make all of these changes right away. Feel free to focus on the parts that require the most attention and implement the next change step-by-step. By doing so, you’ll make your website faster bit by bit.

We have divided this checklist into four chapters:

  1. Website Management
  2. HTML, CSS and JavaScript
  3. Images
  4. PHP and databases

Each chapter contains tips to make your WordPress website faster. We start off with the basics, tips that can almost always be applied, and go deeper later on. When you follow up on all the tips, you will get the maximum speed out of your website. We have made this checklist with help from WordPress developer Arjan Snaterse from Radish Concepts.

Do you want to have the checklist as a handy PDF where you can check all the boxes?

Download our free 'The Ultimate WordPress Speed Checklist' now

Website management

Use caching

Caching is the temporary storage of data in a different location in order to enable faster access to data. This technique is extremely important to the speed of your WordPress website. Constantly retrieving and compiling a web page takes time and server capacity. Caching ensures that your browser only has to load the cached copy, which is much faster.

It is important to note that caching is not a solution to a problem with your website’s code. If the code is bad, caching won’t do you much good. The cache also expires regularly, so the page would then need to be cached again, which costs a lot of resources. This is especially the case for large, dynamic sites.

How: Caching is done in three layers: browser cache, caching via plugins, and the so-called reverse proxy cache. For the first two layers, you can use W3 Total Cache, WP Rocket or WP Super Cache.

For the reverse proxy cache, Varnish caching is often used. This form of caching is placed in front of the web server that WordPress runs on and is the default for websites hosted by Savvii.

Use HTTP/2

HTTP/2 is a new technique that makes websites load even faster via a secure connection. In fact, a website secured with SSL via HTTP/2 is faster (and more secure) than a website without SSL.
To make use of HTTP/2, you need to make sure that all of your pages are loaded via a secure HTTPS connection. If you don’t do this, you will get mixed content warnings.

How: In order to use HTTP/2, it needs to be offered by the web host. If your website is hosted by Savvii, it is run via HTTP/2 by default. Ask your web host which HTTP version they offer.

Remove unnecessary plugins

Every plugin you install on your website demands resources from the server. This doesn’t only have to do with the number of plugins, but also the quality of the code.

How: Find out which plugins are unnecessary and remove them. Don’t just deactivate them! Plugins that load a lot of scripts and styling are especially bad for performance. It’s better not to use any plugins that make a lot of external or database requests.

Load CSS and JavaScript asynchronously

Sites use CSS and JavaScript. These style sheets and scripts are loaded in your browser in two ways: asynchronously and synchronously. When your scripts are loaded synchronously, they load sequentially. With asynchronous loading, they load at the same time. When a CSS or JavaScript is loaded synchronously, the browser only continues loading once the previous file has loaded completely. Asynchronous loading does not present this problem.

This is especially useful when dealing with an ad script where the network is slow for a reason: your website is directly affected by it.

How: Try to avoid the use of blocking JavaScripts by asynchronously loading the scripts that are not critical to the display of a page. For this purpose, use the code:

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

The most modern way of asynchronously loading CSS files is to use rel=”preload”. You will still need an onload event handler to get this to work properly, but it’s better than nothing. In a modern browser, you would be able to use the following code:

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Tip: Since not all browsers are capable of handling rel=”preload” well, there is a function that is available via JavaScript called loadCSS. You can use it to circumvent this problem, for example by calling the function inline.

Place render-blocking CSS inline

For the best performance, consider placing critical CSS inline, directly in the HTML document. This will prevent additional requests to the server. By doing this properly, you ensure that the first display of a page is placed completely within the HTML file. This is the fastest way to load and display a page.

How: Put the critical CSS in a <style> tag, and always put it in the header of the HTML.

Size of your page

The size of your page should be kept as small as possible. Sustywp goes to great lengths to do this…

The size of the average web page is 2.3 MB, and if a user has never been to your website, your browser needs to load all of this data.

How: The biggest problems big websites have lie with images. You can find a separate paragraph about this below. In addition, more and more website designers and developers are talking about the art of omitting things on a site.

Navigation, sidebars, classes? No longer necessary. A good starting point is the minimalist theme _s (underscores).

Use good hosting services

A well-chosen hosting service also affects the performance of your WordPress website. A fast website is a precise interaction between the code of the website and the hosting technology that it runs on.
Shared hosting is great for smaller websites. For websites with high traffic and websites with a lot of complex code, it makes more sense to use a VPS. All resources on the server are then dedicated to your website. This is ideal for the performance of your website.

How: The choice of hosting plans is so large that you sometimes can’t see the wood for the trees. Fortunately, with a good hosting service like Savvii, you can choose from a broad range of both shared and VPS plans.

Minimize cookie size

The information in cookies is sent along with every request. Both with the request to the server and with the reaction of the server itself. This all needs to be loaded and read by the browser.

Minimize cookie length

How: Make sure your cookie size is less than four kilobytes. With four kilobytes, you still have a lot of space. In comparison, a Google Analytics cookie has only 31 bytes. If you want to store a visitor’s information, use local storage.

Use Google AMP

Mobile is becoming increasingly important. Google Accelerated Mobile Pages (AMP) is a web standard that makes loading mobile pages faster. It consists of three parts: AMP HTML, AMP JS, and AMP Cache. The HTML contains a set of predefined tags, and AMP JS ensures that all external JavaScripts are loaded asynchronously. This makes loading your sites, as you have read, quite a bit faster. AMP Cache is optional. It is used by Google to store pages in its cache so that mobile pages are loaded even faster.

How: The best way to use Google AMP is to install the AMP for WordPress plugin. This is used to automatically create an AMP variant of your report pages.

Be sure to also review the AMP documentation before you start using AMP and always validate whenever you have implemented AMP.

Please note: there are reports that AMP is not always good for your conversion. AMP changes a lot about your page layout to make it as fast as possible for mobile use. Create an annotation in Google Analytics or the analytical software you use, and keep track of what changes with regard to CTR and conversions after you enable AMP.

There is also a lot of criticism about AMP’s model. By prioritizing AMP in search results, Google is thought to be abusing its dominant position. Take this into account when thinking about whether you want to use AMP.

Distribute comments across multiple pages

Do you have a lot of comments under your articles? Congratulations, your content attracts attention! The disadvantage of this, however, is that your pages have to load more data, which slows them down. You can solve this by distributing the comments across multiple pages.

How: Go to your WordPress admin environment. In Settings -> Comments, tick the “Break comments into Pages” box. After this, select how many comments you want shown per page and how you want them sorted.

Note: Each new page with comments results in duplicate content, which is bad for your search results. You can counter this by using the Yoast SEO plugin to correctly set a canonical URL to the original version.

Keep your software up-to-date

WordPress is updated on a regular basis. This is not just for the security of the site or for the purpose of adding new features. With almost every update, the code is optimized even further so that your website loads faster.

Don’t just update the WordPress core regularly; update your plugins regularly, too. PHP is also important for speed. A new major version quickly yields an increase in speed of more than 40%!
We always update our infrastructure as quickly as possible so that you can immediately use the latest versions of WordPress, plugins, and PHP.

How: At Savvii, you hardly have to do anything if you don’t want to! We will update your core and plugins for you after we have checked them for compatibility and security. You can also update PHP very easily yourself. Simply go to the control panel, click the site you want to update and change the PHP version under Overview. Note: Always test your site on our free Staging environment. To do this, create a Staging environment in the “Staging” menu and choose the latest PHP version. Test whether everything works the way you want it to, and if that’s the case, safely perform the update on your production website.

Minimize the number of DNS lookups

For every external resource your website needs, the site needs to request information from external parties. This is often done at multiple parties, such as Google, Facebook, HotJar, and so on. The more software you use to improve your site, the more often a so-called DNS lookup needs to be done. This takes time (DNS lookup time) and you want to minimize this as much as possible.

How: Start by testing how much time you lose because of DNS lookups. For example, by using Webpagetest.org. Look in the “Domains” tab, where to which domains requests are sent and how often this is done. Web fonts are often the culprit, but plugins also often request information. Be critical and look into what you can gain.

Then, set up your DNS prefetch to let the browser do the lookups before the user needs them. This saves time when the page needs the information, for example when a user clicks on something. You activate prefetch if you use the tag <rel= > in a specific URL as follows:

<link rel="dns-prefetch" href="https://www.yoursite.com/">.

HTML/CSS/JavaScript

Head

The <head> section of your web page HTML contains important information for your browser. This information needs to be executed first to make it possible for your page to load.

Properly set up your favicon

You always need a favicon.ico for your site. If you don’t have one, your browser will return a 404.

favicon 404

Since favicons are always shown on multiple devices, you need multiple favicons. And because the favicon is requested every time, you have to make sure that it is as small as possible.

How: With any image editor, it is possible to create a .ICO file. Make the file as small as possible: smaller than 1 KB and in a 16×16 or 32×32 format. The best way to keep your favicon small is to use vectors. There are several tools available to help you with this, even some made specifically for WordPress. You can also have a favicon loaded via a CDN, for example by using

<link rel="shortcut icon" href="//cdn.example.com/favicon.ico" type="image/x-icon" />

in your header.

Tip: The favicon, just like CSS, can be preloaded. In this case, for example, use the following code:

<link rel="preload" href="https://cdn.dresscode.nl/content/themes/dresscode/assets/images/favicon.png" as="image" type="image/png" onload="this.onload=null;this.rel='shortcut icon'">
<noscript><link href="https://cdn.dresscode.nl/content/themes/dresscode/assets/images/favicon.png" rel="shortcut icon" type="image/png"></noscript>

Place all CSS resources in the head

Are you not using asynchronous loading? Then there’s a simpler tip.

All CSS resources need to be indicated in the HTML document as soon as possible. The browser discovers the <link> tags as quickly as possible and immediately sends out the CSS request.

How: Usually, it’s as simple as changing the order of the HTML code. First all of the CSS information, then the rest of the code.

Use keep-alive

If your website still works with HTTP1.x, it is wise to indicate in the header of your website that the TCP connection should be kept open during the session. With HTTP/2, this isn’t necessary; content is already loaded simultaneously. Keep-alive ensures that the server knows that multiple files may be loaded at the same time, resulting in speed gains.

How: This depends on your web server. If you use NGINX, it is turned on by default. If it doesn’t work, check whether keepalive_disable is deactivated in the HttpCoreModule. When using Apache, you can add

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

to your .htaccess.

In Litespeed, keep-alive is on by default.

Set cache headers

Files that can be cached have a cache header that specifies how long the browser can store the files before they have to be downloaded again.

How: Use Cache-Control: max-age=31536000 in the configuration of your web server. First, check which type of web server you use. You should also make a distinction between static (and therefore easily cacheable) and dynamic content. It’s best if you either briefly cache the latter, or not at all.

Turn on Gzip

By using Gzip, you compress your website files before they are sent to your visitor. The smaller the file, the faster the download.

How: Depends on your web server. Via .htaccess for Apache:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Add the following to the configuration file of NGINX:

zip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Litespeed also has its own configuration method.

Specify a character set

A character set numerically describes the characters that are shown on your screen. A well-known example is ASCII. Specify the character set in the header so that your browser can immediately start executing the HTML code and scripts. If you don’t include this, your browser will need to figure this out for itself, which takes time.

How:
The best way to do this is to specify the set in the web server configuration and not in the meta http-equiv tag in your HTML. This prevents compatibility problems with older browsers. In your header, add:

Content-Type: text/html; charset=UTF-8

Avoid redirects

Redirects make your website considerably slower. Mobile sites in particular are slower when there are many redirects because of less reliable networks. You therefore want to avoid them as much as possible.

How: Sometimes you can’t avoid using redirects, for example if you have changed the layout of your site after optimization or to send non-www requests to www. In that case, use a 301 or 302 redirect at the server level.

HTML

We recommend that you use the following best practices in your website’s HTML.

Set up your error pages

Make sure that you have set up special pages for error messages. Test your site with a random URL, such as https://www.example.com/thispagedoesnotexist123.

How: In WordPress, your visitor is automatically sent to a 404 page if a page is not found. The layout and content of this page can be found in the 404.php file. If you want to change the page, it’s wise to use a child theme so not all of your changes are overwritten when your theme is updated.

Check your links

Use an external tool to scan your website for links that no longer work. The less so-called broken links, the better the user experience. If you have broken links pointing to CSS or scripts, chances are that your site won’t work.

How: Scan your site regularly with one of the following tools:

ScreamingFrog
Brokenlinkcheck

Warning: Don’t use a WordPress plugin for this. They are known for making your site very slow.

Test your site with Adblockers

More and more people use an Adblocker. As with mobile, it’s important to know how your site works with an Adblocker. Is navigation still possible? Is all content visible? If certain content is blocked but continues to be loaded because of a script, it can make your site slower.

How: The simplest thing to do is to do a test by installing an Adblocker, such as adBlock, uBlock or PiHole.

Minify HTML

The fewer unnecessary characters your HTML has, the faster it is loaded. With Savvii, you don’t have to worry about removing spaces and blank lines. The Gzip protocol takes care of this automatically.

How: Use a tool such as WP Rocket or minifier. Within a few seconds, you have minified HTML code.

Don’t host video on your own site

Videos are getting increasingly popular. That’s why more and more companies are putting videos on their website to inform their users. You can upload videos to your WordPress website, where they are then automatically shown in an HTML5 player. Do not do this though! Hosting videos takes up a lot of bandwidth and it won’t make your site any faster. This is because your own server needs to make the videos suitable for use in your visitor’s browser.

How: It’s better to make use of the many available video platforms, such as YouTube, Vimeo or DailyMotion.

Fonts

Font

Fonts are essential for an attractive design of your website. They determine the vibe of your site and ensure that your texts are easy to read. However, if you’re not careful enough, that carefully chosen font can easily cause your site to become slower.

How fonts are loaded

On every computer, multiple fonts have already been installed by the operating system. These fonts are called system fonts. Well-known examples of system fonts are Arial, Verdana, Helvetica Neue, Tahoma, and Roboto.

You can also use fonts that are not installed on your computer. These fonts are called web fonts. Web fonts are available online. In your theme or in your WordPress admin environment, you can choose which fonts need to be downloaded by the visitor’s browser.

Using web fonts incorrectly can result in speed problems for your site. Fonts that need to be downloaded slow down your website in two ways:
1. An extra download means a longer loading time
2. Your browser needs to render the view

The most important things to pay attention to when using fonts on your WordPress site are described here.

Use system fonts

By default, every computer has a lot of pre-installed fonts. If the file doesn’t need to be downloaded at all, your browser can immediately display the page. This is exactly the reason why the decision was made to use system fonts for the WordPress admin since version 4.6.

/* System Fonts as used by Medium and WordPress */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }

Compress web fonts

Sometimes you just can’t help but use a web font. For example, your client wants you to use a specific font to make the appearance of the website look similar to the company’s branding. In this case, make sure your fonts are saved in the right format.

The three most commonly used file formats for fonts are TTF, WOFF, and WOFF2.
TFF is not compressed by default. At Savvii, we have solved this by having gzip compress the files.

On the other hand, WOFF and WOFF2 are compressed by default. You don’t have to do anything extra. Use Caniuse to test which browsers support WOFF or TTF.

Download our free 'The Ultimate WordPress Speed Checklist' now

CSS

Your website’s styling is located in your CSS files. Your users will benefit from a good layout. Since websites are getting bigger and bigger, with all kinds of different styles and sections, these files can get big pretty quickly. This means that you can gain a lot by optimizing your CSS files.

Concatenation

Concatenation is when you join multiple files into one. Having fewer individual files is advantageous to speed, especially if you still use HTTP/1. Now that HTTP/2 is here, this is less important, but it is still a good best practice to merge as much as possible. According to various sources, concatenation can make your site load faster.

How: A developer has written a lightweight plugin for WordPress, Autoptimize. This plugin merges (external) CSS, that could also be put on a CDN.

CSS Minification

As with HTML, it is also possible to minify your CSS files. By making your files smaller and omitting unnecessary information, your website will load more quickly. Pay particular attention to this if you bought a ready-made WordPress theme. You can set up these themes based on your own personal taste. However, the problem is that all the different options are also sent to the CSS. A properly developed theme will take this into account, but most themes are made for the masses.

How: First, think carefully about whether all of the code in your CSS needs to be sent with every page. A lot of code is superfluous, old or just for one part of a single page. Done that? Then feed your CSS through, for example, CSS Compressor, which will remove the last unnecessary bits of code for you.

Use tree shaking

Not all information in a style sheet is actually used for every page. Think about the layout of a contact form while you’re on a product page. Why would you need to download all that extra information?
The process of eliminating unused code is called tree shaking. You “shake” all of the loose code that isn’t associated with a page from a file. This way, you only keep the parts that are relevant to your page.

How: Check the Chrome Coverage report to see how much percent of the code is unused.

chrome coverage report

Is a lot of code unused? JavaScript tools like PurifyCSS and uncss can help you remove excess code.

Don’t use @import

@import is used to link various CSS files to each other through an import. It looks like this:

@import url("style.css")

The biggest problem with this is that it causes files to load sequentially (one has to wait for the other).

How: Just don’t use this function. Conduct a search in your CSS to look for an @import and move as much of the code as possible to one file. If that doesn’t work, use a link such as

<link rel="style.css" href="style.css" type="text/css">

Use critical path rendering

Your web page will be loaded the fastest when you don’t use a layout. The only thing is: this isn’t user-friendly, and that’s the main goal. That’s why we use CSS and need to wait until it has loaded to display pages. However, you don’t need to load all of the CSS in order to show the first usable information on the screen. The user wants to see something usable on the screen as quickly as possible, and that’s what critical path rendering is used for.

How: The aim of critical path rendering is to run the various commands that are executed to load a page in succession in a smart and user-friendly way. It is important that the information that the user sees immediately is executed above the fold (at the top of the page) as quickly as possible. This is critical CSS.

For many of the parts that use JavaScript, such as forms or social share buttons, it is better to load them after the page is loaded, i.e., last.

Use lazy loading for your images. Also, make sure that the CSS that is less important to a certain user is loaded later using non-blocking CSS. Or use the preload directive.

Make CSS non-blocking

If the browser processes a style sheet, it takes a while before all the information is collected and can be displayed on the screen. The process of displaying your site on the screen is called rendering.
You want to make sure that the browser displays something on the user’s screen as quickly as possible. But before the browser knows what has to be shown, it needs to parse and process all the files first. While the web browser is busy analyzing the files, nothing can be displayed on the screen. In other words, if the browser is busy running through the extra files, rendering is blocked.

How: Ilya Grigorik provides a very thorough explanation on the Google Developers platform. Two phases are important:
1. Split the content of your external CSS into different files, sorted by media type and media queries. As a result of this, large CSS files do not have to be downloaded immediately
2. In the link element, you refer to the media type and the media query. This way, you prevent some style files from blocking the rendering.

A snippet could look like this:

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

The first link doesn’t have a media attribute. The browser uses this link in all cases and is therefore always render blocking.

The second link has a media=”print” attribute. By using this, you tell the browser: you may only use this style sheet if the page is being printed. So, if the page is only being shown on the screen, this style sheet is skipped and is therefore not render blocking.

Lastly, the attribute media=”(min-width: 40em)” is used. This means that this style sheet may only be used if the viewport of the device is at least 40em wide. In all other cases, such as in the case of many phones, this style sheet is not render blocking.

It’s true that all style sheets are always downloaded, but lower priority is given to the non-blocking files.

Use the preload directive

Preload is used by developers to indicate to browsers that certain sections need to be loaded in a fixed way. Other parts of the website that need them will be loaded soon, and then won’t have to wait for those sections anymore.

How: Use <preload> in the reference link of your style sheet. Using <onload> function, add which style sheet the preload belongs to and the browser will start loading. This will look like this, for example:

<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

With this code, the browser loads style.css without blocking other code. When this is done and the <onload> code is implemented, this script replaces the <preload> information with the rel attribute of <stylesheet> and the styling is added to the page.

JavaScript

Websites use scripts to process interactive information from forms to personalized advertisements. Scripts, often JavaScript, demand a lot of resources from the server. They are therefore usually the big culprit when it comes to slow websites. Fortunately, there are ways to handle JavaScript more cleverly.

Non-blocking JavaScript

As with CSS, non-essential scripts that are not critical to rendering visible content need to be delayed. In doing so, the amount of work that the browser needs to do in order to display the initial page is kept to a minimum.

How: There are various ways of doing this, but what works and what doesn’t depends on the script. A few tips:
• Use <script defer src=”script.js”></script> in the head of your HTML. This will load the script while the page is rendered, but will only run it when rendering is finished. <async> blocks the rendering, <defer> doesn’t.
• Create your own script where you instruct the code to load the .js after your whole page has been loaded. An example for WordPress is this code, which you place in your functions.php:

<function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );>

Reduce and combine external scripts

Once again, check whether all of the scripts that you have running are really necessary for the user-friendliness of your website. In addition, not all scripts need to be loaded separately in order to work. WordPress is especially affected by this. If you have fewer scripts running that you also combine in a single file, your website will get a lot faster.

How: Sometimes it’s as simple as copying and pasting multiple files into a single one. For example, if you call up onescript.js and anotherscript.js in your HTML, open one of these scripts and copy and paste it into the other. It is important to make sure that you discard the old script and that the order of loading is still correct in the new file. Check the Developers Tool Console of your browser to see if everything is working as it should.

Images

The category that is often overlooked but might result in the greatest increase in speed: images. Images are often unnecessarily large, use the wrong format or type, or are loaded incorrectly.

The right file types

There are many different file types in circulation for images, and for any use of images you need to consider whether you’re using the right one. A summary:

GIF

This format is primarily used for simple online images such as logos in one or two colors, animations, and pictures without a gradient – or just a simple drawing. You can also choose to make part of the image transparent.

PNG

These images are of higher quality than GIF images. You can use this format for simple photos or pictures with a gradient. Transparency is also possible here.

JPEG

For more complicated images and photos with a lot of depth, shadows, colors, and merging, it is best to use JPEG. It provides the best quality, but no transparency is possible.

WebP

WebP, pronounced “weppy”, is a new format developed by Google and is now only supported by Chrome. It is an improved version of JPEG.

How: It’s a matter of thinking carefully before using an image. Where will it be located, what type of image is it, do I need transparency?

Specify the image dimensions

If you want your website to load quickly, use images that are as small as possible. Ask yourself if you really need a 4,000 by 3,000-pixel image on your website. In many cases, a much smaller image is enough. If your image is displayed smaller on the site, create a smaller version or a copy that corresponds to the desired dimensions and specificy the dimensions in the HTML.

Make sure your images are never larger than 500 KB.

How: Specify in the HTML source code which space the browser should reserve for the image that is being loaded. This prevents the content of your site from being offset. Each offset means that the browser has to recalculate the display of your site.

Lazy loading

When you want to load an image, the browser looks at where the image is and starts loading the image. If there is one image, this process doesn’t take very long. If you have 100 images, the browser starts loading all of the images, even if the users don’t see them on their screen yet.

Lazy loading helps to solve this problem by first loading a temporary, small image and storing the real image in the cache. Only when the original image needs to be displayed does the browser remove the image from the cache. With lazy loading, you ensure that off-screen images are only loaded when your visitor scrolls to them. This is especially useful if you use a lot of images and videos on your site.

How: Here are a few ways to incorporate lazy loading into your website:
• For WordPress, there is a built-in feature available called Infinite Scroll. This feature actually solves the problem differently, by means of pagination, but it produces the same effect
lazysizes. A lazy loader JavaScript with good responsive image support

Defer the loading of images

Lazy loading makes your site load much faster, but it comes with a few disadvantages. It doesn’t always work well with some solutions and themes, and it’s not always the ideal solution for mobile.

Most lazy loaders use JavaScript, which may also result in lower speeds. With lazy loading, you still load a temporary image, even though you might not use it at all.

Another method is deferring of the loading of images that are not above the fold.

How: With a very small script. This script converts a temporary, very light Base64 image into the correct image when the user scrolls to it. Convert the image into the Base64 format first, for example using this tool. Afterward, use this code in your HTML:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="jeechteafbeelding.png" />

Then, add the following script below, just before the <end> tag in your HTML:

<script>
window.addEventListener('load', function(){
var allimages= document.getElementsByTagName('img');
for (var i=0; i<allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false)
</script>

Now, the real images will only be loaded when the page is done loading. Don’t convert the images that are above the fold or the user might think that there are errors on the page.

Use sprites

When a browser is instructed to load images, it will load the images one by one by default. This takes valuable time. The fewer requests the browser has to make for a new section or image, the better. Images, especially smaller images, often appear on every page. For example, images in the background, icons, menus, etc.

A good solution is to combine all individual images into one file, a so-called sprite.

How: Two steps are necessary to create a sprite. You need to create one file with images, and every image needs to be positioned in this file. Instead of using different images, we use a single file, for example img_sprites.gif.

a sprite

Source: W3Schools.com

Then, you write a CSS file in which you indicate in which part of the file the required image is. Example:

#home {
width: 46px;
height: 44px;
background: url(img_sprites.gif) 0 0;
}

In this file, you use 46 x 44 px to indicate which part of the file you want to use. <background: url(img_sprites.gif) 0 0;> contains the location of the home icon in this file. Then put the following in the HTML:

<img id="home" src="img_trans.gif">

Where src cannot be left blank. In this example, img_trans.gif is a small transparent image that is replaced by id=”home”, the icon in the sprite, after all of the files are loaded.

You can find more information on W3Schools. Or simply make a sprite image yourself.

Use a Content Delivery Network

A Content Delivery Network (CDN) stores your images and other assets in different locations around the world so that users from all over the world can access the content quickly. It is a good idea to use a CDN, in particular if you have large images and videos and get a lot of traffic from different places in the world.

How:
1. Choose one of the many CDNs
2. Choose which files will need to be hosted by the CDN
3. Move your files to the CDN. For WordPress, the CDNs often provide a plugin.
4. Determine what the new name of your URLs should be. The best way to do this is by entering a CNAME such as cdn.example.com into your DNS records. Instead of the CDN URL, such as mycdn.com/328979njs9/image.png, you will then get cdn.example.com/image.png.
5. Make sure that your files are called up in the right way. Most providers have a solution for this. Alternatively, you can use a WordPress plugin for this.
6. Test whether everything works as it should.

PHP and database optimization

A lot of speed can be gained if you go even deeper into the code. Since you’re delving quite deep into the code now, you’ll have to be an experienced developer to make use of the tips we’re going to give you here. And, as always, always test in the Staging environment before you push changes to the live environment.

PHP

In the area of PHP there are a number of best practices that will make your site a bit faster. Get started with the following:
• Avoid unnecessary copies of your variables.
Your code is nicer if you use predefined variables with shorter names. Nevertheless, every added variable requires server memory that can’t be used for other processes. Only use each variable once.
• Don’t use any periods in an “echo” function
When you use the “echo” function with periods, PHP will merge the strings before they go to the output. This results in a loss of performance. Use quotes instead of parentheses.
• Don’t use double quotes in long strings without variables
If you publish strings with double quotes, PHP needs extra processing power to find any variables in the string. Joining individual strings also works with single quotes. This allows the strings to be processed faster than with double quotes.

Database

Some databases have thousands of rows and columns. It is therefore logical that a well-optimized database returns results faster, allowing a website to show information on the screen faster. Here are a few tips:

• Clean your database regularly

Your database may contain a lot of clustered data. That’s why it’s important to regularly clean up your database and re-index it. As a result, the server doesn’t need to use as much processing power. This is easy to do with phpMyAdmin. Select all your tables by clicking Check all and then checking Optimize table in the “With Selected” list. Plugins like WP-Optimize and Advanced Database Cleaner can also be used for this purpose.

• Set a limit for revisions

With every revision of one of your posts or pages, you generate extra noise in your database. You almost never need multiple revisions of your messages. To limit the number of revisions, you can use a plugin, or better yet, you can adjust your wp-config.php. Add the line

define('WP_POST_REVISIONS', 3);

to set the number of revisions to a maximum of three.

You now have more than 55 ideas for making your WordPress website faster. Speed is one of the most important factors in having a better position in search engines like Google, and even more important for converting website visitors better. Want to get started with these tips? We’ve made a free checklist that will make it easy for you to check every point.

Download our free 'The Ultimate WordPress Speed Checklist' now

Leave a reply