How to speed up a Wordpress website? This is a commonly asked question, with lots of different approaches and various experiences.

A few months ago I have reactivated my personal blog. Yes, the one you are reading right now. I am trying to write high quality technical articles. However, I also want to make my web site technically optimized.

Therefore, I selected WordPress as a good and simple CMS (Content Management System) and decided to optimize it for speed.

This article explains how to speedup the WordPress website and how to accomplish similar results as I have accomplished here.

• Firstly, I will show you the results that I have accomplished.
• Secondly, I will write about speed concerns and concepts I have implemented.
• Finally, I will discuss about possible improvements which I plan to do in future.

WordPress Speedup Results

I have applied common “How to speedup WordPress website” approaches to this blog and I got these results.

• Firstly, homepage loads in 0.6 seconds (under 1s load) – detailed speed results here
• Secondly, single post loads in 0.8 seconds (under 1s load) – detailed speed test results here
• Thirdly, single page loads in 0.5 seconds (under 1s load) – detailed speed test results here
• Furthermore, PageSpeed score is 98% (this is Google speed score which is known to affect Search Engine Optimization – SEO).
• Finally, YSlow score is 93% without Content Delivery Network (CDN) setup (this is Yahoo speed score, which is known to affect SEO for Yahoo).

How to speedup WordPress website step by step?

Update your PHP version!

Yup, let’s start with this one.

At SymfonyCon 2019, Diana Ungaro Amos from Blackfire.io had a great presentation “PHP, Symfony and Security”. I have already wrote an detailed article about SymfonyCon here.

However, here are some highlights related to PHP versions and updates:

• Huge percentage of PHP 5.x sites
• Big percentage of PHP 7.0
• 79% of web is using PHP, but 42% is 7x.
• 33% of the web is running PHP 7
• 47% of 33% is 7.0 or 7.1
• Leaving us with only 17% of PHP Web applications are running updated and safe versions of PHP.

Also, there are lots of articles explaining speed benefits between versions of PHP.

Just by switching WordPress from PHP 5.6 to PHP 7 decreased the website load time by 50%.

Source: https://geekflare.com/wordpress-php-fpm7/

Simplify your design

Yes, this is the most important thing.

If your design is complex and filled in with loads shiny animations, popups, fancy scripts for doing lots of different things your site will be very hard to optimize.

It is not only about performance optimization. Think about your visitors. They are visiting your web site to read high quality content and not to be amazed by your triple-loop-javascript-unicorn-magic-maker that loads for 2 seconds and stops everything else.

I have examined several different WordPress themes (didn’t have time to code one from zero) and selected one with minimal design but with a combination of features that I wanted at the moment. Anything else, I can simply code or add.

Tip: I did not go for any “drag and drop” or “all in one” themes. These popular one size fits all themes are usually very bloated.

Simplify your features

Decide which features do you actually need.

If you are planning to develop 10+ features, don’t do it all at once. Develop one feature and optimize for speed, UX and security. Then publish, inform your visitors. Furthermore, give them some time to enjoy fancy new feature and then make next one.

Tip: Make a quality bar and stick to it! Meaning, decide about loading speed, number of requests, sizes of pages etc. and try to work your features around it.

Sometimes it will be hard to fit in features within expectations and it will take extra effort, but it will pay off long-term.

Examples of features that you can reconsider in your WordPress site:

• Comments – do you really want them on your posts at the beginning?
• Login/Register features – are you working with registered users and do you need them atm?
• Traceback and pingback – can be disabled in many cases
• Footer with loads of widgets – Why?
• Shiny sidebar with loads of widgets or simple sidebar or no-sidebar where visitors can focus on content.
• Cookies accept popup or discrete footer message?
• Newsletter popups or simple call for newsletter at the beginning or end of the post?

Setup git repository for your project

Ok, setting up git repository is not really a speed optimization feature but it is important. And yes, WordPress way of versioning stuff (plugins etc.) is SVN. I know, I know.

Buy really, why should you use GIT?

Well, when you implement new speed optimization approaches sometimes you will get good results. However, sometimes you will get bad results, as decreased performance.

In these cases you want to have history of your code changes, so you can compare what was changed and what went wrong.

In short, these are benefits of using GIT repository for your web site:

• You get a full control of your code changes (code versioning)
• If you decide to hire external help or consultants, you get clear view of who changed what.
• GIT repository also acts as a backup of all your code (but it should not be a substitute for backup!)
• GIT is a standard in software development, you should really use it.

