Optimizing WordPress Chapter One

How can I get WordPress to perform better, faster, higher in rankings? Chapter one in Worpress optimization.
Some tips from my experience.

Many wordpress sites get into “Plugin Hell”. There are so many great plugins, to make all kinds of great effects, add galleries, social buttons, do google analytics and so on.
But many plugins call their own CSS files and their own javascript files, sometimes from other domains.
Next thing you know there are 20 CSS and 20 JS files being called. Every call for a file adds to the load time. Every file adds load time. What can we do?

1) Review your site.

Two of my favourite sites are https://developers.google.com/speed/pagespeed/insights/ and  https://tools.pingdom.com/
Google will list many hints for optimization. Pingdom will do the same but includes a ‘waterfall’ of all files called, how long they took and much more.

2) Review your plugins

Do you need all those effects? If your theme has a slider, why load another one?
Are you loading two plugins that do the same thing?
Is there a better plugin? One that does not load so many other files?

3) Redirects

Decide if you want www or non-www and do the redirect in .htaccess.
Are you using https? (and why would you not?). Redirect to https in .htaccess.
It’s wasteful to load the site only to redirect.

Example .htaccess

# goal is to redirect without www to https
<IfModule mod_rewrite.c>
# Section for two languages

RewriteEngine On

# language starts with FR
RewriteCond %{HTTP:Accept-Language} ^fr [NC]
RewriteRule ^$ https://mysite\.com/fr/accueil/ [L,R=301]

# else redirect to the English version
RewriteRule ^$ https://mysite\.com/en/home/ [L,R=301]


# section for https
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_USER_AGENT} ^(.+)$
RewriteCond %{SERVER_NAME} ^www\.mysite\.com$ [OR]
RewriteCond %{SERVER_NAME} ^mysite\.com$ 
RewriteRule .* https://mysite\.com%{REQUEST_URI} [R=301,L]
Header add Strict-Transport-Security "max-age=300"


# if we go this far and it is still www, redirect to non-www
RewriteEngine On
RewriteCond %{SERVER_NAME} ^www\.mysite\.com$
RewriteRule .* https://mysite\.com%{REQUEST_URI} [R=301,L]
Header add Strict-Transport-Security "max-age=300"
</IfModule>

4) Image sizes

Many big jpg’s can be reduced by resaving with a lower quality. Images can be compressed.
Load different size images for different screen sizes.

Example css

/* mobile-first */
.homepage-slider .slider1 {
    background: url("../../../images/slideshow/home_768px.jpg") center/cover no-repeat;
}
@media (min-width: 768px) {
    .homepage-slider .slider1 {
	background: url("../../../images/slideshow/home_992px.jpg") center/cover no-repeat;
    }
}
@media (min-width: 992px) {
    .homepage-slider .slider1 {
	background: url("../../../images/slideshow/home_1185px.jpg") center/cover no-repeat;
    }
}
@media (min-width: 1185px) {
    .homepage-slider .slider1 {
	background: url("../../../images/slideshow/home_1600px.jpg") center/cover no-repeat;
    }
}
@media (min-width: 1600px) {
    .homepage-slider .slider1 {
	background: url("../../../images/slideshow/home_1920px.jpg") center/cover no-repeat;
    }
}

5) Optimize

My favourite plugin at the moment for this is Autoptimize.
It can put all your CSS and JS into two files. You are probably using jQuery (you and half the internet) and it may have to excluded so it can load first.
If possible load these in the footer instead of the head. Autoptimize lets you paste in some CSS to load ‘above the fold’ but this may be a frustraing excersice, unless you know your template really well.

Conclusion

Don’t worry if you do not get 100% in all areas at sites like Pingdom! You have to load some things to have a great site.
If you have reduced the number of files called from 50 to 25 and the size of the site from 3 MB to 1.5 MB, you have done a lot!
Though there’s always a bit more…