The 3 Tools I Used to Optimize Asset Loading on the eko Website
eko’s homepage features the best and latest in choice-driven-entertainment. That means media files - Lots and lots of media files! These constitute posters for shows, thumbnails for episodes, preview video files for interactive experiences and more. Not only that, as the destination for watching eko’s original content, the site also needs to support a plethora of clients and form factors. That includes mobile, desktop and everything in between.
If you ever maintained a website or a webapp, at some point, you must have wondered: why do some pages load more slowly than others? While performance is a big and often-discussed topic in the world of web development, one of the usual suspects of bad performance is unoptimized media files (in this context — we’re referring to images and videos).
Needless to say, slow loading is a bad experience for users. Not only that, but the wider-spread effects include a higher bounce rate and lower ranking on search engines. All of these can make your website harder to find online.
I was recently tasked with improving the loading speed of the eko homepage. As you’d expect, one contributor to the slowdown was that some of the page’s media assets weren’t optimized, well… optimally. This problem is not unique to eko though, and common to all sites where the content is uploaded by a team of people, working with multiple tools and processes exporting a myriad of formats and file types. The content outputted by these authoring tools is not always ideal for web performance.
After analyzing the assets to understand exactly how they can be optimized, I used a series of tools and design patterns to do so. I’ll discuss those tools and how I pinpointed the issues in the following sections.
Firstly — what do I even mean by “asset optimization”? In the broad sense — it entails matching certain attributes of a media file to the device and bandwidth of the user to achieve a good balance between file size and media fidelity. An image, for instance, can be optimized by changing its physical dimensions (width/height in pixels), file format and amount of compression.
The same applies to video, only here one important aspect of optimization is choosing a proper video codec. Not all codecs are created equal. Some codecs run better than others on certain devices and operating systems (or not at all). Each codec has its own advantages and drawbacks when it comes to file size and video quality.
You can optimize assets manually with locally installed software, or even use an online compression service, but this can be very time-consuming. Ideally, you wouldn’t want to include a web developer in the loop of an editor updating content, and so my solution was to automate the process.
Here, the first important tool comes in — Cloudinary. Using this service, you can set up an account and upload your assets online to optimize them. If your assets are already online on some storage infrastructure like S3 or similar, you can skip that step and point Cloudinary to their location.
Getting an optimized image from Cloudinary is quite straightforward — you request it using a URL containing the desired optimizations, for example:
https://res.cloudinary.com/idemo/image/upload/h_400,w_500,q_auto,f_auto/car_lady_dog.jpgThis request will return an image which is:
- 400px high. (h_400)
- 500px wide. (w_500)
- Dynamically compressed for an optimal balance between file size and visual quality. (q_auto)
- Dynamically formatted to save bandwidth and optimize delivery time. (f_auto)
Don’t forget to replace idemo with your cloud name (found in your account page). If you provided an auto-upload URL mapping for assets that aren’t hosted by Cloudinary, add them to your URL like this:
https://res.cloudinary.com/[your_cloud_name]/image/upload/h_400,w_500,q_auto,f_auto/[your_mapping]/[asset name and file extension]
Another best practice is loading image assets which are sized for the current viewing device. For example, instead of loading a full-sized thumbnail image for both a desktop monitor and a mobile device, load smaller versions for mobile devices. This will save bandwidth and improve loading times.
This can be implemented with an <img> tag including the srcset & sizes attributes, which the browser handles natively:
<img src="https://res.cloudinary.com/idemo/image/upload/w_350,q_auto,f_auto/car_lady_dog.jpg"srcset=
"https://res.cloudinary.com/idemo/image/upload/w_150,q_auto,f_auto/car_lady_dog.jpg 150w,
https://res.cloudinary.com/idemo/image/upload/w_350,q_auto,f_auto/car_lady_dog.jpg 350w,
https://res.cloudinary.com/idemo/image/upload/w_500,q_auto,f_auto/car_lady_dog.jpg 500w"sizes="(max-width: 540px) 150px, (max-width: 800px) 350px, 500px"
>
The familiar src attribute serves as a fallback: in browsers where the srcset & sizes attributes are not supported, it will dictate our asset source.
The srcset attribute specifies the URLs which will be used dynamically. In order for the browser to know the size of each asset prior to loading it, a width (=w) value in pixels must be provided.
The sizes attribute specifies which asset should be used for the current viewport: the browser will go through the provided media conditions and pick the matching asset (the one closest to the desired size). The last size which has no media condition, will be picked when no other condition applies.
Finally, if your page needs to load a lot of images at once, it’s most likely a good idea to delay their loading and appearance — this pattern is called Lazy Loading. Loading your weighty media assets last will allow other page content such as text, buttons, forms, etc. to load faster. This provides a better experience for the user as it allows them to interact with the page much sooner.
To detect the problematic assets, I used Google’s PageSpeed Insights which shows them quite clearly. There are quite a few ways to lazy load and soon there will also be a native one.
Remember: No matter how complex your website is, optimizing images and other assets will keep their sizes down and increase overall performance. Doing so automatically with a service insures that this important step doesn’t “fall between the cracks” during the lifecycle of content on your site.
If you want to learn more about asset loading optimization, check out these resources:
And if you want to come work with me at eko, head over to our website and take a look at our open positions!
We’re always looking for awesome devs to join our team…