Tip: One important thing when using git is to setup a git ignore file properly. With .gitignore file you decide which files you want to synchronize with your git repository and which ones are only local files.

This is example of .gitignore file that I usually use (at least as a basis).

# ignore everything except .gitignore
/*
/*/
!.gitignore
!readme.md

# Commit wp-content directory
!wp-content/


# ignore everything in the "wp-content" directory, except:
# "mu-plugins", "plugins", "themes", "languages", "uploads" directory
wp-content/*
!wp-content/mu-plugins/
!wp-content/plugins/
!wp-content/themes/
!wp-content/languages/
!wp-content/uploads/

# ignore these plugins

# ignore specific themes
wp-content/themes/twenty*/

# ignore log files and databases
*.log
*.sql
*.sqlite

How to speedup WordPress website: Enable GZIP compression in your .htaccess file

Your server has to deliver the files to your visitors in order to display the website. For big files, this delivery will take more time.

With GZIP compressions, file sizes will be reduced (compressed), therefore making them faster for delivery.

You can find detailed description on how to setup GZIP compression within various resources:

• How to enable GZIP compression by ThemeSkills
• How to setup caching and GZIP by Medium

Essentially, this is a part of .htaccess code that you will find in most of online resources that describe setup of GZIP compression.

# GZIP compression for text files: HTML, CSS, JS, Text, XML, 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

How to speedup WordPress website: Cleanup WordPress Header

Cleaning up WordPress header is important because of two reasons. Firstly, it will reduce number of unneeded requests.

Therefore, your web site will load faster because there is less requests to be loaded.

Furthermore, removing identification data from your header is also considered a security improvement. Why? Well, because attackers will not be aware of all the details of your website.

Here is a list of several considerations when you want to cleanup your WordPress header:

• Remove WordPress version number
• Remove wlwmanifest link
• Disable XML-RPC RSD link from WordPress Header

Detailed explanation on how to cleanup your WordPress header can be found here.

Setup CSS and JS minification, this one is important!

What is a JS and CSS minification?

That is removing all the unnecessary parts from your code in order to reduce bandwidth and load your site faster.

While ago I wrote a detailed article on CSS and JS minification topic.

Read the article and try to apply CSS and JS minification on your site.

Setup proper Caching

When your visitors open your site, your server sends lots of files to their browser. These files include html, css, js files, images, scripts, anything.

Now, when your visitors visit your site again, browser would ask for all of these files again.

That is when the caching comes to play.

Caching mechanism talks to browser and explains which files were changed (or timed out) so browser can pickup only needed files.

For example, if site has 100 files, and only 10 files were changed then browser only needs 10 files to show correct state of the page. So, in this case caching can significantly decrease number of needed files (10 out of 100).

For example, I am using Autoptimize plugin to setup my cache.

Details about Autoptimize plugin can be found here.

Note: I am not affiliated with Autoptimize in any way, I just use this plugin because I like it. You can find any other WordPress caching plugin and you will probably get a very good results.

In any case, these are important caching aspects:

• Optimize JavaScript Code
• Aggregate JS-files
• Optimize CSS Code
• Aggregate CSS-files
• aggregate inline CSS
• Generate data: URIs for images
• Optimize HTML Code
• Remove HTML comments

Store Google Fonts locally

Google Fonts are cool, nice and shiny.

If you use Google Fonts from remote repository you will end up having lots of requests (which will slow down your web site loading).

Therefore, store google fonts locally and reduce number of external requests.

This will have a big impact on your performance.

Scale images

When you upload images to your WordPress, try to keep their sizes identical to locations where you want to use them in your template.

Considerations:

• Each uploaded image will autogenerated thumbnails depending on your template
• Keep your template Media settings optimized
• Utilize free plugins for image scaling (watch out for server performance)
• Try, measure, repeat

Scaling images is important because if you reduce size of images, loading time will reduce.

Further optimizations

At the moment, I am very satisfied with the performance of this site.

However, there are still things to do.

Without going into much details, I will just make a list here:

• Setting up a Content Delivery Network (CDN)
• Further improve of Time To First Byte (TTFB)
• Setting up Object Caching
• Setting up Lazy Load of images

Once I implement any of these features I will make a new blog post, so stay tuned! I hope you enjoyed this small optimization use case.

The post How to speedup WordPress website under 0.8s? appeared first on Milan Latinovic.