[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

How to speed up WordPress for a faster, greener and eco-friendly site

Simple steps that you can take to speed up your WordPress content loading time

The web, if it were a country, would be one of the largest carbon emitters in the world. In this guide, I’ll share the best practices on how to speed up WordPress and do your part for a greener and more eco-friendly web.

The speed of your site matters a lot. And in several ways:

  • People are impatient. You only have a couple of seconds to hook a visitor and get them to stay on your site. You better make each second count.
  • Google’s Chrome browser is starting to identify slow loading sites and will warn potential visitors about them.
  • Page speed is one of the factors in Google’s search algorithm. A fast site can help you rank higher and get more visitors from search engines.
  • The lighter your site is, the less data is transmitted to each visitor and the less electricity is used. If you only serve the content that matters, your site will be emitting less carbon.
  • Third-party connections are one of the main reasons for slow sites. By reducing the number of tracking scripts, your site will be more ethical and human-friendly.

Here’s how to speed up your WordPress site, get the top score on Google’s PageSpeed Insights and help us move towards a faster, greener, more ethical and more environmentally friendly web.

Take a speed test to see why your site is slow

You may be wondering why is WordPress so slow. WordPress is actually one of the lightest and fastest of the big content management systems out of the box.

Brand new WordPress install with the default theme, no content and no plugins has a page weight of 40KB and scores 98 out of 100 on Google’s PageSpeed Insights. That’s very fast. It’s what we do with it that can make it slow.

Let’s check your current page load time and performance. Run the WordPress speed tests below to see how fast or slow your site loads right now.

These tools analyze the performance of your site, and provide useful advice on things you can do to optimize the loading time:

PageSpeed Insights: Created by Google. Provides optimized versions of your files too. Tests both the regular version and mobile version.

GTmetrix: Gives you a “waterfall” view of what files are loading and what requests are being made when a user visits your site.

Pingdom: Allows you to test the page speed of your WordPress site from Europe, Asia, North America, South America or Australia.

WebPagetest: Allows you to test from multiple locations and various devices. Provides first byte time scores too.

Test your site using all four of these and screenshot the results. Do the test for your home page and for one of your posts too as these normally make different calls.

Now you have an overview of the current performance of your WordPress site. This will be useful to benchmark against after we make all the improvements.

Here’s my top score on Google’s PageSpeed Insights. My site also scores high on Website Carbon, the carbon emission calculator, too.

If you follow the advice in this post, your site will score top scores on PageSpeed Insights and it will be less carbon emitting than the majority of other sites too.

Action Point: Run the speed tests and save the results so you can benchmark against them after doing the following changes.

Elements that affect the site speed

There are many factors that impact the page weight and the load time. Use an optimized design on a speedy host, don’t add too many images, videos and scripts and your site will load fast.

The overall page size and the number of requests are key metrics that determine the speed of your site. The requests include images, videos, fonts, analytics, advertising scripts and JavaScript files.

Here’s my site’s summary on GTMetrix. Notice the six requests and the total page size being 166KB.

GTMetrix score 100% with the total page size and number of requests low
GTMetrix score 100% with the total page size and number of requests low

Steps I took to make my site speedy and green

Here are the things I’ve done to speed up my WordPress site and get PageSpeed Insights score 100. If you take these steps, your site will get much faster too.

  • Moved my site to a greener and more environmentally friendly host. This is not difficult to do and many hosts even offer a free migration service.
  • Changed to a WordPress theme that makes fewer external calls by default, needs only a bit of JavaScript and has a tiny footprint.
  • To not add much additional footprint, I’ve decided not to use Google Analytics, Google fonts, social media sharing buttons, intrusive pop-ups, auto-playing videos or banner advertising.
  • Implemented lazy loading on images and videos, which means that they do not load unless you scroll down to the areas where they are in.
  • All images I use in my posts have been resized to the correct size and compressed too. Their weight is much reduced now even though there is not much of a difference to the human eye.
  • I minimized the number of plugins that I use. And when I do install a new plugin, I find the one with the lightest footprint possible.

In short, to keep your WordPress as fast as possible, you should think like a minimalist. Consider simplicity and user-friendliness when making any decisions.

Your task is to understand all the requests your site is making. What is the purpose of these requests and can your visitors live without them? Then remove and eliminate all the unnecessary elements.

Ok, now you know what’s necessary to do. Let’s get started making changes.

Action Point: Be a minimalist and a website load speed freak. Consider your page load time when making any decision.

Choose a green, eco-friendly host

My site is reader-supported. If you make a purchase through some of the links on my site, I may earn an affiliate commission. This helps keep my site advertising and tracking-free. It does not change the price you pay. I only recommend products that I truly believe are valuable. Learn more.

WebPageTest perfect scores with a low first byte time
WebPageTest perfect scores with a low first byte time

In the speed test tools, you’ve seen the “first-byte time” metric or the advice to “reduce server response time”. This one is entirely down to the hosting company and the server your site is hosted on.

Choosing a good host is arguably the best thing you can do to have a speedy site.

You want a host that specializes in WordPress, guarantees a 99% uptime, a server with the fast response time and unlimited bandwidth usage.

There are many hosting companies on the market. Prices range from a few dollars per month to hundreds of dollars. It’s not an easy market to navigate for a beginner.

It’s important to know that as long as you keep your site light and lean, you can have a speedy site even on one of the affordable, shared hosting plans.

My site is the proof of that. See my uptime and load time scores. Uptime basically tells you what percentage of time your site is up and available to visitors.

Monitor your web host server uptime/downtime

Keep an eye on the uptime of your web server. The more reliable your web host is, the higher uptime you will have and your downtime will be minimal if any at all.

WordPress runs the Jetpack plugin which allows you to activate the “Monitor” add-on that continually checks your server and notifies you in case of downtime.

I also use StatusCake (freemium) for a more detailed analysis of my web host uptime and loading time tested from different locations around the world. Like this:

Recent server uptime speed tests
Recent server uptime and page load time speed tests

Action Point: Keep an eye on the server response time of your host. Next time it’s the time to renew, consider moving to a more WordPress specialized and greener host.

Use a lightweight WordPress design theme

All WordPress themes are not equal:

  • Some have more features than you’ll ever need.
  • Some have bad, bloated, old and inefficient code.
  • Many have unnecessary images, external fonts and JavaScript file requests.

All these contribute unnecessary load to your site even before you add your own customization and your content.

You should choose a light and clean coded WordPress theme with a right balance between the looks, functionality and speed. You will see significant improvement immediately.

5 fastest WordPress themes

I’ve handpicked these minimalist, lightweight and mobile responsive options for you to consider.

Several of these lightweight WordPress themes I’ve used for an extended period of time in the real world action on this site itself. I use Twenty Twenty right now.

Susty: Probably the lightest theme in the world. Everything unnecessary has been removed. Only 6KB page weight in total.

GeneratePress: The total size of this theme is less than 30KB. Free to use and you can upgrade for extra features.

Arke: This is a minimal theme without any settings, widgets and sidebars. Scores 100 by default on pretty much any of the tests.

Astra: Another lightweight option under 50KB in total size. Free to use but you can upgrade for additional features.

Twenty Twenty: This is the official theme made by the WordPress team. Lightweight and minimal while having great modern design.

Activate any of these WordPress themes and do the site’s speed test again. Look at the total page size and on the number of files requests.

You will see a boost in your scores using any of these five themes alone.

Action Point: Install and activate one of the five lightweight themes recommended. Run the speed tests and compare the difference.

Compress and resize your images

High-resolution images are an integral part of web content. They brand your site, and they keep your visitors interested in your posts. But images that are not optimized can be huge in size and will dramatically impact the loading time.

Your photos should be big enough to make an impact, but not so large that the file size prevents a quick page loading time. Here’s what you can do:

  1. Resize the images to the exact dimensions that you need in your content. Don’t upload the pictures in the size that they are produced in your camera.
  2. Compress the images without losing image quality. This reduces their size but they still look the same to the human eye.

Here are three options that can help you optimize your images:

  • Offline: ImageOptim is a free, open-source app available for Mac, Linux and Windows. You can compress your images using it before you upload them to WordPress.
  • Browser: Squoosh is a free browser app created by Google. You can resize and compress images individually before uploading them to WordPress.
  • WordPress: ShortPixel freemium plugin. It optimizes your existing images in bulk. It also compresses images as you upload to WordPress. 100 images per month are free and that should cover most sites. If you have a huge archive you want to optimize, you can make a one-time purchase of 10,000 image credits for $9.99. That’s what I’ve done and the credits never expire. It’s a much more affordable option compared to a monthly subscription that alternative providers offer.
My ShortPixel WordPress plugin image compression settings
My ShortPixel WordPress plugin image compression settings

Action Point: Bulk optimize your image archives and make sure to resize and compress all the new images you are uploading.

Implement lazy loading for images and videos

If you have an image or video heavy site like a fashion blog or a YouTube video blog, you should use a lazy loading plugin.

Lazy loading only loads images and videos that are in the browser’s view (i.e. above the fold). It loads the rest only as the visitor scrolls down the page.

It makes your page size smaller and reduces the number of calls. The web is slowly turning to lazy loading by default. Chrome and Firefox browsers do it and so does WordPress too.

Activate a caching plugin

Cache plugins speed up WordPress by generating static files and serving those instead of the WordPress default dynamic files.

This means that with a caching plugin enabled your files don’t need to be refreshed every time they are viewed.

Install and activate a cache plugin and you will immediately see an improvement in your website’s speed.

There are many WordPress cache plugins that are used my millions of sites. I recommend Litespeed Cache as it’s simple to use and it works out of the box. Just activate it and do another speed test.

Action Point: Activate caching plugin such as the Litespeed Cache to cache your static files.

Use Autoptimize to aggregate and minify CSS and JavaScript

Another tip you might have seen in the speed test tools is to minify CSS files, HTML and JavaScript.

Minification reduces the size of your resources by removing unnecessary or redundant data and characters without affecting the functionality.

Autoptimize plugin is a great solution. Activate it and tick to optimize HTML, JavaScript and CSS code. It aggregates all the files so you have much fewer requests.

Action Point: Use Autoptimize to aggregate all your files and to minify them.

Enable GZip compression (optional)

Your speed test tool might give you the suggestion to “enable GZip compression”. To fix this, you need to edit a file on your server. Insert this code at the end of your .htaccess file to enable compression:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Leverage browser caching (optional)

This is the code to insert at the end of your .htaccess file in case you see the suggestion to “leverage browser caching” in your speed tests.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Eliminate render-blocking JavaScript and CSS in above-the-fold content (optional)

Insert this code in your theme’s functions.php file within the “Theme Editor” menu in the “Appearance” settings in your dashboard.

It will help you fix the “eliminate render-blocking JavaScript and CSS in above-the-fold content” message in your tests.

/*function to add async to all scripts*/
function js_async_attr($tag){

 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Use a CDN (optional)

You also have the option to enable a free CDN (Content Delivery Network) support to offload static files to fast data centers around the world.

If your server is located close to the location of your target audience, the chances are that you won’t see much benefit from a CDN. But it’s still worth trying.

Site Accelerator, a part of the Jetpack plugin that Automattic (the company behind WordPress) runs, can speed up both your statics file load times and your image load times. Here’s how:

  1. Install and activate the Jetpack plugin in the Plugins section of your WordPress admin
  2. In the left-hand side menu click on Jetpack and choose “Settings”
  3. In “Performance & speed” turn on “Enable site accelerator” and choose to “speed up image load times” and “speed up static file load times”.

Action Point: Enable the Jetpack Site Accelerator CDN and test to see what difference it makes.

Choose more efficient versions of plugins you use

Do WordPress plugins slow down your site? The answer is yes. They can do. I love WordPress plugins as they allow me to add any feature that I can imagine.

The potential issue is that the more plugins you add, the more CSS and JavaScript requests you have and this hurts the page loading speed.

Consider whether the plugin truly adds any value to your site before installing it. You should try to avoid using a plugin when a bit of modification to your theme will get you the same results.

I’m currently using only a handful of plugins, down from having some 25+ not too long ago. A ballpark figure is to try to keep your WordPress to 10 or fewer plugins activated at any time.

Check the page speed impact of WordPress plugins that you use

Measure the effect each plugin has on the loading time. Run the speed test and compare your performance before and after installing a new plugin.

Keep an eye on the extra page size and the number of requests that the plugin has added. Consider removing any of the plugins that give you a slow website. Always deactivate and delete any plugins that you do not use.

Consider a lightweight plugin option

If you insist on having the feature that the plugin can add, consider a more lightweight alternative. That’s the great thing about WordPress. You’re never stuck with one option only.

Two of the main culprits for slow WordPress sites are the site analytics and social media sharing buttons. They add a lot of weight to each page and several external requests too. There are great alternatives though:

  • Consider using a lightweight option like Scriptless Social Sharing instead of the official sharing buttons. They still look beautiful but you add only a tiny bit of extra weight.
  • Consider activating a lightweight and WordPress-native analytics solution without any third-party calls such as Koko Analytics. Or Plausible Analytics (this is the product I’m working on). You get the main stats without much extra weight and you’re respecting the privacy of your visitors too.

Action Point: Reduce the number of plugins that you use and choose lighter options.

Keep WordPress, plugins and themes updated

WordPress gets regularly updated with cleaner and leaner coding and functionality. You should always make sure to keep your WordPress and its plugins updated to the latest version.

It’s an easy process that is automated for security updates on WordPress by default and most good hosting companies should allow you to update automatically and WordPress by default does too.

Action Point: Make sure to update your WordPress, themes and plugins. Set them to be automatically updated to make this easier.

Optimize the WordPress database

You should make sure to optimize the WordPress MySQL database too. This is where WordPress stores and organizes all your data.

WP-Optimize plugin helps you run regular database maintenance without any tech know-how and with one click on a button. It cleans all post revisions, spam comments and reduces the size of your database.

Aim to set it to do this process automatically at least once per month.

Action Point: Optimize your WordPress data on a monthly basis using WP-Optimize.

And that’s it. Aim to implement the majority of the steps recommended as they will make a difference and will help you speed up your WordPress site. Top page speed scores are waiting for you.

Your visitors will love you for your fast website and a more efficient user experience and so will Google and other search engines. And you’ll be making a difference for a greener and more environmentally friendly internet experience too.

Published
Categorized as Posts

By Marko Saric

I’m on a mission to help you share what you love, get discovered by people who love the same things too and make the web a better place at the same time. Find me on Twitter and Mastodon too.