Tutorial: How to Optimize WordPress Website Performance
website·@slavko993·
0.000 HBDTutorial: How to Optimize WordPress Website Performance
<html> <p><img src="http://cooltabletennis.com/images/wp.png"/></p> <p>This is my first post on Steemit platform. Here I would try to explain you how to optimize your WordPress website performance, so it can be rendered faster by the browser. From the start of this year, I had optimized more that 20 WordPress websites, so I have some experience in this field :)</p> <p>Let's start!</p> <p>Most popular web application for testing website performance are: <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> and <a href="https://gtmetrix.com/">GTmetrix</a>.</p> <p>Most of people who are using <strong>WordPress </strong>are not familiar with HTML/CSS, JavaScript and/or PHP. Because of that, they use plugins for almost anything. There are a lot of plugins for WordPress, some of them are good, other don't.</p> <p>Before we start make sure that you have <strong>a</strong> <strong>backup </strong>of your website and delete every plugin that is not necessary for your website. Many plugins will add some tables in the database and some code into HTML document. That code will be added when a browser request webpage from the server.</p> <p><em><strong># Reduce number of HTTP requests</strong></em></p> <p>The point is that you need to decrease web page size and number of requests, so it can be downloaded faster.</p> <p>Request are very important. Ideally you would have only one HTTP request and that will be requested for HTML document. Of course, it's almost not possible on modern websites, but you should keep them at a minimum.</p> <p>As I mentioned above, plugins add extra code into your HTML document. That code is usually external CSS and JavaScript files. When the browser start crawling your HTML document, it will go from top to bottom. Whenever a browser finds the external CSS or JavaScript file, it will stop rendering of page until these files are not fully loaded. That is called <strong>render blocking</strong>. Render blocking is related to HTML, CSS and JavaScript files. Images doesn't block rendering of webpages.</p> <p>To reduce number of requests and decrease size of HTML, CSS and JavaScript files, I like to use ,,<strong>Autoptimize</strong>" plugin. This plugin will compress (remove unnecessary empty space from HTML, CSS and JavaScript) and combine CSS and JavaScript files to reduce the number of requests.</p> <p>After you install that plugin, you should change some settings there. Click on ,, Show advanced settings".</p> <p><img src="http://cooltabletennis.com/images/autoptimize.png"/></p> <p>You will be on screen like this:</p> <p><img src="http://cooltabletennis.com/images/ao_adv.png"/></p> <p>HTML will not make any problem.</p> <p>Sometimes it may happen that your JavaScript file break after compression. If that is the case, you can exclude file that makes you problem or uncheck JavaScript optimization.</p> <p>When it comes to CSS, in 90% it works fine. If there is some problem, it's usually related to the style.css file (in your theme folder) or you would need to uncheck ,, Also aggregate inline CSS?" option.</p> <p><em><strong># gZip compression and Browser Caching</strong></em></p> <p>In WordPress "world", most popular plugin to do this is "W3 Total Cache", but we can enable gzip and caching without the use of any plugin.</p> <p>To enable that, you would need FTP or cPanel access, so you can modify .htaccess file. That file is located in the root directory of your website. Usually under <strong>public_html</strong> or <strong>www</strong>. In that folder you will find your website and .htaccess file.</p> <p>When you open that file, there will be some code.</p> <p><img src="http://cooltabletennis.com/images/htaccess.png"/></p> <p>At the bottom (in my case after # END WordPress), you should write code that will enable gzip and browser caching.</p> <p># EXPIRES CACHING</p> <p><IfModule mod_expires.c></p> <p>ExpiresActive On</p> <p>ExpiresByType image/jpg "access 1 month"</p> <p>ExpiresByType image/jpeg "access 1 month"</p> <p>ExpiresByType image/gif "access 1 month"</p> <p>ExpiresByType image/png "access 1 month"</p> <p>ExpiresByType text/css "access 1 month"</p> <p>ExpiresByType application/pdf "access 1 month"</p> <p>ExpiresByType application/javascript "access 1 month"</p> <p>ExpiresByType application/x-javascript "access 1 month"</p> <p>ExpiresByType application/x-shockwave-flash "access 1 month"</p> <p>ExpiresByType image/x-icon "access 1 month"</p> <p>ExpiresDefault "access 2 days"</p> <p></IfModule></p> <p># END EXPIRES CACHING</p> <p>This will enable browser caching and it will decrease page loading time and the number of HTTP request for second time visitors. When someone visits your website, static resources (images, CSS and JavaScript) files will be saved on the visitor's computer. If that person visit your website again or some other page on your website, the browser will first look to see if some external file is saved in the computer. If the answer is yes, it will not send request to server for that file, instead it will take it from the visitor's computer.</p> <p>Now let's enable gzip compression.</p> <p><strong>This is for Apache web servers only, for NGINX servers, settings are different.</strong></p> <p>Bellow code for caching that we added, you would need to insert a few lines of code that will enable gzip compression. Gzip is important because it will drastically decrease the size of text files (HTML, CSS and JavaScript). Code that you would need to add is:</p> <p># Gzip</p> <p>AddOutputFilterByType DEFLATE text/plain</p> <p>AddOutputFilterByType DEFLATE text/html</p> <p>AddOutputFilterByType DEFLATE text/xml</p> <p>AddOutputFilterByType DEFLATE text/css</p> <p>AddOutputFilterByType DEFLATE application/xml</p> <p>AddOutputFilterByType DEFLATE application/xhtml+xml</p> <p>AddOutputFilterByType DEFLATE application/rss+xml</p> <p>AddOutputFilterByType DEFLATE application/javascript</p> <p>AddOutputFilterByType DEFLATE application/x-javascript</p> <p># END Gzip</p> <p>Now my .htaccess file looks like this:</p> <p><img src="http://cooltabletennis.com/images/htaccess_final.png"/></p> <p><em><strong># Image optimization</strong></em></p> <p>It is always good to optimize your images before uploading them to the server, but don't worry if you didn't ;) There are a lot of good plugins that can help you with this. One of the most popular plugins for this is "<strong>WP Smush</strong>". My suggestion is that if you are using some plugin to optimize images, you should disable it after image optimization is finished. Why? Because you should keep the number of active plugins to a minimum.</p> <p>If you want to optimize your images manually or before uploading to the server, I highly recommend the <a href="http://optimizilla.com/">Optimizilla</a> web application<a href="http://optimizilla.com/">.</a></p> <p>To manually optimize images, you would need to navigate to your website folder (like we do for gzip and caching). There you will see wp-content folder and inside of it uploads folder. In that folder are located all of your media files. You can download them and after optimization, upload it again.</p> <p>If you are using <a href="http://optimizilla.com/">Optimizilla </a>you would also need to rename optimized files, because that web application adds "-min" at the end of optimized file. You would need to remove that in order to override the original file on the server.</p> <p><em>This is some basic steps that you would need to take in order to make your website faster. I hope that this tutorial will help someone and sorry for my bad English.</em></p> <p><em>Have a good day!</em></p> </html>