Behind the scenes of the 7th edition of Digitized
Coding Digitized’s website was a big challenge and performance was a top priority. You can see below some techniques that were used to achieve fast loading times.
HTTP compression is a capability that can be built into web servers and web clients to improve transfer speed and bandwidth utilization.
For performance, the html document is compressed in order to reduce bandwidth and improve render times. Along with compression an optimization technique is used that removes whitespace to further reduce the size of the document.
The end result for the html document of the front page:
The website uses minified versions of CSS/JS files that have a reduced size. For example the original stylesheet is 42 KB and the optimized version that is transmitted to the browser is only 6.6 KB (minified & compressed).
There are online tools you can use, that remove whitespace or rewrite portions of the code in a more efficient way.
Image compression is a type of data compression applied to digital images, to reduce their cost for storage or transmission.
Used tools to compress images so that they are smaller in size and load faster in a browser. Below you can see the result for the slider images:
This solution also helps with maintenance since you don’t need to edit html templates to update content, but use a single file to make any changes needed.
Load time is the time it takes to download and display the entire content of a web page in the browser window.
Below you can see the results from 2 different tools, that check the load time and performance of a website.
Keep in mind that load times may vary depending on the tools you use, the location and server status.
A responsive website with fast loading times, improves the user experience and also sets the bar high for further improvements and optimization techniques.
Digital Design Conference, Athens, 22–23/09/2017