Pareto principle - named from after Italian economist Vilfredo Pareto showed that approximately 80% of the land in Italy was owned by 20% of the population. Amazed by Pareto's principle, I thought how I could apply this rule for website‘s optimization?
It made me think what are those 20% things that I can do that will help me score big performance gains on website optimization. To be precise 80%. These tweaks, in turn, will contribute to reducing the page load time considerably.
After building numerous websites/web-applications and by observing errors still made by developers due to naivety, I concluded following errors were still made and have a significant impact on website's performance and its load time.
For this article, I will limit my discussion on few key points that if fixed with few hours of effort will create a significant impact.
I use Kentico CMS for developing large websites, and my examples will include snapshots of how it is done in Kentico. However, to make this discussion technology agnostic I will provide a relevant technology agnostic example.
1. Minify your Javascript - The most common error which developers make is not keeping Javascript minified. Minification reduces the size of a resource by as much as by 80% thus reducing the amount of data transferred over HTTP. Kentico provides an excellent solution where you don’t have to run a build process to get a minified JS. Developers can keep writing code in the way, and it will be served minified on the fly. A Win-Win situation for everyone.
Referring a file in Kentico like below will not result in minification.
<script src="/CMSScripts/jquery/jquery.js"></script>
Referring a file in Kentico like below will result in minification.
<script src="/CMSPages/GetResource.ashx?scriptfile=/CMSScripts/jquery/jquery.js"></script>
Non-Kentico users can use a service like Google’s Closure compiler to minify and bundle code. A good thing about Google’s Closure Compiler is that I can check for dependency among JS files to correctly bundle them as one file which Kentico cannot.
2. Minify CSS - Another common error which developers make is not minifying CSS file. Minifying a CSS file will result in 80% reduction in payload transfer over HTTP. You can easily achieve this with Kentico.
<link href=CMSPages/GetResource.ashx?stylesheetname=stylesheet_file>
= CSS minification is working.
<link href=CMSPages/GetCSS.aspx?stylesheetname=stylesheet_file>
= No minification.
Non-Kentico users can use an excellent service like cssnano or csso to minify CSS. Both tools do a great job.
3. Enable Gzip compression - There is no reason not to use this provided it is already built-in configurable feature in all application servers.
You can test whether your website has Gzip enable or not - Enable Gzip Compression It also has ways through which gzip can be turned for Apache, IIS servers.
Website Gzip compression can reduce the size of an HTML page by 30% and can lessen the size of a JSON response by up to 80%. Gzip compression results in fewer payload transfers over HTTP
In Kentico it can be done by going to Settings -> System -> Performance
4. Leverage browser caching - Every time a browser loads a web page it has to download all the various web resource files to display the page correctly. These resources include all the HTML, CSS, JavaScript, and images. During initial page load (a.k.a without cache) it is bound to happen. However, the idea of leveraging is to not re-load static resources on subsequent calls. These resources are the ones who don't change over time like JS, CSS or Images.
Twitter on average load 3+ MB on its initial page load request. Loading all these resources over and over will create a bad UX for Twitter users.
The issue is a double-edged sword.
These large files take longer to load on a slow internet connection. Bad user experience(UX)
Each resource request makes a separate request to the server means more non-asynchronous or blocking calls thereby reducing your page speed and increasing page load time.
Remember no caching means no performance.
Kentico is just ASP.NET application, so likewise leverage browser caching can be implemented by adding one line your web.config file like this under tag
<staticContent>
<clientCache cacheControlMode=”UseMaxAge” cacheControlmaxAge=”365.00:00:00” cacheControlCustom=”public” />
</staticContent>
The above code will set caching for static resources for 365 days. The format is days:hours:minutes:seconds
Gtmetrix has explained enabling browser caching for Apache server here.
5. Use CSS sprites instead of individual images - Combining images into as few files as possible using CSS sprites reduces:-
a. the number of round-trips and delays in downloading other resources
b. reduces request overhead, and
c. can reduce the total number of bytes downloaded from a web page.
For this optimization, images that are part of website theme are the ideal candidate like site logos. This step should be discussed with your site designers upfront before starting the development process. Remember, every HTTP request is blocking call that will defer/delay loading of the page.
6. Use external CSS and JS - Any static resource if combined with power leveraging browser caching will reduce the size of a page on each page load. For this reasons CSS and JS files should be kept separate.
7. Optimize load order for CSS and JS loading - A simple but yet often ignored rule is the ordering in which CSS and JS files are loaded.
i. Load CSS files in the head tag of a page
ii. Load JS at the end of the page - Defer loading of JS if possible. A better strategy is to load only specific JS using tools like RequireJS, or combine all JS files into one file using tools like Google Closure Compiler.
There are other 20+ parameters that should be considered while developing a website. However, the performance gains using at least these seven principles will create maximum impact on your website’s performance and are in line with Pareto’s principle.
Further useful links
Top comments (0)