Best Guide to Optimize WordPress Website Performance in 2018

Optimizing website’s performance is the first most important and essential thing, it decides how successful your business will be. A website with fast loading speed, could bring the success at your doorstep. There’re hundreds of guides on the web about how to optimize your wordpress website, a lot of confusing options are there to deal with.

Today i’ll be showing you the best and easiest way to speed up your website from the beginning. Follow these steps it will bring your website loading time surely around 2-3 seconds. First of all check your website’s current performance using GTmetrix or Pingdomtools. You can see the the screenshot below, that’s our websites performance after optimization, it’s around 1.8 sec.

How to Optimize and speed up wordpress website performance –

1. Plugins – 

We often use a bunch of plugins for our website to customize it, but the truth is installing many plugins slows down your website’s loading speed. Plugins are made of java script, when you install more plugins the java scripts of it keeps loading the background, which consumes your bandwidth and affects site’s performance. It could deliver a poor performance to the users. Try to use maximum of 10-12 plugins to avoid issues with loading speed, also there are few plugin that deliberately makes your website’s optimization poor. Jetpack, Adsense Invalid Clicks protector, Adblocker Notify, Email newsletter opt in plugin – uninstalling these could reduce the loading time of your blog or websites upto few seconds.  So decide what to keep and uninstall or deactivate all unused unnecessary plugins.

2.Enable G-Zip Compression – 

Enabling G-Zip compression on your website could make your it 2 times faster than before. It reduces the page size by 70% of it’s previous value which increases the page loading speed. Gzip compresses your webpages and style sheets before sending them over to the browser. It decreases the content transfer time since the files are much smaller in size than before. To enable G-Zip compession on your website, you’ll need to add the following code at the end of your .htaccess file that’s in the public html folder. Copy and paste the code below into your .htaccess file and save it.

<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>

After adding this code, now check your website speed, the difference will be infront of your eyes.

3.Enable Broswer Caching – 

Caching means all files from your pages including  HTML, CSS, JavaScript and images will cached and stored locally on user’s browser. When next time the user visits your website, it will force the visitor to reuse the cached contents rather than loading it again separately, it reduces the load on your server. Add the following code to your .htaccess file from below to enable browser caching on your website. Be careful about changing the values, if you set the cache expiry too high users might not be getting a fresh version of your website contents even after update. so use the given values or you may modify it as per your needs.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Add the code at the end of the file, and save it.

4. Activate Lazy load for images and videos – 

Lazy load is the most helpful key to speed up your website speed. Activating lazy loading means images and videos from your website will not be loaded in the background until the visitor scrolls down to the content. It helps to load the website much faster. Many wordpress theme has inbuilt option to activate lazyloading, while you may use JCH Optimize plugin or wp rocket to activate lazy loading.

5. Optimize images –  

A proper optimization of images could make your website performance dramatically incredible. Be aggressive about image dimension, always try to use 640 width and 360 height images. Resize your images to the following dimension using photoshop or i use a online editor called canva, which is free and much comprehensive. After resizing, you must compress the image. Compressing a image could reduce its size by to 70%. You can use this online tool, it almost compresses all types JPEG,PNG image files. I personally prefer this tool to compress images. You don’t need any additional plugins for image optimization if you use this method, as we’ve just told plugin slows down and kills your website.

6. Minify and combine Files – 

Minifying your files such as CSS, Java scripts and HTML could save a lot of bytes of data. Each time browser has to send multiple requests to the server to receive those files. Minifying and Combining them together helps to reduce the number of Http requests which makes the your website faster. The best way to do this is using wp Rocket plugin. This plugin comes within options to minify and combine all the java, css and html files in just a one click.

7. Install a caching plugin – 

Enabling browser caching isn’t just enough for your needs, you’ll need add a good quality caching plugin. Don’t get confused between plugins, there are a bunch of caching blugins available for wordpress. Want to best suggestions, well WP-Rocket is the best as per our experience. You may Opt for WP-Rocket premium to get more add on features. This plugin almost does everything on your behalf.

8. Add expires headers – 

Expire headers tell the browser how long to store a file in the cache so subsequent page views and visits they don’t have to download the file again. It also reduces the numbers of http request which makes the page loading more faster. You’ll need to provide expiry date for files such as images, favicon, java scripts and html. To enable expire headers, simply add the code below at the end of your .htaccess file as before.

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

9. Activate AMP for mobile users – 

Using accelerated mobile pages makes your website three time faster. It shows a simplified version of pages, which almost loads instantly on mobile devices. You can use AMP For wordpress plugin for his purpose, this is the best available plugin for creating AMP pages. While AMP works like a charm, you can opt for facebook instant articles. If you share a link of your website on facebook, instant article loads the page within a second for facebook visitors. You can use this plugin for activating instant articles on your website.

10. Use a CDN –  

You can use a content delivery network like maxCDN. MaxCDN is one of the best content delivery network out there which comes within a package of around $5 per month. CDN stores your website files as cache on their multiple servers across the world. When a visitor tries to open the website, CDN serves the cached content from a nearby server which reduces the load on your server and as well as increases the overall performance of your website.  Or if you’re looking for a free CDN, you can use Cloudfare. Cloudfare CDN has free plans that covers almost all basic needs.

Apply this settings and after that clear the cache manually once, now check your website performance using Google Pagespeed insights or pingdom tools and you’ll notice the difference.