Tips to make your WordPress website faster

It has been researched and proven that website visitors have an increasingly shorter attention span. 40% of your visitors will have dropped out after loading times of 3 seconds or more. Amazon was able to get 2% more conversion by making their website just 1 second faster. So the faster your website, the better.

By following these tips, step by step you can make your website faster. We start at the beginning, namely with tips you can always apply. Get the most out of your website by following as many tips as possible.

Website Management

Remove unnecessary plugins

Why fill your website with plugins that are unnecessary? Every plugin that installs in your website causes your website to take a little longer to load.

What to do: look for unnecessary plugins and remove them. It is important that you not only deactivate them, but actually remove them.

Use caching

Caching allows you to store your website data in a different place so you can have faster access to data. Your browser just needs to load the copy from the cache. This happens very quickly. Just make sure your website’s code is good and error-free, or you won’t get much use out of caching.

What to do: Caching happens in 3 layers. For the first 2 layers, you can use W3 Total Cache, WP Rocket or WP Super Cach.

Use WTTP/2

WTTP/2 will make loading your website over a secure connection even faster. To take advantage of this new technology, all your pages must be able to load through a secure HTTPS connection.

What to do: Your web host must offer this technique. With some web hosts like Savvii, HTTP/2 is already set by default. Ask your web host which HTTP version they offer.

Reduce the size of your page

Your page size should be as small as possible. An average Web page is 2.3 MB in size. This is a fair amount that your browser has to load for first-time users of your Web site.

What to do: images take up an awful lot of size. So you can start by putting fewer images on your website and removing the unnecessary ones. Nowadays, the slogan “the less the better” applies. Navigation is not necessary for your website. Remove anything that is not necessary.

Make the size of your cookies as small as possible

All the information your cookies collect must be sent with each request. That is, all this information must be loaded and read by the browser.

What to do: make the size of your cookie maximum 4 kilobytes. With this, you still have plenty of room. Use local storage if you want to store information with a visitor.

Keep your software up-to-date

Like all software, WordPress also gets regular updates. With almost every update, the code is slightly optimized again, making your website load faster. You need to update your plugins regularly in addition to the WordPress core.

What to do: Always update your infrastructure as soon as possible. That way, you’ll immediately be using the latest versions of WordPress and plugins.

Use Google Accelerated Mobile Pages (AMP)

AMP makes mobile pages load faster. This is important as being mobile becomes increasingly important. Google stores all your pages in its cache. So your browser just needs to load the copy into Google’s cache.

What to do: You can easily install the AMP for WordPress plugin. Thus, an AMP variant of your website is created, and this is done automatically.

Use good hosting

The loading time of your website also has to do with the hosting you have chosen for your website. If you have a small website, you can share your hosting: shared hosting. If you have a website with a lot of complicated code or a website that gets a lot of visits, it’s best to use a VPS. Thus, all the resources of that server are solely for your website. This will help your website perform better.

What to do: start looking for good hosting. Make sure you can get a wide spectrum of shared and VPS packages with the hosting you choose.

Distribute comments across multiple pages

It is good that many readers comment on your articles. This means that your content performs well and can attract attention. There is a downside to having lots of comments with your articles, though: it means your pages have to load more data, which means it will take longer for the page to load. The way to eliminate this disadvantage is to spread your comments across multiple pages.

What to do: Go to your WordPress admin environment. In Settings -> Comments, check “Distribute comments across multiple pages. Then you select how many responses per page you want to show and how you want them sorted.

HTML/CSS/JavaScript

Head

This section contains important information for your browser. This information must be picked up first to enable the loading of your page.

Place all CSS resources in the head

To give your website faster loading results, all CSS resources should be declared as soon as possible in the HTML document. The browser then discovers the <link> tags as quickly as possible and sends out the CSS request immediately.

What to do: Simply change the order of the HTML code. Put all CSS information at the beginning, only put the rest of the code after that.

Set cache headers

All files with a cache header, can see in it how long the browser is allowed to keep the files before they need to be downloaded again.

What to do: use Cache-Control: max-age=31536000 in the configuration of your web server. It is important to first distinguish between static and dynamic content. It is better that you cachet dynamic content briefly or not at all.

Avoid redirects

A website with redirects will load much slower than one without. This is especially so with mobile sites.

What to do: try using a 301 or 302 redirect at the server level if you really can’t avoid certain redirects.

HTML

Check your links

If you have links on your website that no longer work with an external tool, it makes for a worse user experience. So make sure you remove all your broken links.

What to do: scan your site occasionally with one of these tools:

• ScreamingFrog
• Brokenlinkcheck

Set up error pages

Make sure you have pages that people come to when error messages occur; error pages.

What to do: In WordPress it is set so that by default your visitor is sent to 404 page when he wanted to visit a page that was not found. You can change the format or content of this page yourself.

Test your site with Adblockers

As more and more people use Adblocker, it is important that your website can still function with someone using Adblocker. It must still be possible to navigate, all content must still be visible… Your website may become slower if certain content is blocked but because of a script is continuously loaded.

What to do: test your own website by installing Adblocker. That way you can see for yourself if everything is working properly.

Minimize HTML

The fewer unnecessary characters in your HTML, the faster it will load. So avoid blank lines, unnecessary spaces, and so on.

What to do: you can use tools such as minifier or WP Rocket.

Do not host a video in your own site

As videos become increasingly popular, companies want to take advantage of this by putting videos on their websites. Hosting videos unfortunately costs you a lot of bandwidth and it slows down your website.

