How to speed up and optimize WordPress sites
WordPress is now a widely recognized content management system but 17 years ago it used to be a blogging platform with a limited set of features. The popularity of the platform resulted from many practical applications of how the CMS can be used by web developers. The system provides a lot of plugins and allows Internet users with any level of skills to create and edit websites. However, there are some pitfalls when the site that is built on WordPress gains traction.
The user can face some troubles when he or she opens the website for the first time. The loading speed may be low causing the website elements to be moving around the page while the stylesheets are loading. Then database crashes and the server needs to be restarted to resume the work of the website.
- Test the speed of the site and analyze the results
- Compress images to decrease the size
- Minification of JS, CSS, HTML
- Analyze the plugins
- Examine the power of web server
- Try Gzip compression
- Update the version of PHP
- Set up the caching of the page
- Leverage browser caching
- Load testing
- Check the performance again
Test the speed of the site and analyze the results
The first step is to test the current speed of your website. There is a wide range of tools that you may use to find out how the site is performing now. Among these tools there are:
- Google Pagespeed Insights;
- Pingdom page load checker;
If you are using GTmetrix to test the speed of your website, you need to enter the URL of the website and then examine the results. You will see the total page size, fully loaded time, and a few scores from A – F. Also, the tool shows the detailed results for several elements of the website.
Then you need to define the largest files. The most important results of the test are the total size of your web page that includes the following elements:
You need to sort the above-mentioned components by size to understand which ones are the largest.
Compress images to decrease the size
The largest elements of the website are usually media files like videos and images. You need to get rid of the background videos if they are not necessary. It is better to use the video with low bitrate if it is played on your page automatically.
Moreover, one of the useful tools to reduce the size of your media is the plugin called EWWW Image Optimizer. The images are often downloaded to your website in high resolution and then the size is decreased with CSS. This influences the bandwidth of your website negatively.
If you are using EWWW Image Optimizer you need to go to settings and choose the option “Resize detection”. After that, you will see the highlighted media that should be resized. You can change the size of these images in the editor or apply the Content Delivery Network with automatic sizing.
Minification of JS, CSS, HTML
Minification implies making the code human-readable by removing some characters to decrease the size of the web page. One of the very effective tools for these purposes is Autoptimize. After installation, you need to choose “optimize CSS code” in settings. If you are applying minification to the custom-made theme you should use the tools like gulp.
Also, you can combine JS and CSS files with the help of Autoptimize plugin and the option called “Aggregate CSS files”. It enables us to gather CSS from every web page in one file.
Analyze the plugins
If there are too many plugins they may affect the operation of the web page built on WordPress. Due to the large number of free plugins for WordPress, web developers sometimes include some of them to the admin dashboard. You might remove the plugins you are not using permanently – so if you need them later you will be able to install these plugins again.
Examine the power of web server
The server is the essential element of the website. If the server has average characteristics and bad maintenance, it will not run properly. You can analyze the power of the server by addressing the Google PageSpeed Insights. Then you need to input the link to the website and search for the “reduce server response time” in the report. If you see this caption in the result of the search, then the performance of your website is definitely affected by the slow server.
Try Gzip compression
Gzip is a tool that allows reducing the size of the pages of your website before the visitor opens it. The browser decompresses the site and then sends the compressed version to the customer. You can try several tools to find out whether this feature works for your website. One of the most popular tools is GiftOfSpeed.
Update the version of PHP
To organize the perfect operation of the website you need to check the version of PHP you are using. Open the dashboard in WordPress, then choose “Server” and look at the current version of PHP. If it is 7.x.x or any older you need to update it to PHP 7.1.
Set up the caching of the page
If you want to set up caching you can add the new plugin that is called “cache enabler”. The plugin will help you to speed up the WordPress website significantly by saving the copy in the cache. The visitor will not have to wait while the website will be loading for the second time. In addition, the plugin is lightweight and turns the web page into the HTML file that is later delivered to the users.
The diversity of different devices makes developers think about the compatible versions of the websites that would be displayed properly on every gadget. If you want the images on your web pages to be displayed correctly you may use the service called “photon”. You can find this service on Jetpack.
Leverage browser caching
Due to the caching of the browser some components of the site do not have to be loaded again when the user refreshes the site or visits the site again. You can set up browser caching either manually or automatically. In the first case, you may use .htaccess, and in the second case you can apply the plugin “Leverage Browser Caching”.
If you want to improve the website built on WordPress you may perform the load testing with the virtual visitors. One of the most helpful instruments for this purpose is Loader. When you are conducting the testing pay attention to the memory of the server and CPU.
Check the performance again
After all manipulations with the website we have mentioned above, it is time to compare the results and raw data. You may apply GMetrix to compare the outcomes with the initial situation and then you will see the changes in the time needed for the loading of the page.