This tutorial is about the tips and ways to make your website faster. You can test your page speed here. Just add your site URL and hit the analyze button.

NOTE: Remove unnecessary plugins and don’t use google ads (Adsense) when testing (you can add them after that).

How to make your website faster

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.

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-font-woff "access plus 604800 seconds"
ExpiresByType application/x-font-svg "access plus 604800 seconds"
ExpiresByType image/svg+xml "access plus 604800 seconds"
</ifModule>
# END Expire headers

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.

WP Smush Pro WordPress plugin for free

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.

Plugin installation:

1. Go to the wp-admin area, open the Plugins -> Add new section. Press on the Upload Plugin
2. Use the search bar to look for WP Super Cache and install the plugin.

Plugin configuration:

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:

Easy

• Caching On (Recommended)

Advanced – enable the following options under the following section of WP Super Cache WordPress Plugin:

Caching:

• Cache hits to this website for quick access. (Recommended)
• Use PHP to serve cache files.

Miscellaneous:

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

Advanced:

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

Google recommends following three solutions to remove render-blocking JavaScript:

1. Async loading of JavaScript
2. Defer parsing of JavaScript
3. Inline JavaScript

Async loading of JavaScript: JavaScript can be loaded Asynchronously by adding async attribute in the JavaScripts. For example:

<script async scr ="abc.js" >

Inline JavaScript: To inline JavaScript, you should call the whole JavaScript instead of calling it by name. This method is useful for small JavaScript(s).
For example:

<html>
<head>
<script type="text/javascript" src="abc.js"></script >
</head>
<body>
<div>
Hello, world!
</div >
</body>
</html>

You should place the content of JavaScript after /* contents of abc JavaScript file */ comment to inline JavaScript.

<html>
<head>
</head>
<body>
<div>
Hello, world!
</div >
<script type="text/javascript">
/* contents of abc JavaScript file */
</script >
</body>
</html>

Defer parsing of JavaScript: Defer means hold back for the later time. When we say Defer Parsing of JavaScript, it refers to hold the JavaScript back while other critical webpage resources (HTML, CSS etc.) have completed loading and JavaScript loads only afterward the initial render of the web page is loaded. I have written a detailed guide to Defer Parsing of JavaScript Properly you can check that out.

How to Defer Parsing of JavaScript

You need to use the following code to defer parsing JavaScript. Insert this code in HTML file just before the </body> tag. Read the instructions given below to use this script.

<script type="text/javascript">
function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "script_to_be_deferred.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>

Instructions for Defer Parsing JavaScript using the script

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.

1. Copy the code and paste it in HTML file just before the </body> tag (near the bottom of HTML file).
2. Replace script_to_be_deferred.js with the link of the JavaScript which is to be deferred. You can copy the link of JavaScript(s) (which Google PageSpeed tool suggests to defer) from Google PageSpeed Insights tool results for your website.
3. Save changes. And you are done.
4. Finally, test your website again to see the effect.

Code to Defer Multiple JavaScripts in One-go

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.

<script type="text/javascript">
function parseJSAtOnload() {
var links = ["defer1.js", "defer2.js", "defer3.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>

6. Plugin Load Optimization (optional – advanced) – How to make your website faster

Look for methods which allow you to control plugins, for Contact Form 7 check this one.

Enter your personal email address below to subscribe our Newsletter:

Your information is 100% safe and will not be shared with anyone else. You can unsubscribe with one click at any time.

Read Also:

• What is Backlink and How to Build Quality Backlink?
• What is SEO and why is it necessary for Blog or Website?
• How to Create Backlinks for Your Website
• What is Domain Authority? Why it is most important for SEO?
• Frequently Asked Questions about Blogging
• A Complete Guide to Migrating your WordPress Website to a New Web Host
• List of High DA (Domain Authority) Backlinks website
• Instructions for activating WP Smush Pro WordPress plugin for free