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

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:

Compression is also applied to CSS & JavaScript files.

HTTP Compression Test
Check GZIP Compression

CSS & JavaScript Minification

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality.

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.

Closure Compiler Service by Google
CSS Minifier

Image Compression

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:

JPG Optimise
PNG Crush

Dynamic Data

For content that has to be changed regularly (speakers, workshops, etc), a single JavaScript file was created that includes all the information. After the page loads, html elements are populated with data from the JavaScript file.

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

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.

Desktop Website Speed Test from Pingdom
Mobile Website Speed and Performance from Google

Keep in mind that load times may vary depending on the tools you use, the location and server status.

Pingdom Website Speed Test
Google Mobile Page Speed

Conclusions

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
http://www.digitized.gr/

Like what you read? Give Alex Ioannidis a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.