ERK'2021, Portorož, 343-346 343 Evaluating the Potential of Web Image Optimization for Improving User-Perceived Performance Tjaˇ sa Heriˇ cko, Boˇ stjan ˇ Sumak, ˇ Spela ˇ Cuˇ cko, Saˇ sa Brdnik University of Maribor, Faculty of Electrical Engineering and Computer Science Koroˇ ska cesta 46, 2000 Maribor, Slovenia E-mail: ftjasa.hericko, bostjan.sumak, spela.cucko, sasa.brdnikg@um.si Abstract For websites, keeping perceived loading times short is immensely important for ensuring a positive user expe- rience and overall website success. As images, on aver- age, represent almost half of website total content size, they are commonly considered as resources where opti- mization opportunities are not utilized to the fullest, thus, affecting web performance negatively. In this paper, we analyzed 3,500 real websites to get a better insight on how images are used on sites, to what extent images are optimized, what can be improved, and how much can be reduced in terms of size and time, from both desktop and mobile perspectives, as well as with respect to different ranks of website popularity. Despite recommendations, adequate image optimization is still lacking on most web- sites, with the issue present increasingly on lower-ranked websites and mobile sites. The biggest savings of 0.32 seconds and 442.1 kB for desktop and 1.6 seconds and 337.6 kB for mobiles at the median are expected from us- ing modern formats. However, sizing properly, encoding efficiently, and deferring offscreen images also indicate considerable load time and size reduction. 1 Introduction Ensuring fast loading times of websites is key for pro- viding a positive user experience, retaining users and im- proving conversion rates [1]. It is recommended that the page load time should not exceed 3 seconds, as studies have shown that 53% of mobile users will otherwise leave a website [2]. Perhaps even more important than the ac- tual speed is users’ perception of how quickly the web- site loads. Thus, several existing studies in recent years have been focusing on analyzing web performance from a user-perceived perspective [3]–[7]. A common prejudice is that images largely affect web performance negatively, due to inadequate use of image optimization [7], [8], especially considering that images represent around 45.7% and 46.1% of a website’s to- tal content size of desktop and mobile sites, respectively [9]. There are standard recommendations that can be em- ployed to minimize the negative effect, e.g., sizing im- ages properly, encoding images efficiently, serving im- ages in modern formats and deferring offscreen images [10]. However, to the best of our knowledge, there is no study investigating to what extent these recommendations are implemented on real sites and how much websites’ performances can benefit from additional optimization. In this paper, we evaluated and analyzed real web- sites empirically to investigate the potential of image op- timization for improving objective load time and user- perceived performance. The research objectives guid- ing the study are as follows: (i) To present an overview of the use of images on sites, (ii) To present the us- age of image optimization opportunities and their extent, (iii) To estimate savings of common image optimization opportunities in terms of time and size. The analyses were made from both desktop and mobile perspectives, and with respect to five popularity ranks categories. To achieve these objectives, an experiment was conducted on 3,500 real websites analyzed with the Google Light- house tool, which can provide a rough estimate of un- necessary bytes and seconds transmitted due to websites not implementing common image optimization opportu- nities. The study’s findings provide insight into the cur- rent status of image and image optimization usage on the web, while further encouraging the use of image opti- mizations and additional research on performance-based image optimization. 2 Related work The research presented in this paper is related to work on the characterization and analysis of modern websites through aspects of web performance, with an emphasis on web image optimization. Mendoza et al. [11] stud- ied the composition and complexity of the top 100,000 popular websites ranked by Alexa to identify sources of wasted bandwidth. The results show that 13.1% of the desktop website’s image content size and 15.1% of the mobile website’s image content size on an average sites are unnecessary, unused, or redundant. The authors also provide some suggestions on how to overcome overhead in image content through image format conversion, im- age compression, and image resizing, however, only in terms of size reduction, without investigating further the impact overall image optimization has on user-perceived performance. Kelton et al. [12] quantified the potential of web image savings by analyzing 300 landing and 880 internal web pages selected from the Majestic list. The authors’ findings suggest that 21% of the total page size can be reduced at the median. Initiatives such as HTTP 344 Archive [9] and Chrome User Experience Report (CrUX) [13], provide a good insight into the current state of the website landscape; yet, they lack in presenting the poten- tial of optimizing images for performance tuning, the gap we aim to address with this research. While our study is similar to existing work, it is focused primarily on pro- viding empirically based insight into common real-world image optimization opportunities that can be exploited to enhance web performance. 3 Method An experiment was conducted on 3,500 sites to achieve the research objectives. The CrUX [13] BigQuery database using a May 2021 dataset was used to obtain a representative set of websites. From the dataset, 700 sites from each of the five ranking categories were selected randomly. Each ranking category presents the popular- ity of sites by order of magnitude. In the first rank R1 are top 1k sites, in the second rank R2 top 10k, in the third rank R3 top 100k, in the fourth rank R4 top 1M, and in the fifth rank R5 top 10M sites. For each ob- served site, performance and optimization opportunities were analyzed with the Google Lighthouse tool (v7.3.0). Lighthouse provides a user-perceived performance esti- mate with the Performance Score (PS) set between 0 and 100, with 100 presenting the perfect score. PS is a weighted average of scores of six performance metrics, representing a balanced representation of the user’s per- ception of performance. Among others, it also provides four image-related opportunities – properly sized images (lists inappropriately sized images and estimated savings after resizing), efficiently encoding (lists unoptimized im- ages and estimated savings with the use of compression), using modern image formats (lists images in older for- mats, i.e., JPEG, PNG, BMP, and potential savings from using the WebP and A VIF formats) and defering offscreen images (lists offscreen or hidden images with estimated savings of implementing lazy loading) [10]. We analyzed from both mobile and desktop perspectives, using an em- ulated desktop device (a device with macOS 10.14.6, in a Chrome window size of 1350x940, simulating a broad- band network connection) and a mobile device (a device with Android 7.0, in a Chrome window size of 360x640, with slowed-down device CPU by a factor of four and simulating a slow 4G network speed). To reduce vari- ability in measurements, each site was audited with five analysis runs. The median values were used in a fur- ther analysis, as our preliminary research showed this removes outliers effectively due to environmental noise and fluctuations. The analysis was conducted on land- ing pages only. The data collection process was run on a designated computer (Windows 10 Pro, 3.60GHz Intel Core i7-7700, 16 GB RAM) from 1 until 8 June 2021. The collection process took 400 hours, with 35,000 au- dits performed. 4 Results and Discussion To understand the use of images in web landscape bet- ter, we firstly present the results of the image analysis, summarized in Table 1. The median number of web- sites‘ images being transmitted over the network to be displayed in the browser is 31 for desktop (mean=46.3; SD=53.7) and 26 for mobile sites (mean=39.5; SD=45.4), which represents about 38.9% and 35.3% of websites‘ total request count of all resources for desktop and mo- bile, respectively. It can be observed that the selected sites, on average, display fewer images on mobile de- vices in comparison to desktops. The median value of the size of all image resources per website is 0.75 MB for desktop (mean=1.88; SD=3.76) and 0.58 MB for mobile (mean=1.63; SD=3.52), representing around 46.9% and 40.7% of a website’s total resources‘ size for desktop and mobile, respectively. These findings are consistent with existing research [9], [11] discussing that images com- monly contribute almost as much to the total website size as other resources, e.g., stylesheets, HTML, fonts, and scripts, combined. Although the ratio of image requests count to total requests count is smaller in comparison to the ratio of image resources size to all resources size, this shows that image resources are commonly more immense in terms of size than other resources; thus, each image resource has a more significant influence on a website’s total size than an average other resource. Based on the experimental results, we estimate that the size of a sin- gle image resource presented on a website is around 22 kB on desktop sites and 20.9 kB on mobile sites. Similar as the number of requests of image resources is slightly lower on mobile than desktop, image sizes are also lower on mobiles. This aligns with standard recommendations. Interesting trends are revealed when observing the aforementioned metrics split by ranking closely; a slight decreasing trend of the number of image resources per website can be observed when moving from more popu- lar to less popular websites, while an increasing trend is observed for total images transfer size per website. These results show that, while more popular pages usually con- tain more images, image resources are smaller in size than image resources on less popular pages. This holds true for both mobile and desktop. This results in an in- creasing estimation of single image size with each rank; from 13.5 kB for R1 to 40.4 kB for R5 on desktop and from 11.9 kB for R1 to 39.1 for R5 on mobile, presenting an average increase of 31.6% and 34.7% for each ranking category for desktop and mobile, respectively. The presented results confirm that images are major contributors to site resources and overall website size; thus, their impact on performance can be significant if not optimized adequately. A closer look at the user- perceived performance, as estimated by Google Light- house, showed a large discrepancy in results between desktop and mobile, as the median PS is 32.3 points lower for mobile compared to desktop. The median PS of an- alyzed websites in a desktop view is 80.7 (mean=75.5; SD=20.5). For a mobile view, it is alerting low, with a median of 48.4 (mean=50.5; SD=26.1). We further ana- lyzed if any differences occur when comparing across dif- ferent ranking categories; a decreasing trend is noticed, as the median PS for desktop is 86.4, 81.8, 80.3, 77.4, and 345 Table 1: Median values of image-related metrics, describing the use of images on websites, split by device and ranking categories. Desktop Mobile R1 R2 R3 R4 R5 All R1 R2 R3 R4 R5 All Me. image request count 32 40 34 31 23 31 23.5 32 28 27 22 26 Me. request count ratio* 41.7% 40.7% 38.1% 38.5% 34.6% 38.9% 35.8% 36.8% 35.1% 35.3% 33.1% 35.3% Me. all images size [MB] 0.48 0.67 0.74 1.00 1.06 0.75 0.30 0.50 0.55 0.85 0.92 0.58 Me. images size ratio** 0.35% 0.44% 0.43% 0.55% 0.56% 46.9% 0.27% 0.37% 0.38% 0.50% 0.54% 40.7% Me. single image size [kB] 13.5 17.2 21.6 30.1 40.4 22.0 11.9 16.4 20.9 29.2 39.1 20.9 Me. = Median * Request count ratio represents a ratio between image resources requests and other resources requests. ** Images size ratio represents a ratio between image resources size and other resources size. 76.3 for R1, R2, R3, R4, and R5, respectively, and the me- dian PS for mobile is 52.9, 44.2, 48.6, 48.0, and 49.1 for R1, R2, R3, R4, and R5, respectively. This result is intu- itive, as more popular sites are expected to be more opti- mized. Perfect PS was reached by 3% of observed sites on the desktop (N=106) and by only 0.8% on the mobile (N=28). From these websites, on the desktop, 41.5% of them are from the ranking group with the most popular websites. On the mobile, websites with perfect scores are fairly equally distributed across all ranking categories. The above presented experimental data hint that most websites have room for improvement, while the question remains open as to how much can be done with image op- timization. Table 2 gives results on how much four differ- ent aspects of image optimization could aid performance tuning. Each of the four optimization opportunities is pre- sented with the percentage of websites that could benefit from the optimization and further analyses based on data of sites where an opportunity can only be applied – the ra- tio of images, which the opportunity would address, to all images, and estimated savings in terms of size and time reduction per website and per single image on a website. A detailed overview of each image optimization op- portunity revealed that, on the desktop, 52.4% of sites could be improved with sizing images properly, 32.9% with encoding images efficiently, 66.2% with using mod- ern image formats, and 13.5% with deferring offscreen images. On the mobile, fewer sites could benefit from sizing images properly (38.1%), while more could en- code images efficiently (36.1%), use modern image for- mats (69%), and defer offscreen images (33.8%). Where image opportunities can be employed, around 25.4%, 13.2%, 25%, and 11.6% image resources could be sized, properly encoded efficiently, use modern image formats, and defer offscreen images, respectively, on the desk- top, while on the mobile 13.4%, 13%, 25%, and 19.5%. An increasing trend was observed between ranking cat- egories for all four optimization opportunities, meaning that less popular sites could benefit more from these opti- mizations. Additionally, in general, more images on sites with lower ranks require optimization. On the average sites, 0.25 seconds and 348.5 kB could be saved if at least one of the optimization opportunities is employed on the desktop, while 1.07 seconds and 240.1 kB on the mobile. If normalizing savings per single image on a site, on av- erage, this represents 0.03 seconds and 46.9 kB on the desktop and 0.2 seconds and 41.4 kB on the mobile. For both mobile and desktop, estimated savings in size and time commonly increase with each popularity rank. From the four opportunities, using modern formats and sizing images properly provide the biggest savings, while ef- ficiently ecoding and deferring offscreen images provide less. However, we argue that results show that all four op- timization opportunities should be considered to improve performance, as all could provide significant savings. 5 Conclusion Images largely contribute to a website’s total resources and size. Using a large volume of images can lead to sev- eral web performance-related issues, as images are com- monly not optimized to the fullest, despite standard op- timization recommendations. Load time and size reduc- tions could be realized by applying image optimization techniques. As we observed in the study, the biggest sav- ing could be achieved by using modern image formats – 66% desktop and 69% mobile websites could bene- fit from this, with time and data savings of 0.32 sec- onds and 442.1 kB on desktop and 1.6 seconds and 337.6 kB on mobile. However, sizing images properly, encod- ing efficiently and deferring offscreen images could also provide considerable savings. We observed that lower- ranked websites generally have higher potential savings, and more savings can be gained on mobile sites. The study’s findings encourage the use of image optimization techniques and further research on performance-based image optimization. In the paper, we only evaluated how each of the four image optimization opportunities alone could save in terms of size and time, therefore, it is a challenge to predict how combining these opportunities would impact savings and performance, which we aim to assess in the future research. Acknowledgments The authors acknowledge the financial support from the Slovenian Research Agency (Research Core Funding No. P2-0057). References [1] Google Developers, Why does speed matter?, 2020. [On- line]. Available:https://web.dev/why-speed- matters/. 346 Table 2: Percentage of websites with opportunity for image optimization, median percentage of images needing optimization, estimated savings (time and size) and normalized estimated savings per single image (time and size). Desktop Mobile R1 R2 R3 R4 R5 All R1 R2 R3 R4 R5 All Properly sizing Percentage of sites 45.9% 53.0% 53.3% 54.0% 55.7% 52.4% 26.4% 34.7% 36.9% 43.6% 49.0% 38.1% Me. percentage of images 24.7% 22.2% 22.5% 28.8% 26.1% 25.4% 12.5% 12.2% 12.7% 14.1% 14.3% 13.4% Me. est. sav. [s] 0.19 0.28 0.28 0.31 0.37 0.29 0.75 0.81 1.20 0.96 1.14 0.99 Norm. Me. est. sav. [s] 0.02 0.02 0.03 0.04 0.06 0.03 0.16 0.17 0.23 0.24 0.34 0.24 Me. est. sav. [kB] 240.9 360.4 378.4 429.8 500.7 374.3 148.1 185.4 241.1 196.5 244.2 203.1 Norm. Me. est. sav. [kB] 22.3 29.9 40.3 48.2 76.4 40.5 27.3 34.8 45.0 48.8 64.9 45.8 Efficiently encoding Percentage of sites 22.9% 31.0% 34.1% 37.9% 38.6% 32.9% 23.1% 31.3% 36.4% 43.6% 46.3% 36.1% Me. percentage of images 8.2% 9.3% 14.1% 13.6% 16.7% 13.2% 8.8% 10.2% 14.8% 13.5% 16.7% 13% Me. est. sav. [s] 0.14 0.19 0.20 0.28 0.24 0.22 0.53 0.77 0.76 1.20 1.13 0.85 Norm. Me. est. sav. [s] 0.04 0.03 0.04 0.05 0.06 0.04 0.16 0.16 0.18 0.26 0.32 0.21 Me. est. sav. [kB] 191.2 221.6 224.6 355.3 350.7 267.0 111.4 157.5 153.8 226.7 233.4 173.6 Norm. Me. est. sav. [kB] 39.2 34.2 45.6 62.2 77.8 51.2 28.9 31.0 37.8 49.4 60.6 40.2 Using modern formats Percentage of sites 53.6% 62.1% 68.9% 72.9% 73.7% 66.2% 54.4% 65.3% 69.7% 77.0% 78.7% 69% Me. percentage of images 15.0% 19.2% 23.1% 30.0% 34.1% 25% 15.0% 18.3% 24.2% 30.8% 36.4% 25% Me. est. sav. [s] 0.18 0.27 0.29 0.40 0.53 0.32 0.86 1.20 1.35 2.15 2.70 1.60 Norm. Me. est. sav. [s] 0.03 0.04 0.04 0.05 0.06 0.04 0.18 0.18 0.22 0.29 0.34 0.24 Me. est. sav. [kB] 288.1 354.8 389.0 567.4 706.1 442.1 169.4 241.1 281.0 444.6 586.8 337.6 Norm. Me. est. sav. [kB] 41.0 42.0 48.2 59.9 79.1 53.3 37.0 36.2 41.5 56.9 69.6 47.6 Deferring offscreen images Percentage of sites 14.0% 17.3% 12.6% 12.9% 11.0% 13.5% 33.6% 37.9% 34.4% 31.7% 31.6% 33.8% Me. percentage of images 8.7% 12.3% 10.6% 12.4% 13.8% 11.6% 17.8% 18.2% 20.0% 20.7% 20.0% 19.5% Me. est. sav. [s] 0.12 0.14 0.24 0.18 0.22 0.19 0.48 0.65 0.95 1.13 1.09 0.83 Norm. Me. est. sav. [s] 0.02 0.2 0.04 0.03 0.04 0.03 0.08 0.10 0.13 0.17 0.18 0.13 Me. est. sav. [kB] 179.8 300.8 393.1 443.9 465.1 310.8 136.2 210.5 284.0 334.1 338.5 246.0 Norm. Me. est. sav. [kB] 27.5 30.5 58.1 65.3 58.1 42.7 19.8 26.1 34.3 43.3 52.8 32.0 Me. = Median; Me. est. sav. = Median estimated savings; Norm. Me. est. sav. = Normalized median estimated savings per single image [2] Google, The need for mobile speed, 2016. [Online]. Available: https://www.blog.google/prod ucts/admanager/the-need-for-mobile-sp eed/. [3] T. Hoßfeld, F. Metzger, and D. Rossi, “Speed index: Re- lating the industrial standard for user perceived web per- formance to web qoe”, in 2018 Tenth International Con- ference on Quality of Multimedia Experience (QoMEX), 2018, pp. 1–6. [4] P. Wang, M. Varvello, and A. Kuzmanovic, “Kaleido- scope: A crowdsourcing testing tool for web quality of experience”, in 2019 IEEE 39th International Confer- ence on Distributed Computing Systems (ICDCS), 2019, pp. 1971–1982. [5] L. Borzemski and M. Kedras, “Measured vs. perceived web performance”, in Information Systems Architecture and Technology: Proceedings of 40th Anniversary Inter- national Conference on Information Systems Architec- ture and Technology, L. Borzemski, J. ´ Swiatek, and Z. Wilimowska, Eds., Cham: Springer, 2020, pp. 285–301. [6] H. Z. Jahromi, D. T. Delaney, and A. Hines, “How crisp is the crease? a subjective study on web browsing per- ception of above-the-fold”, in 2020 6th IEEE Conference on Network Softwarization (NetSoft), 2020, pp. 43–50. [7] S. Wassermann, P. Casas, Z. B. Houidi, A. Huet, M. Seufert, N. Wehner, J. Sch¨ uler, S. Cai, H. Shi, J. Xu, T. Hossfeld, and D. Rossi, “Are you on mobile or desktop? on the impact of end-user device on web qoe inference from encrypted traffic”, in 2020 16th International Con- ference on Network and Service Management (CNSM), 2020, pp. 1–9. [8] E. Mjelde and A. L. Opdahl, “Load-Time Reduction Techniques for Device-Agnostic Web Sites”, Journal of Web Engineering, vol. 16, no. 3–4, pp. 311–346, 2017. [9] HTTP Archive, 2021. [Online]. Available:https://h ttparchive.org/. [10] Google Developers, Performance audits, 2021. [Online]. Available:https://web.dev/lighthouse-per formance/. [11] A. Mendoza, K. Singh, and G. Gu, “What is wrecking your data plan A measurement study of mobile web over- head”, in 2015 IEEE Conference on Computer Commu- nications, 2015, pp. 2740–2748. [12] C. Kelton, M. Varvello, A. Aucinas, and B. Livshits, “Browselite: A private data saving solution for the web”, in Proceedings of the Web Conference 2021, ser. WWW ’21, Ljubljana, Slovenia: Association for Computing Machinery, 2021, pp. 305–316. [13] Chrome User Experience Report, 2021. [Online]. Avail- able:https://developers.google.com/web /tools/chrome-user-experience-report.