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).
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>
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
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
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.
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.
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
Advanced – enable the following options under the following section of WP Super Cache WordPress Plugin:
Caching:
Miscellaneous:
Advanced:
Expiry Time & Garbage Collection:
Preload is set like this:
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:
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.
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>
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.
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>
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.
CISCE results 2024: In the preceding year's exams, the pass rate for ICSE Class 10…
"The Dark Side of SEO: How to Protect Your Website from Negative Attacks" – this…
In a world brimming with digital possibilities, inspiring young minds to express themselves through writing…
In today's fiercely competitive digital landscape, understanding why SEO is essential for business growth and…
Dive into the world of knowledge with "10 Free Online Courses from MIT"! Presented in…
Welcome to "10 ChatGPT Prompts to Create Your CV." Crafting a compelling CV is essential…
View Comments
Nice attempt, but you need to be more descriptive and more specific about the process. Also, you must provide more general options and research data for users.
Yeah Thanks, I'll share all in my next blog article. Thanks for the feedback