Speed of sites on wordpress is one of the weak side of wordpress, because default wordpress cache system is very simple and not effective. But power of wordpress is in it’s community and number of awesome free plugins. Today I will tell you how you can get A grade on gtmetrix, google page speed, increase your page speed. These rules are working great in 95% of cases.
View attachment 4496
Normally, on all standarts, css must load in head tags, js – in footer. This allows to render site correct, without shaking and jumping. But google doesn’t think so and recommend to load css inside content or asynchronously. Second way is hard to do on wordpress, and loading css inside content is not valid and not correct, so, I absolutely don’t understand this rule, which usually grabs near 10-15 points.
Render-blocking Javascript in above-the-fold content
You can try plugin Async Javascript to eliminate Render-blocking Javascript in above-the-fold content. Other possible plugin is WP Deferred JavaScripts
Note, this can cause problems with your scripts. So, use carefully.
Also, note, score – is just score, you should think about speed of site, not just score.
First of all, if you have slow hosting you can’t get good speed for your site even you are a master of caching websites. How to check your hosting? Go to your admin panel of wordpress and activate default theme and deactivate all plugins. If it loads not quickly – you need to change your hosting.
Also, sometimes, it’s important to have server localization close to your destination. For example, if site is for USA, make sure that your server is located near USA (or in USA). Because In some cases, when hosting is good, but because of it’s location, it works very slow in my country.
First things that you need to do – check your external scripts. If you use many ADS on page + social buttons + external scripts – you can’t get A grade, because you can’t cache external scripts and you will lose many points. But, even if you don’t get A grade, don’t upset. The most important thing – is your site speed. It must be under 4 second. 2-3 second – good, 1 second – awesome. Even if you get C grade, but your site loads under 1 second – this is ok.
Cache plugins for wordpress
I think I tried near 10 different cache plugins for wordpress. Some of them were awesome in past, but now is outdated. Currently, I think there are two good plugins which I used on sites. Wp Super cache and W3 Total Cache. I can recommend Wp super cache, because it’s much easier. W3 Total Cache – is all in one solution, but it’s very hard for novices to configure it correct + sometimes it has many incompatibilities with many plugins. After installing Wp super cache – just enable caching. Usually, all things work by default.
Next things that you need to do – css and js minifying. If you use W3 Total Cache, you can just enable minifying. There is no minify function in WP super cache, so you need to use another plugin. I tried many of them and find that the best is Better WordPress Minify which is working great with super cache plugin. Previously, I used Autoptimize, but it’s not compatible with many other plugins, including Buddypress, MDTF.
After installation, go to settings and enable all checkboxes. Check your site, especially different ajax functions. Sometimes, there are some incompatibilities. But, usually you can fix them. For this, go to settings and enable advanced settings and try to check Force JavaScript in <head> and Look for styles only in <head>
Also, sometimes plugin stores files as separate files. After 1 week of using you can have near 100 000 files and this can be more than your disc limit. So, click on advanced settings and see at the end Cached styles and scripts. If you have too much files here, you need to save and empty cache (do this each week).
Leverage browser caching
Next step is setting correct expiration data for static resources. For this, you need to edit file .htaccess
If you have enabled Seo by Yoast plugin, you can edit this file without ftp. Go to Seo – Tools – File Editor
In most cases you have some code in .htaccess which allows wordpress use permalinks. Left it as is and add such code after
Image optimization
Usually I make two things. First – EWWW Image Optimizer plugin which reduces your image size. It works on all new uploads, but also you can optimize all existing images. For this, go to Settings – EWWW Image Optimizer. At the top of page you will find link Bulk Optimize. Click on it and then begin Optimize Media Library and Optimize Everything Else
Second plugin for images – BJ Lazy load. It allows to load images only when user reach them in screen. Usually, works ok with default settings. Note, some themes already have lazy load option for images, so, try to use inner theme functions.
Also, you can try to configure CDN for images. But note, that in this case you can’t optimize them.
I made all changes, but still have bad points
Usually, this is because of external scripts. All external sources can’t be cached and don’t have expiration date on your server. So, try to avoid using many external scripts.
First of all, check your fonts. Many theme uses google fonts. But I see that many users add tons of google fonts on site. Use only 1, maximum 2 custom fonts on site.
Second – icon fonts. It will be better to upload icon font on your site and use it from your server than external source.
Third – most common. Too many plugins. I see this very often on client’s websites. Many people install plugin just because they read that this is must have plugins. For example, most of sites have jetpack with all enabled modules.
Remember – use only those plugins which you know. Disable all plugins which you don’t understand.
Some page speed test tool will take some points when your static scripts and css styles have query strings. Example, site.com/wp-content/themes/theme/style.css?ver=3.1 The problem is that this is default behavior of wordpress. You can delete this strings with plugin
Conclusion
These are the main things that you can do with site. Usually, after all steps you will get A grade. Of course, there are many possible reasons why you can’t get it and they are individual for each site.
These methods are good for most hostings, shared and VPS. If you have high load project, you maybe need some another methods with server optimization. For example, setting nginx + memcache.
View attachment 4496
Normally, on all standarts, css must load in head tags, js – in footer. This allows to render site correct, without shaking and jumping. But google doesn’t think so and recommend to load css inside content or asynchronously. Second way is hard to do on wordpress, and loading css inside content is not valid and not correct, so, I absolutely don’t understand this rule, which usually grabs near 10-15 points.
Render-blocking Javascript in above-the-fold content
You can try plugin Async Javascript to eliminate Render-blocking Javascript in above-the-fold content. Other possible plugin is WP Deferred JavaScripts
Note, this can cause problems with your scripts. So, use carefully.
Also, note, score – is just score, you should think about speed of site, not just score.
First of all, if you have slow hosting you can’t get good speed for your site even you are a master of caching websites. How to check your hosting? Go to your admin panel of wordpress and activate default theme and deactivate all plugins. If it loads not quickly – you need to change your hosting.
Also, sometimes, it’s important to have server localization close to your destination. For example, if site is for USA, make sure that your server is located near USA (or in USA). Because In some cases, when hosting is good, but because of it’s location, it works very slow in my country.
First things that you need to do – check your external scripts. If you use many ADS on page + social buttons + external scripts – you can’t get A grade, because you can’t cache external scripts and you will lose many points. But, even if you don’t get A grade, don’t upset. The most important thing – is your site speed. It must be under 4 second. 2-3 second – good, 1 second – awesome. Even if you get C grade, but your site loads under 1 second – this is ok.
Cache plugins for wordpress
I think I tried near 10 different cache plugins for wordpress. Some of them were awesome in past, but now is outdated. Currently, I think there are two good plugins which I used on sites. Wp Super cache and W3 Total Cache. I can recommend Wp super cache, because it’s much easier. W3 Total Cache – is all in one solution, but it’s very hard for novices to configure it correct + sometimes it has many incompatibilities with many plugins. After installing Wp super cache – just enable caching. Usually, all things work by default.
Next things that you need to do – css and js minifying. If you use W3 Total Cache, you can just enable minifying. There is no minify function in WP super cache, so you need to use another plugin. I tried many of them and find that the best is Better WordPress Minify which is working great with super cache plugin. Previously, I used Autoptimize, but it’s not compatible with many other plugins, including Buddypress, MDTF.
After installation, go to settings and enable all checkboxes. Check your site, especially different ajax functions. Sometimes, there are some incompatibilities. But, usually you can fix them. For this, go to settings and enable advanced settings and try to check Force JavaScript in <head> and Look for styles only in <head>
Also, sometimes plugin stores files as separate files. After 1 week of using you can have near 100 000 files and this can be more than your disc limit. So, click on advanced settings and see at the end Cached styles and scripts. If you have too much files here, you need to save and empty cache (do this each week).
Leverage browser caching
Next step is setting correct expiration data for static resources. For this, you need to edit file .htaccess
If you have enabled Seo by Yoast plugin, you can edit this file without ftp. Go to Seo – Tools – File Editor
In most cases you have some code in .htaccess which allows wordpress use permalinks. Left it as is and add such code after
Code:
# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
<FilesMatch \.(html|xhtml|xml|shtml|phtml|php|txt)$>
ExpiresDefault "access plus 0 seconds"
</FilesMatch>
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
<FilesMatch \.(ico)$>
ExpiresDefault "access plus 1 week"
</FilesMatch>
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
<FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
<FilesMatch \.(eot|ttf|otf|svg|woff)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
<FilesMatch \.(css|js)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
# Static assets
<FilesMatch \.(swf|pdf|doc|rtf|xls|ppt)$>
ExpiresDefault "access plus 1 year"
</FilesMatch>
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType application/msword "access plus 1 year"
ExpiresByType application/rtf "access plus 1 year"
ExpiresByType application/vnd.ms-excel "access plus 1 year"
ExpiresByType application/vnd.ms-powerpoint "access plus 1 year"
</IfModule>
<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>Image optimization
Usually I make two things. First – EWWW Image Optimizer plugin which reduces your image size. It works on all new uploads, but also you can optimize all existing images. For this, go to Settings – EWWW Image Optimizer. At the top of page you will find link Bulk Optimize. Click on it and then begin Optimize Media Library and Optimize Everything Else
Second plugin for images – BJ Lazy load. It allows to load images only when user reach them in screen. Usually, works ok with default settings. Note, some themes already have lazy load option for images, so, try to use inner theme functions.
Also, you can try to configure CDN for images. But note, that in this case you can’t optimize them.
I made all changes, but still have bad points
Usually, this is because of external scripts. All external sources can’t be cached and don’t have expiration date on your server. So, try to avoid using many external scripts.
First of all, check your fonts. Many theme uses google fonts. But I see that many users add tons of google fonts on site. Use only 1, maximum 2 custom fonts on site.
Second – icon fonts. It will be better to upload icon font on your site and use it from your server than external source.
Third – most common. Too many plugins. I see this very often on client’s websites. Many people install plugin just because they read that this is must have plugins. For example, most of sites have jetpack with all enabled modules.
Remember – use only those plugins which you know. Disable all plugins which you don’t understand.
Some page speed test tool will take some points when your static scripts and css styles have query strings. Example, site.com/wp-content/themes/theme/style.css?ver=3.1 The problem is that this is default behavior of wordpress. You can delete this strings with plugin
Conclusion
These are the main things that you can do with site. Usually, after all steps you will get A grade. Of course, there are many possible reasons why you can’t get it and they are individual for each site.
These methods are good for most hostings, shared and VPS. If you have high load project, you maybe need some another methods with server optimization. For example, setting nginx + memcache.
