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.
Referring a file in Kentico like below will not result in minification.
Referring a file in Kentico like below will result in minification.
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.
= CSS minification is working.
= No minification.
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
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