What to do: you can best use video platforms out there. Some examples are YouTube, Vimeo or Dailymotion.

CSS

Good formatting is important. The styling of your website is in your CSS files. Because websites often work with many different styles and components and are getting bigger and bigger, CSS files are also getting bigger. You can gain a lot by simply optimizing your CSS files.

CSS minimization

You can, like HTML, make your CSS files smaller. Your website can load faster if you reduce your files and omit unnecessary information.

What to do: consider whether all the codes that are in your CSS should be sent along for each page. Much code is redundant or old. Next, use the CSS Compressor tool. This removes the last unnecessary bits of code.

Use tree-shaking

Remove all loose code not associated with a page from your file. That way, you are left with only the useful parts that are applicable to your page.

What to do: look at the Chrome Coverage report to see what percentage of code is not being used. If a lot of code is unused, you can use JavaScripts tools such as PurifyCSS or uncss. With these tools, you can easily remove unnecessary code.

Use critical path rendering

Without markup, your website will load the fastest. Unfortunately, this is not user-friendly. CSS requires website visitors to wait for it to load. You don’t have to load all the CSS in to show useful information on the screen. This allows your website visitor to see useful information faster.

What to do: Critical path rendering lets the information that the user sees directly and thus is at the top of the page load first. Use lazy loading for your images. Also ensure that CSS that is less important to a particular user is loaded later using non-blocking CSS. Or use the preload directive.

Use the preload directive

Because of Preload, browsers will load certain components permanently. Other parts of the website are coming up that need them and then should no longer wait for this.

What to do: use <preload> in the reference link of your stylesheet. Add with <onload> function to which stylesheet the preload belongs and the browser will start loading fixed.

Javascript

Scripts require a lot of resources from the server. Thus, they cause loading time delays. You can use Javascript in many clever ways.

Non-blocking Javascript

Non-essential scripts should be deferred. This way, the browser has to do a smaller amount of work to display the initial page.

What to do: for each script, it’s different what works and what doesn’t. Some tips:

• Use <script defer src=”script.js”></script>in the head of your HTML. This loads the script while building the page, but only executes it when the build is complete.
• Create your own script in which you instruct the code to load the .js after your entire page loads.

Reduce and combine external scripts

Make sure you only have scripts running that are really necessary for the usability of your website. Also keep in mind that not all scripts need to be loaded separately to work. The fewer external scripts running, the faster your site will work.

What to do: copy multiple files into one file. Check your browser’s Developers Tool Console to see if everything is working as it should.

Images

What many people often overlook but what may provide the most speed: images. Often they are unnecessarily large, of the wrong size or type, or loaded incorrectly.

The correct file types

There are many different file types for images. For any application of images, you need to know if this is the right one. Some file types:

• GIF: For simple online images such as logos in just one or two colors. Transparency possible.
• PNG: For simple pictures or images with color gradient. These images have better quality that GIF. Transparency possible.
• JPEG: For images and photos with lots of depth, shadows, colors and overflow. No transparency possible.
• WebP: Supported only by Google Chrome. Improved version of JPEG.

What to do: think carefully before using an image. Know what transparency you need, what the type of image is, etc.

Lazy loading

When you want to load an image, the browser looks where the image is and starts loading the image. The more images, the more the browser has to load and thus the longer the load time is. Even though these are 100 photos that the user will not even see, they must be loaded first. Lazy loading will first load a temporary, small image. The real image is stored in the cache. Only when the original image is to be displayed does the browser retrieve the image from the cache. So in this way, you ensure that images that are not displayed on the screen do not load until your visitor scrolls to them.

What to do:

• For WordPress, Infinite Scroll is available. Actually, this function solves the problem differently, by pagination, but it does give the same effect
• A lazyloader JavaScript with good responsive image support

Use a Content Delivery Network (CDN)

A Content Delivery Network stores your images in different places around the world. This allows users around the world to quickly access content. Especially if you get larger images, videos or a lot of traffic from a particular place in the world, it’s smart to use a CDN.

What to do:

1. Choose one of the many CDNs
2. Choose which files should be hosted by the CDN
3. Move your files to the CDN. For WordPress, CDNs often provide a plugin.
4. Determine what the new naming of your URLs should be.
5. Make sure your files are called correctly. You can use a WordPress plugin for this
6. Test if everything works as it should

PHP and database optimization

PHP

Avoid unnecessary copies of your variables.

Your code is prettier when you used predetermined variables with shorter names. Yet each added variable requires server memory that cannot be used for other processes. Also, use each variable once.

Do not use dots in an “echo” function

When you use the “echo” function with dots in it, PHP is going to merge the strings before they go to output. This costs performance. Use commas instead of parentheses.

Do not use double commas in long strings without variables

When you announce strings with double commas, PHP needs extra processor power to search for any variables in the string. Merging separate strings also works with single commas. As a result, strings are processed faster than with double commas.

Database

Some databases are thousands of rows and columns in size. So it makes sense that a well-optimized database will return results faster, allowing a Web site to display information on screen faster. Some tips:

Clean up your database regularly

Your database may contain a lot of clustered data. Therefore, it is important to regularly clean up and re-index your database. As a result, the server needs to use less processor power. This is easy to do with phpMyAdmin. Select all your tables by clicking Check all and then check Optimize table in the ‘With Selected’ list.

Set a limit on revisions

With each revision of one of your posts, you generate additional noise in your database. Almost never it you need multiple revisions of your posts. To limit the number of revisions, you can deploy a plugin, or even better, modify your wp-config.php. Add the rule to set the number of revisions to a maximum of three.