This tutorial will work you through on how to make your website faster. First, you have to test your web page speed using Google Pagespeed Insight here. Just add your website URL and click the analyze button.
NOTE: Remove unnecessary plugins and don’t use google ads (Adsense) code when testing (you can add them after that).
1. Enabling Gzip compression – How to make your website faster
This will compress the HTML and CSS and will improve the page loading speed and reduces the bandwidth usage.
Please Note: The setup is different from one server to another so you may have to look on your host instructions section to see how you can enable it on your site.
<IfModule mod_deflate.c> <filesMatch "\.(js|css|html|php)$"> SetOutputFilter DEFLATE </filesMatch> </IfModule>
2. Set the Leverage Browser Caching – How to make your website faster
By setting this you’ll tell your visitors browsers to remember (caching) some of your website resources that you don’t change so often (like the logo or the CSS/js libraries, posted images, etc.) and only refresh them after a defined period of time.
To set it you have to add something like this on your .htaccess file.
NOTE: the setup may differ based on what resources you want to include.
3. Optimize images – How to make your website faster
Images are one of the largest resources on your pages and the larger they are the longer it will take to download slowing the page loading speed.
To reduce their size and increase the page loading speed image compression and optimization is required. There are plenty of guides out there on how you can optimize the images (using software like Photoshop or similar) or you can also do by using any plugin like WP Smushit.
An alternative method by adding some code:
Add the following code at the end of the functions.php which is located in the theme folder, the code will automatically compress each thumbnail to 50%:
add_filter( 'jpeg_quality', create_function('', 'return 50;' ) );
After you add the code you need to regenerate the thumbs, for that you could use the Force Regenerate plugin.
The value 50 stands for 50% if you want a better compression or better quality modify it and regenerate the thumbs. Experiment until you get the optimal value.
4. Use a cache plugin (WP Super Cache) – How to make your website faster
A cache plugin generates static pages and improves the site page speed. The cached pages are stored in the memory and when a user makes a request the pages are delivered from the cache. By this, the PHP execution and the database requests are skipped.
- Go to the wp-admin area, open the Plugins -> Add new section. Press on the Upload Plugin
- Use the search bar to look for WP Super Cache and install the plugin.
To set the plugin you have to go to the wp-admin area and open the plugin settings pane, it’s located in Setting->WP Super Cache. We tested this plugin and we recommend the following configuration:
Advanced – enable the following options under the following section of WP Super Cache WordPress Plugin:
- Cache hits to this website for quick access. (Recommended)
- Use PHP to serve cache files.
- Compress pages so they’re served more quickly to visitors. (Recommended)
- 304 Not Modified browser caching. Indicate when a page has not been modified since last requested. (Recommended)
- Don’t cache pages for known users. (Recommended)
- Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated. (Recommended)
- Mobile device support. (External plugin or theme required. See the FAQ for further details.)
- Clear all cache files when a post or page is published or updated.
- Only refresh current page when comments made.
- List the newest cached pages on this page.
Expiry Time & Garbage Collection:
- Cache Timeout: 0 seconds
- Clock: 00:00 HH:MM
- Interval: Once Daily
Preload is set like this:
- Refresh preloaded cache files every 0 minutes (0 to disable, minimum 30 minutes.)
- Preload all posts.
5. Remove render-blocking CSS/js – How to make your website faster
Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script, the parser is also forced to wait for the resource to download.
<script async scr ="abc.js" >
Don’t forget to take a complete back-up before making any changes in the code. If something went wrong, you can use that back-up to go back.
- Copy the code and paste it in HTML file just before the </body> tag (near the bottom of HTML file).
- Save changes. And you are done.
- Finally, test your website again to see the effect.
If you want to defer multiple scripts in one go. You can use the same script with little modification. In the following code replace defer1.js, defer3.js, and defer3.js etc. with the link of scripts which you want to defer.
6. Plugin Load Optimization (optional – advanced) – How to make your website faster
Look for methods which allow you to control plugins.