The weight of words, the impact of images … or is it the other way around?
The Size of the Images.
When developing a website, it is crucial to limit image size, which can unfortunately affect the loading speed. The Kentico platform allows us to control the dimensions of the images (either as an attachment or in the media library), thus limiting their maximum size. However, even if you can control these parameters, it is sometimes impossible to obtain the desired display. In case you want to feature a smaller version of a particular image, Kentico offers a “handler” that allows you to retrieve it and apply a sizing parameter (width and / or height) to limit its size. This will prevent the browser from loading a heavier than necessary version of the image. Therefore the “image size” factor improves the performance of a website.
The Format of the Images.
The format is also an important parameter. Efficient optimization comes through management of visuals. Our preference is to use .SVG files instead of .PNG for the icons. This format is easier to use and can adapt to all sizes without increasing the weight of the file, unlike .PNG, which becomes heavier when enlarged. By opting for SVG, we control the dimensions of the icons, without increasing their weight while maintaining a high-quality display. Another positive point; the use of the same .SVG visual for several formats avoids the duplication of icons.
“It is all about cache”.
The optimization of a Kentico site happens first and foremost by configuring the platform. It gives us several options of cache and minification. Here is a tip: do not forget to disable the “debug” mode in the control panel of the same name. This will reduce the use of site resources, which will increase its speed. Keep this option during development phase only.
Secondly, note that many of the options only work when using Kentico features. For example, when we use SASS, we do not directly insert our CSS into the interface via the “CSS Stylesheets” section. Kentico is not able to compress our CSS files automatically. In this case, we better opt for the use of the “GetResource.ashx handler”. It must be applied for all static resources such as Javascript and CSS.
Kentico also offers several useful features for cache management in the “Performance” parameters (client cache, server cache, durations, page compression).
For more information on configuring the cache, visit https://docs.kentico.com/k10/configuring-kentico/optimizing-website-performance/configuring-caching.
What about the Server Configuration then?
When you talk about cache configuration, you mainly talk about server configuration. By default, only the static compression configuration is enabled on a server.
»»»»To improve performance, dynamic compression must be enabled.
In this case, you must install and activate the module in Internet Information Services, better known as “IIS“. Once the module is configured, the dynamic cache is active.
Still in the interest of improving performance, consider adding compression to static and dynamic files. You will need to update your “Web.config” (website configuration) file to add the kind of files that will need to be compressed, keeping static and dynamic ones separate, including SVG, Javascript, CSS, etc. To include SVG files in compression, add entries to the server’s “applicationHost” file then restart IIS. Enabling GZIP compression is essential to the performance of a Kentico website.
For more information on enabling HTTP compression, visit https://docs.microsoft.com/en-us/iis/configuration/system.webServer/httpCompression/#003
In addition, for more information on how to add SVG to compression, visit https://stackoverflow.com/questions/14410331/cant-get-iis7-to-gzip-font-face-font-files/23940235#23940235
Want more Tips? Here You are.
Here are some additional tips to optimize your website.
- Use common resources and libraries directly from a CDN rather than uploading and including them in your project. This includes your “Bootstrap”, “jQuery” and other javascript and / or CSS plug-ins developed outside the project.
- Put all your Javascript files at the end of your HTML (rather than at the beginning). This allows your page to load, including your CSS, before Javascript files that can block the loading of the site.
In Conclusion.
When it comes to website optimization, there are several different solutions. Those presented above are only a fragment of the possibilities offered by the Kentico platform. Hope this information sends you in the right direction for your Kentico optimizations. You can always contact our Web Agency for more on Digital Marketing.
