When a crisis hits, as humans we feel an obligation to respond. Whether we “stand with” those affected, or actually can aid those affected in some way – there is an innate desire to reach out and express our solidarity or willingness to help out in the face of a disaster.
In 2020 we have seen this with both the COVID pandemic and with the Black Lives Matter movement. It has been an incredibly traumatic time for millions of people, so expressing those feelings on a website is one way to get our message out.
I was curious to see how the web has reacted to the COVID pandemic – so I used the HTTP Archive (a collection of 5M websites’ performance information) to examine how many web responses had the term “covid” in the url. Perhaps unsurprisingly, it looks like a lot of graphs we have all been obsessing over in 2020:
NOTE: There were assets on the web with the term COVID before the crisis – due to terms like “nicovideo.com.” There is no need to ignite any conspiracy theories based on this chart.
Some of the jump in April onward is due to new sites with covid in the hostname. Others are sites adding one or two COVID assets to their homepage. Is there a different effect to just adding one or two assets versus an entire page?
COVID in the Hostname
In the June 2020 HTTTP Archive, there are 2952 sites with COVID in the hostname: For example: https://covidpatientsupport.lthtr.nhs.uk/.
How do these new sites with covid in the hostname compare with the rest of the web? It appears that they follow exactly the same trend in terms of page weight and SpeedIndex:
It appears that pages designed to respond to the COVID pandemic generally follow the trend of the web.. Some are small and fast, while others are big and slow. I assume that if the other pages on the site are slow, so will the new pages on the covid host.
2500 websites do not account for the 426k responses with covid in the filename. The VAST majority of files are content added to existing pages. Let’s take a look at what files are being added to the web in response to a pandemic:
Files types with COVID in the path
We can parse the HTTP Archive by the extensions, and see which filetypes grew the most. Here’s a chart (limited to extensions with >100 responses).
Again, this looks ominously like a lot of COVID 19 graphs I have been watching for the last few months:
The top 2 filetypes are images: JPG and PNG, and the 3rd line (nearing 50,000 responses) is the empty extension. Svg, Gif, and jpeg also appear in the top 10 extensions. The sheer quantity of jpg and png files indicate that the vast majority of content “added onto a page” are images.
The vast majority of these images are on pages that do not have covid in the hostname – so they may be additional images on an existing page – like a hero image or image in a carousel.
Performance of COVID-named files
A global pandemic has begun. The team knows that a response is required, and it needs to be done quickly. In my head, I imagine an editor frantically shouting :”We need a COVID response! Get an image up now!” like Jonah Jameson in every Spiderman episode ever:
Once the appropriate image is obtained or created, it is an urgent request, so the process for uploading images is bypassed. None of the optimisations are done to the final product – the important thing is to launch our COVID response.
Sadly, the data matches my fanciful process:
jpg
In June 2020, we have 185k JPG files with the name COVID in their path. Since in Feb 2020, there were under 800 files that fit this criteria, we can assume that 99.5% of these were added in response to the current pandemic.
Jpg images added in the last 2 months with “covid” in the url path tend to be 200-250% larger (by percentile) then all jpg images on the web.
png
The difference in PNG is even more striking – with the median covid PNG being 1100% larger than the median png on the web.
gif
gif files (over 1 KB) with and without covid follow the same trend, with the difference increasing at higher percentiles.
Images with covid in Hostname vs. elsewhere
What if we compare images with COVID in the hostname (a site built with covid in mind – theoretically with design and process) versus images with COVID later in the path. Again we see that the average image size is 100-300% larger when an images is “just added” to a site.
It appears that no matter how we dice it, images added to an existing site as the result of an emergency are larger than the average image, due to a lack of care in optimisation of the image size.
The Huge COVID Images
The largest COVID png is 36 MB.
The original image is on a website discussing the pandemic in Cameroon. In Cameroon, the average daily internet usage is 50 MB/day. The original image uses up over 50% of the average daily consumption for users! That is crazy especially when simply resizing and converting to jpg gets you a high quality 55 KB image.
Big Gifs
The largest GIF is from a university in Malaysia – weighing in at 65 MB. Simply converting to an MP4 (with no further optimisation) gets it down to 460 KB.
There is also a 28 MB real estate advertisement GIF that is appearing in many local Long Island NY newspapers websites that takes up spots 3-5 in the huge GIF rankings.
I wonder how many impressions this ad got (fully loaded)?
The Impact of Large Images During a Pandemic
I think about this Tweet from HenriHelvetica a lot. During a Hurricane Michael in 2018, all people with damaged property were told to file a report at Fema.gov. The page was 1.6 MB, and 75% of it was a photo of radar showing….the hurricane. Let’s think about that: cell coverage during a hurricane: not good. Many people accessing one page: slow. Then to toss in a huge image…
By not optimising the image on the FEMA website – the page might have become inaccessible for some users. In times of emergency and pandemic, speed and performance must be considered as essential. If the page cannot load for someone under duress, they cannot get the help they need.
A Web Performance Crisis in a Global Health Crisis
In the push to get COVID related imagery on our webpages, optimisation of images has often been skipped. This has a profound effect for people with limited data plans and/or slow internet connections Above were several international examples, in countries where data is expensive or limited. But what about public health or governmental sites that provide pandemic information? You guessed it, many of these are also adversely affected. For example:
CVShealth.com (a US pharmacy) has a 13 MB image of a woman wearing a mask,
This governmental site in India has a 15 MB image on the homepage.
The NHS site I referenced above has a 6.6 MB gif (and 3.3 MB of uncompressed JavaScript…)
The bus company in Wenatchee, WA must have realised that their hero image at 19.9 MB was too large – it now goes through a resizing CDN, but is still a whopping 7.5 MB.
Finally, a a patient advocacy organisation uses 10.2 MB to deliver a COVID hero image – yet the entire page is just 11.2 MB. I bet this site was really fast before the pandemic.
It did not take me long to come up with these examples. I could list a hundred more of random businesses with huge covid homepage images too.
Conclusion
The web has become one of the principal ways of communicating information. During a crisis, we all want to share information (how we can help, are we still open, we stand with you). When disaster strikes, we want to convey this message quickly, so that our customers/friends/partners know what is going on.
In this investigation, I‘ve found that in responding to the covid pandemic, many thousands of images were added to the web with “covid” in the url path. I also found that in general, basic optimisation practices were not followed when adding these images to sites, resulting in images that are much larger than required, impacting load times and data usage for these sites,
Doug Sillars: Performance Expert and Developer Advocate 