logo_arboreta_new
  • HOME
  • PROJECTS
  • SERVICES
  • ABOUT
    • WOODPILE BLOG
    • SITE IN JOOMLA
  • CONTACT

Optimizing WordPress Chapter One

May 7, 2018No Commentsgfisch

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…

Previous post Some Favourite Javascript Libraries
You must be logged in to post a comment.

Recent Posts

  • Optimizing WordPress Chapter One
  • Some Favourite Javascript Libraries

Recent Comments

    Archives

    • May 2018

    Categories

    • Coding

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
    © 2016 All rights reserved. UpSolution
    Manage Cookie Consent
    To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
    Functional Always active
    The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
    Preferences
    The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
    Statistics
    The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
    Marketing
    The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
    Manage options Manage services Manage vendors Read more about these purposes
    View preferences
    {title} {title} {title}