8 Ways to Decrease Page Loading Time and Improve Website Score

effective ways to boost up your loading speed of an webspage.

Do you know that if your page load time increases by more than a second, then your page views will decrease by more than 30 percent?

In simple words,

More than 30% of your visitors would abandon your page if it takes one second longer to load.
See this is a bitter thing but it is the truth.

So we must pay attention to the speed of our website and decrease webpage load time.

So in today’s article, I am going to tell you some such ways that will help you to improve the website speed.

Before discussing these ways first we need to know how page speed affects ranking?

How Page speed affects ranking and Why is page speed important for SEO?

As I Told you before that page speed plays a crucial role in getting your page views and improving conversion rates too.

Many Survey Proves that if the page speed is not good, then many visitors abandon that site if that is a blog website or an e-commerce site.

And also those people do not prefer to visit those websites again.

So, Sales and Pageviews both will be down.

Hence, Website Ranking will be affected.

When we talk about Google and Other Search engines they always avoid delivering results from slow loading websites

After the Google Page Experience Update of May 2021, it became an even more crucial factor.

How to Check Website speed and performance?

There are many ways to check Website Performace and loading speed but Google page speed insight and GTMetrix are the best choices.

I Personally use lighthouse Google chrome extension.

To check the Performance of any website follow the below steps:-

• Visit https://pagespeed.web.dev/ (Pagespeed insight test) enter your page URL and click on analyze button.
• After the page speed insight tool scans your site and shows all performance issues with score.

How to reduce page load time?

After Talking about how page speed plays a vital role in ranking now let’s talk about different ways to reduce page load time and load the webpage faster.

All the ways described here address the biggest and most common issues to slowing down webpage speed.

Minify Codes

Our first and most common method is that you must apply on your website to load webpages faster which is “Minify your JS and CSS Codes.”

You can minify any CSS and JS manually just by removing all whitespace between codes, or you can use any minifier tool to minify your CSS and JS Code.

If you are using External .css stylesheet or .js Script then just add min before .cs and .js like min.cs and min.js

Normal and minified codes exactly work the same but minified codes have less file size and they load faster.

But if you are going to edit and play around with the codes in the future again and again then prefer normal code instead of minified code.

Choose Right Web Hosting

If you optimized your website to load fast, and it’s hosted on a slow server then your website can’t load quickly.

If Pagespeed insight shows “reduce initial server response time” it means your server or hosting is taking a long time to respond and load webpages.

Obviously, Server response time is not dependent only on hosting and server but it is one of the possible causes.

So, Web Hosting Also plays a crucial role in website or webpage speed.

That’s why you should choose the best web hosting according to your need whether it is shared or VPS or cloud or dedicated server.

Load Scripts Faster with Async or defer Style

The loading of your js and CSS files should be done in an asynchronous style, not in a synchronous style.

Confused about what is asynchronous style and synchronous style are?

So let us understand what is synchronous and asynchronous styles of loading.

In synchronous loading, files load one by one, if the first file is taking time to load then the browser will block the next file until the first one loads.

So Basically it will work as a “render blocking” and to avoid this thing, you should keep the Asynchronous style so that all the files start loading simultaneously, there is no blocking, and whatever files are loaded first.

There are two script attributes is used for load Scripts Asynchronously first Async and Second defer.

So Which should be the best choice?

Let’s First Differentiate both attributes and then we will decide.

Script files with the async attribute will execute in no particular order as soon as they’re loaded, whereas scripts with the defer attribute will execute in sequence (in the order they appear in the HTML) toward the end of the initial loading process.

look at this Insight –

I hope now you understand how async and defer work. Just remember to use async very high priority js which you want to load quickly as soon as possible scripts and defer on normal scripts.

How to Use Defer or Async in Scripts?

As I told in the last section that Async and Defer are used as an optional attributes of the script tag. So to use defer and Async just add those in script tags like below.

Normal JS:

<script src="script.js"></script>

Async JS:

<script async src="script.js"></script>

defer JS:

<script defer src="script.js"></script>

You can defer also large elements like images and videos also, so they can load after a full page load and it will surely boost your webpage speed performance.

Lazyload and on scroll load

You can also lazyload your images with defer.js to load images only when the user scrolls to the image page.

Also, you can load your JS Files on a scroll which is not so important and it’s ok to load after the FCP (first contentful paint)

To Use JS on the scroll you can use the below code.

<script>
  /*<![CDATA[*/
  var lazyadsense = false;
  window.addEventListener('scroll', function() {
    if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
      (function() {
        
        /* Your Codes Here to load after scroll */
        
      })();
      lazyadsense = true;
    }
  }, true); /*]]>*/
</script>

Media Compression and Use NextGen Images Format

Media compression is the most common and must-use method for improving the speed performance of any webpage. You can Compress large Media files like images, icons, videos, etc.

Google and Many Experts recommend Max 100kb size for normal images used in blog posts or websites.

To Compress the media files you can use online tools like tinypng, compress2go, etc, and if you are wp you can use WP Plugins like Smush, EWWW Image Optimizer, Wp rocket, and more. Also, you must use NEXTGen (like .webp) Format of images.

You can reduce almost approximately 90 percent size just by converting Normal image Format into NextGen image format.

To Convert .png, .jpeg to .webp there are a lot of online tools and wp plugins like smush which converts images format. I Recommend Cloudconvert to convert .png and .jpeg to .webp format online.

Use a CDN (Content Delivery Network)

Always use CDN for your website to deliver content to the visitor as soon as possible.

CDNs Basically Cache your website content like webpages and files in proxy servers and when any visitor visits your website then your content will be loaded from proxy servers from the visitor’s nearest location.

So if your visitors are located far from your hosting server then you must use CDN.

Cloudflare is one of the best CDN till now which spans 193 cities across 90+ countries.

You can use Cloudflare for free to optimize your website speed and performance it also ensures the security of your website.

You can also check our post on Best Cloudflare settings to use on Blogger or WordPress.

Enable Browser Caching

Browser Caching is also one of the best practices to make your website extremely fast for repeated visitors.

Have you experienced that when we load the website for the first time it took you some time but as soon as we load it the next time it took less time? this is because of browser caching.

Caching saves some of our website data in visitors’ browser cache storage and when visitor again visits our website in a set caching period then data will fetch from Browser’s local storage and the website will load too fast.

You can enable browser caching in your WordPress website by editing your .htaccess file in your website files by plugins and also you can enable it from plugins like WP Super cache, Litespeed cache, etc.

In Blogger you can add the below code to the head of your website.

<include path="/assets/**.css" expiration="7d" /><br />
<include path="/assets/**.js" expiration="7d" /><br />
<include path="/assets/**.gif" expiration="3d" /><br />
<include path="/assets/**.jpeg" expiration="3d" /><br /
<include path="/assets/**.jpg" expiration="3d" /><br />
<include path="/assets/**.png" expiration="3d" /></div>

Change Caching Time Period According to you.

Regular Monitoring of Website Performance

This is the must-do follow tactic to improve your website performance.

Use Google’s PageSpeed Insights and GTMetric to identify optimization opportunities and improve your website’s performance.

But this is not just limited to Pagespeed insight or GTMetrix test daily, you need to monitor all of the things your CTRs, Search Engine Performance, Bounce rate, and much more.

So, you can analyze which page is annoying visitors and how load time is affecting your ranks and CTR, and then you can fix those issues.

Wrapping up

I shared many ways to optimize your website to load fast. I try my best to explain all the methods.

I hope you like this post, If you like do share it with your friends, and make sure to drop a comment.