Today i want to share about the why increase WordPress website speed is important and how we can improve your website loading speed. This article i will focus on the solution for WordPress website only, but the ideas and some solution are workable on other types of website such as shopify, wix and more.
Why WordPress Website Speed Important
The most important things for a website (no matter it is a business website or wordpress blog) isn’t the content or the graphics but the speed of the site. According to a report by the Microsoft Bing, a 2 second longer delay in page responsiveness reduced user satisfaction by 3.8%, reduced clicks by 4.3% and increased lost revenue per user by 4.3%.
Website loading speed is really important because that is the first matter that your visitor to visit your website. If your content is incredible good visitor have to take 5-10 seconds of loading time to visit the pages, they will probably close instantly. Not only that, google now includes site speed in it’s ranking algorithm. If your site is slow, site’s speed effects the SEO. That why website speed is everything.
> Check Google Your Website Speed
How to Increase WordPress Website Speed
From my past experience, i lose many visitor due to the matter of speed. Through that, I’ve learned to increase website loading speed and pass google speed test to above 80/100 score.
1. Find a good host
There are many hosting provider out there, the cost can be as low as below $1. However, it comes at another cost with incredibly slow speed, longer response time and frequent down time during high traffic periods. If you wish to increase your WordPress website speed, the most critical things is find a good hosting company.
I have used many hosting company, some are good, some are bad and make sure that the storage is using SSD. I am recently using Siteground for my website hosting, which provide excellent services, product and pricing. Siteground provide high speed for shared hosting, the cost for first time user only $4.95/mo (regular $11.95/mo). If you have facing any problems, their support will reply you INSTANTLY. That why their service is top. It’s suitable for majority of the website. Once you have much of traffic you could consider switch to a cloud hosting.
A good shared hosting is more than enough for your new website, if you have problem about installing WordPress in siteground just head over the tutorial.
2. Use a good themes
A WordPress themes is also the problem that effect your site performance. You might be surprised but the default WordPress themes Twenty Fifteen is lightweight and quite speedy. Some themes maybe look very fancy and cool, available tons of features that you will never use and eventually slow down your website speed. There are many premium themes that tried their best to make a fast and beautiful themes. You could try envato market to find the best suitable themes of you. But i personally use Salient for my WordPress themes.
3. Optimize the images
Images is one of the big issue for website loading time. Most of the website owner din’t optimize the images before placing them online. To optimize the images we can use this plugin called WP Smuch, but just using plugins you may not be able to pass google speed test. The correct way to optimize images is to optimize all the images before you upload to your website. Use jpg format for smller size and png for transparent images (e.g. logo) in your WordPress site, go to compressjpeg.com to compress your images. Download the compress images and upload to your website, combine use with Smuch to achieve 120% optimize. Complete Guide to Optimize Images for Web the RIGHT WAY.
4. Minify CSS & JavaScript
To minify css and javascript we can simply use a free WordPress plugin called Autoptimize, developed by Frank Goossens. You can follow my settings on the below.
This setting is optional, if you want to remove emojis or google fonts.
5. Async JavaScript
Load your JavaScript asynchronously. Async Javascript essentially downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading. Download Async JavaScript plugin, it’s free. Just go to the plugin settings page click [Apply Async].
6. Use Cache
We can use cache to speed up website and a simple enough plugins call Cache Enabler is free for download in WordPress. This plugin is really simple, you can actually don’t need to configure anything. Optional setting if you would need. 2400 hours expiry around 3 month of time, and cache behavior. Remember to [Disable] minification because Autoptimize will do the job.
7. Enable Compression
There are couple ways to solve this. But here we can just adding few simple code in our .htaccess file to solve it. You can access your .htaccess file through [Cpanel] > [File Manager] or FTP. Copy the code on the below and paste it at the last paragraph(after # END WordPress). Make sure you are enter into the right file.
<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>
8. Add an expires header – Leverage Browser Caching
To solve this, we have to add expiration for the resources. Simply copy the code below and paste it into your .htaccess file.
## EXPIRES HEADER CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES HEADER CACHING ##
Summary
The above simple 8 steps can increase WordPress website speed make your site pass google speed test to scored above 80/100. You don’t need to read a 20 ways to speed your website thread. All you need is just make sure this simple 8 steps and you website will run lightning speed. Here, let me summary the thing you need to speed up your website. 4 required plugins.
Code to copy into .htaccess file. *Note: before editing .htaccess please backup the original file.
<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> ## EXPIRES HEADER CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" ## EXPIRES HEADER CACHING ##
Speed up More – Optional
- Move google fonts to footer by disable google font using autoptimize (we’ve talk on above) then copy the embed code and paste it on footer. We can use free plugin Insert Headers and Footers.
- Disable pingbacks, trackbacks and other unnecessary function by using WP Disable.
- We can also use WP Disable to move google analytics to footer and make your google speed test better result.
- Use a content delivery network (CDN) if you have extra budget.
Conclusion
This tutorial stick to make work simple, the result might not be 100 marks, but the work and required knowledge to do over 100 marks. Increase WordPress website speed is not a hard work, but for beginner it might sometimes. The summary part already done 80% of the optimization work. If you would like more, then only go through the extra part. I hope it help your website performance. Thank You
Welcome to MAOMAO Blog, and thank you for reading this post. If you have any questions please comments below or find me on social media. I really like to hear from you. #SEE MY WORKS
