How to optimize your website

First of all you have to check if your website requires optimization through PageSpeed Insights by Google.

https://developers.google.com/speed/pagespeed/insights/

CSS Optimization

Step 1 - Generate a Critical Path

Generate a critical path and set as inline.

Note 1: Online generator has limitation and therefore I strongly suggest that you download the node version of the application and do it through console.

https://github.com/pocketjoso/penthouse

For node application, the command is: > node basic.js

The basic.js has 3 variables inside the script, its url (in), all loaded css (in), result critical path css (out) as sample below.

var penthouse = require('penthouse')
var fs = require('fs')

penthouse({
  url: 'http://localhost/about', //your local deployment url target
  height: 8000, //the height of the page that you only want to optimized.
  css: 'collective/about-all.css' //provide the collective css where your page is loaded.
})
.then(criticalCss => {
  // use the critical css for your production release
  //extracted critical path (replaced @ as some css are using @media and this conflict with asp.razor)
  fs.writeFileSync('collective/about-critical.css', criticalCss.replace(/@/g, "@@"));
})

Now, you may ask, how the heck you get the collective css to be used in css parameter? The answer is through your browser. If you are using .NET, make sure your web.config compilation debug is set to true.

Next is run your local deployment (http://localhost/about) from your local IIS or maybe from your IDE (hit F5).

From your browser, hit F12 or manually go to Developer tools > Sources tab, then copy the contents of the following css loaded like if any bootstrap.min.css, sticky-social.min.css, etc. and also your custom css if any like about.css. All the contents should be save in single file and in my example above, I named it above-all.css and used as the parameter of css as collective css input.

Note 2: If you are using the IDE, during the generation of critical path the IDE will crash and restart. The deployed version of your website is recommended.

Now you are ready to execute the node basic.js in your console. After you successfully generate the critical path, remember that you have to copy the content of the critical css (in my example its about-critical.css) and very important that you have to transfer the contents of it as an inline css to your web page.

Step 2 - Minimize the Critical Path CSS

There are 2 online tools to do this job and you are free to use them at your own risk.

https://www.cssminifier.com and https://www.csscompressor.com

JavaScript Optimization

Step 1 - Minimize the Javascript

There is 1 online tool that I am using for my project.

https://javascript-minifier.com/

Step 2 - Deferring call of the script

By adding the keyword defer is like a magic that inform the browser to execute this script when the page has finished parsing. Defer attribute only works for external scripts.

<script src="https://www.google.com/recaptcha/api.js?onload=initReCaptcha&render=explicit" defer></script>

An old method to defer the script does also exist just like below example:

(function() {
      function getScript(url,success){
        var script=document.createElement('script');
        script.src=url;
        var head=document.getElementsByTagName('head')[0],
            done=false;
        script.onload=script.onreadystatechange = function(){
          if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done=true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
          }
        };
        head.appendChild(script);
      }
        getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
            // YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
        });
    })();

Image Optimization

Compressing the images in your website will help deliver the page faster.

There are 2 different online tools that I can recommend.

https://compressor.io/compress or https://kraken.io/web-interface

and another image compressor that allows you compress up to 50MB of image is https://www.websiteplanet.com/webtools/imagecompressor

Website External Links for SEO friendly

You may want to set also all your external links to "nofollow" as part of SEO recommendation.

<a href="https://www.externaldomains.com" target="_blank" rel="nofollow">

HTML Optimization

Lastly, for your production web pages, it is highly recommended that you minify the entire HTML pages especially for the home page or best if possible for all pages you have in your website, this makes the website more faster to load.

You can download the offline version but you need to have Visual Studio to compile this project.

http://deanhume.com/a-simple-html-minifier-for-asp-net/

Another option is the online version if you feel that this suffice your needs.

https://www.willpeavy.com/tools/minifier/

Enjoy!

How to optimize your website

Search

Categories

Links