In this article, you will learn how to optimize WordPress website for speed.
You should optimize your WordPress website for speed. It is an important SEO factor as well as providing a good user experience for your audience. In this tutorial, you will learn how to optimize your WordPress website for speed. There are many optimization plugins for compressing images, caching, minifying, etc., but we want to do it without any plugins. A plugin is software consisting of a group of functions to add functionality to the WordPress website. Using plugins has pros and cons. The advantage is that you can accomplish the task without knowing the code. Advanced WordPress developers don’t prefer using plugins for each job. Every plugin, besides its main functionality, will also have extra CSS and JavaScript to provide a user interface. It also poses a security threat to your WordPress website. Plugin code is available to hackers as well, and they can very easily tweak its code for malicious activities. Many advanced WordPress developers, therefore, very rarely use plugins.
It is advised to back up your WordPress website before making these changes.
Step 1: Cache Static Resources
Caching static resources can optimize WordPress website for speed. Static resources are those that undergo changes after a very long time or don’t change at all. These are images, JavaScript, and CSS files. Paste the following code in your “.htaccess” file in your Public_hmtl folder.
If you are using a cache plugin, then rename your “.htacess” file to something like “.htaccess-old”, etc., and then log in to your WordPress dashboard. Hover to permalink and click on save. This way, you will generate a new “.htaccess” file. We have done this step to remove the modification done to the “.htaccess” file by the optimization Plugin.
# BEGIN Expire headers
ExpiresActive On
ExpiresDefault “access plus 5 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 216000 seconds”
ExpiresByType application/javascript “access plus 216000 seconds”
ExpiresByType application/x-javascript “access plus 216000 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
# END Expire headers
# BEGIN Cache-Control Headers
<filesMatch “\.(ico|jpe?g|png|gif|swf)$”>
Header set Cache-Control “public”
<filesMatch “\.(css)$”>
Header set Cache-Control “public”
<filesMatch “\.(js)$”>
Header set Cache-Control “private”
<filesMatch “\.(x?html?|php)$”>
Header set Cache-Control “private, must-revalidate”
# END Cache-Control HeadersStep 2: Apply GZIP Compression
Gzip compression can be used to optimize WordPress website as a result of a reduction in page size. Gzip is a method of making files smaller via compression to be delivered faster on networks.
It is also a file format. GZIP compression will reduce the page size of your WordPress website. To compress the file without any Plugin, paste the following piece of code into your “.htaccess” file below the code inserted before this step.
<IfModule mod_deflate.c>
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
</IfModule>Step 3: Limit the Number of Post-Revisions
By default, WordPress stores every change we make to our pages and posts. It is called revisions. They are stored separately in our WordPress database. We can reduce our database size if we limit the number of post revisions or remove them.
To limit the number of post revisions to 2, paste the following piece of code in wp-config.php.
define( ‘WP_POST_REVISIONS’, 2);
If we want to not store post revisions at all, then we will replace two with false.
Step 4: Defer JavaScript
According to javascript.info:
The defer attribute tells the browser that it should go on working with the page and load the script “in the background,” and then run the script when it loads. Scripts with deferring never block the page. They always execute when the DOM is ready but before the DOMContentLoaded event.
To defer JavaScript, paste the following piece of code in your functions.php file:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don’t break WP Admin
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
return str_replace( ‘ src’, ‘ defer src’, $url );
}
add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );
Here is the final result after applying all these steps to my website. The result can be further improved. You can see in the following picture that TTFB (time to the first byte) is 1 second. It is because I am on cheap shared hosting. The load time can be brought to under one second if I shift to better hosting. I have now started this blog, so I am on cheap hosting. I will migrate to a higher plan as soon as I see an increase in traffic.
Conclusion
You can optimize your WordPress website considerably by correctly putting the aforementioned methods into practice. I personally put these strategies into practice and saw a noticeable increase in page speed. Despite the fact that Google Analytics Tags and Google Adsense had a detrimental effect on the page speed score, I was still able to get good results. It’s crucial to note that my website runs on shared hosting.
When you conduct tests on Google Page Speed Test and GTmetrix, you’ll see an improvement in your page speed if you adhere to our recommendations. Please feel free to note any problems you have, should you run into any, when putting these instructions into action in the comments area below. Any helpful recommendations you may have would also be much appreciated.
