The foundation
It’s a good starting point to get a lightweight theme, which makes as less database queries as possible and which has no JavaScript frameworks. If you start from scratch, delete all unnecessary stuff like themes and plugins. For a good speed result you have to use a minimum of plugins. Limiting the number of posts on the home page and showing only excerpts increases the speed also.
Avoid @import
It’s a good practice to avoid @import for your child CSS.
Instead of using : @import url(“../path to the parent theme/style.css”); in the child CSS, add the following code into the functions.php.
/* adds the child style sheet to the parent style sheet */
function add_require_scripts_files() {
wp_enqueue_style('layout', get_template_directory_uri().'/style.css', array(), '1.0.0', "all");
}
add_action( 'wp_enqueue_scripts', 'add_require_scripts_files' );
Permalink structure
Most WordPress Websites set their permalink structure for their SEO benefits to /%category%/%postname%/ or /%postname%/. However, the WordPress codex states that using such a structure forces WordPress to distinguish between post and page URLs, which makes the Web server work harder and increases the page load time.
Optimize the permalink structure for speed by starting with a numerical field, followed by category or postname. Most major sites have adopted a “year /month / postname” structure that offers fastest possible site performance while still being SEO friendly.
It looks like this : /%year%/%monthnum%/%postname%/
The database
There are simple but useful steps to optimize the database.
1) Turn off or limit the number of post revisions
If you want to turn them off, add the following line to the wp-config.php file : define('WP_POST_REVISIONS', false);
If your prefer to limit them, add in your wp_config.php file the following line :
define('WP_POST_REVISIONS', no_of_revision);
replace the no_of_revision by the number of revisions you want to keep.
2) Empty trash automatically
Add the following line of code to your wp-config.php file: define ('EMPTY_TRASH_DAYS', 7);
The number 7 refers to the number of days after which the trash should be deleted automatically.
3) Reduce database queries
By adding the following lines in your wp-config.php, you are reducing the number of database queries and thus increasing your site’s performance.
/* reduce database queries */
define('WP_HOME', 'http://www.yourblog.com');
define('WP_SITEURL', 'http://www.yourblog.com');
4) Plugin
WP-optimize is an easy to use plugin which cleans the database from unnecessary entries such as transient options, etc. It also optimizes the database tables.
The images
Make sure that every image you use on your WordPress installation is optimized and compressed in order to consume as little bandwidth as possible. Start with the header and the logo and don’t forget the favicon.
– scale the images to the real size (scaling with CSS slows down)
– remove the EXIF data from the images (Linux : “trimage” image compressor)
– compress the images (Linux : $ convert -quality 50% old.jpg new.jpg
)
– create progressive JPGs (Linux : $ jpegtran -progressive old.jpg > new.jpg
)
– scale and compress animated GIFs (online tool : http://ezgif.com/)
Caching
The static content will be cached in the browser . This gives a much faster response time for your Web pages ! The static content concerns CSS, JavaScript, images (including favicon), video files, etc. In order to optimize the browser cache, you have to define the resources and the time they reside in the cache.
1) Optimize the cache static content
You have to add resources if the code below doesn’t cover all resources of your Website/blog !
Put the following code into the .htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType application/javascript "access plus 2 weeks"
ExpiresByType application/x-javascript "access plus 2 weeks"
ExpiresDefault "access plus 1 week"
</IfModule>
2) No cache for the homepage
Put the following code into the child index.php after the tag :
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
?>
There is also another method to implement this, but I selected the easier one. The other method uses the auto_prepend directive in the php.ini to add the necessary headers.
3) Proxy caching
Many proxies will not cache the resources if they have a query string (?) in the URL. A tip from the Google best practice pages recommends to remove all query strings from your static resources to enable proxy caching for them.
Example : http://Your-Domain.com/wp-content/t…twentytwelve-child/style.css?ver=4.0.1
In order to remove the query strings, put the following code into the functions.php :
function remove_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_ver');
add_filter( 'script_loader_src', 'remove_ver');
The compression
If your shared host did not activate the Apaches Gzip module, you have to use the PHP’s Gzip functionality. You have two possibilities:
1.) You can call the ob_gziphandler from your Web pages
2.) You can activate compression via php.ini or .htaccess
The second method is more elegant, because it works for all type of Web pages (php, html, htm…). Another advantage of this method is that the code for speed-improvement resides only in the php.ini or the .htaccess file.
Put the following code into the php.ini
; enable compression
zlib.output_compression = On
zlib.output_compression_level = 9
– Check the Gzip status
Check the Gzip status in using the Firefox plugin “Web developer” or other tools.
Response Header
Date: Thu, 23 Oct 2014 13:01:31 GMT
Server: Apache
X-Powered-By: PHP/5.4.34
Content-Encoding: gzip
Vary: Accept-Encoding
Keep-Alive: timeout=2, max=200
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html
200 OK
Minify
Minify removes all unnecessary elements like comments, white spaces, etc. in text files. This increases the page load speed. Minify concerns files like HTML, CSS, JavaScript, etc.
A good practice is also to combine files of the same type.
Minification is similar to compression. But the minified code is plain text and can be used without decompression!
The best combination that worked for me was the “Combine JS” plugin and the minification of the child CSS with the online tool http://cssminifier.com/. You can also minify the theme’s CSS and the plugin’s CSS for better performance, but these changes will be overwritten by the next update….
Headers
– The Vary: Accept-Encoding
Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.
If the “Vary: Accept-Encoding” header is missing, the proxy with a bug serves a compressed resource even to a client that doesn’t support compression.
Add the following code into the .htaccess :
<IfModule mod_headers.c>
<FilesMatch "\.(js|css)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
– The Character set
Specifying a character set in HTTP headers can speed up browser rendering.
Put the code into the child index.php : <?php header("Content-type: text/html; charset=utf-8"); ?>
Check the response header. It must be like : Content-Type: text/html; charset=utf-8
There is also another method to implement this, but I selected the easier one. The other method uses the auto_prepend directive in the php.ini to add the necessary header.
Online speed test tools
You can use these tools to check your WordPress (Website/blog) improvement !
http://www.webpagetest.org/
https://developers.google.com/speed/pagespeed/insights/
Thanks for this information, including the code examples. Nice !!
Hi John,
glad I could help you. If you have some questions just ask