Ignored website optimizations

November 5, 2016

From time to time people ask me to do a review of their website and give them some recommendation on how to improve performance or maintainability. A very common trend I see is that neither clients nor developers don’t really care of how fast the website will be or if the code will be maintainable from a long-term perspective during the website development process. Clients notice those issues after a while. By this post I would like to give you a list of actions that may be taken to improve your website.

Optimization areas

If you have a feeling that there is something wrong with your website visit the YellowLabTools website and check your website there. This tool analyzes websites from many perspectives, gives you an extensive list of technical information and gives your website a score. You will get a really precise overview in few seconds.

If you have a Kentico website you may use the KInspector that can give suggestions on what to improve from the Kentico point of view. However, this tool is a little bit complicated to use and read its results.

Based on my observations I have defined 4 areas of optimizations:

• Kentico
• Website output
• Javascript
• Media

Kentico

• Disable a viewstate in webs parts when possible to reduce size of the html output.
• Fill in required columns in Repeaters and web parts that get data from the database to lower execution time of SQL queries and lower size of their results.
• Enable the output cache to prevent querying the database.
• Enable minification and gzip compression to lower size of CSS and JS generated by Kentico.
• Move binary data from a Content tree to a Media library to avoid querying database when not needed.
• In simple transformations change a transformation type from ASCX to Text/XML to avoid compilation when not needed.
• In case of a Repeater web part nested in a transformation reimplement the logic with use of the Hierarchical viewer web part to lower number of SQL queries behind.
• Give web parts a semantic name in following format: “Semantic name [Web part name]” to enhance maintainability inside the Design tab in the Pages application.
• Fix corrupted Design Mode to have a clean Administration UI.
• Clean Kentico environment - delete unused or obsolete objects and other functionality.

Website output

• Format the HTML, CSS and JS code to improve maintainability.
• Fix the HTML and CSS syntax errors to prevent issues across browsers.
• Concatenate and minify CSS and JS files to lower number of requests.
• Get rid of unused CSS rules to lower size of CSS files and time required for processing them.
• Bring some convention to CSS rules naming and structuring them across CSS files to keep CSS code maintainable from a long-term perspective.
• Avoid inefficient CSS code like @import or selectors that contain the * character to speed up execution.
• Deal with resources that return 404 to avoid unnecessary requests or fix missing functionality.
• Make a website reasonably working across supported browsers and devices.

Javascript

• Defer code execution not to block rendering.
• Refactor the code to touch DOM only when unnecessary to speed up the code execution.
• Concatenate code/files when possible to lower number of requests.
• Load libraries from CDN to speed up page load.
• If using some large library like Bootstrap link only subset of the library that you actually use to speed up page load.
• Lazy load 3-rd party code (i.e. analytics, social media widgets) not to block rendering.
• Resolve javascript errors in console to have no bugs.

Media

• Optimize size of media (images, video, etc.) to lower a page load size.
• Join icons in sprites to reduce number of requests.
• Implement lazy loading to reduce number of requests on page load.
• Implement responsive images when reasonable to lower a page load size.

Is it a long list? Well, I would be capable to bring up some more if you want. For now it is enough I think :) There is a lot to be optimized. And my last thought… If you want to speed up your website quickly start with lazy loading.