Source: Photo by Hal GatewoodonUnsplash
Hello. This is Wadiz FE Development Team.
We'd like to share our experiences and the technologies we used while working on improving the performance of our funding detail pages over the past year. We hope this will be helpful to anyone facing similar situations.
Funding Details Page
Before we begin, I'll briefly explain the funding detail page where performance improvements were implemented to aid your understanding.
The funding details page is a service page designed to introduce projects based on the maker's creative ideas. It serves as a platform for communicating with supporters, aiming to foster value-based investment through brand philosophy and product stories.
Funding Details Page
Over time, many features were added to the product detail page, which plays a crucial role. As a result, its loading speed gradually slowed down. I've always been interested in performance optimization work. So, I proposed to the team that we improve the detail page, and since early last year, I've been working on performance improvements.
Areas requiring improvement identified
The funding details page was measured using GA (Google Analytics) and WebPageTest tools out of curiosity about 'just how slow it really is.'
Funding detail page loading time
Funding Details Page Metrics
Measurement results showed that the funding detail page was taking an average of about 10 seconds to load.😖 We confirmed that image loading accounted for the majority of the detail page loading time. Thinking, 'Is there a way to improve this?', we began investigating the cause of the long loading time.
Identifying the cause
The story section introducing products on the detail page was downloading the entire area, not just the image visible on screen during loading. This was causing increased loading times. I considered it a factor that could impair service quality and user experience.
Image Download Screen
Performance Improvement
The direction is set. Download only the images needed for the visible screen! In other words, implement lazy loading for images!
Implementing Image Lazy Loading Technology on the Funding Details Page
Before introducing the improvements, let me briefly explain image lazy loading technology. It refers to the technique of loading images within a page (screen) only when they need to be visible on the screen. Lazy loading reduces the number of unnecessary images. It decreases the number of image downloads over the network, thereby reducing costs.
Image loading when positioned on screen
Image lazy loading technology can be implemented in three ways.
- Delayed Loading Using Browser Events: Loading Using scroll, resize, and orientationchange Events
- By retrieving the URL value from the data-src attribute of the image tag and setting it to the src attribute, the image itself is loaded lazily.
- Lazy loading using browser APIs: Load images only when they enter the viewport using the Intersection Observer API.
- Lazy Loading Using Google Native: Chrome browser automatically loads img and iframe tags when they are positioned within the viewport.
Among these, the funding detail page selected a lazy-loading technique utilizing browser events, which facilitates support for older browsers. For this technique, we used the most widely adopted lazysizes library.
# 개선 전
<img src="https://www.sample.png" />
# 개선 후
<img data-src="https://www.sample.png" src="https://www.sample.png" />
Preventing content reflow
Before introducing the improvements, I will also introduce content reflow.
The browser does not reserve space for content until the image loads, so it exists as 0x0 pixels. Once the image loads, the browser resizes the content area to fit the image's dimensions. This is called content reflow.
After implementing lazy loading technology, we conducted usability testing. On the funding detail page, since image heights weren't specified during loading, the content area resized when users scrolled quickly. This caused sudden scroll jumps and stuttering issues. To address this, we implemented a content reflow prevention feature that specifies the content height before images load.
The details applied to the funding page are as follows.
- When generating HTML, add the actual width/height values of image tags to data attributes (data-width, data-height)
- Specifying image height values (padding) via width/height values in the data attribute of image tags during page loading
# 개선 전
<img data-src="https://www.sample.png" />
# 개선 후
<img data-src="https://www.sample.png"
data-width="800"
data-height="450"
style="padding-bottom: 56.25%"
/>
# javascript
const image = document.querySelector('img[data-src]');
image.style.setProperty('padding-bottom', (100 / (width / height)) + '%');
Image preloading for areas wider than the screen
After completing the lazy loading development and feeling a moment of satisfaction, I faced another challenge at that point. I noticed that when users scrolled down quickly, image loading sometimes took too long. Investigating the cause revealed that a throttling delay was occurring due to scroll event performance issues, causing image loading to lag. To improve this, instead of checking the gap between the image position and the viewport position for lazy loading, I added a threshold (350px) to apply preloading to a wider range of images.
# 개선 전
const image = document.querySelector('img[data-src]');
image.offsetTop >= window.scrollTop + window.clientHeight;
# 개선 후
const expandHeight = 350;
const image = document.querySelector('img[data-src]');
image.offsetTop >= window.scrollTop + window.clientHeight + expandHeight;
// 뷰포트 영역외에 350px 만큼 맞닿은 이미지에 대해서 프리로딩
Results after improvement
After performance improvements, we obtained the following results.
Sequential image loading
As a result of improving the image lazy-loading technology, we observed that images spanning the screen during scrolling now load sequentially, as shown in the image below.
Image loading example
Improved loading speed: 40% reduction
As a result of implementing lazy loading technology, the loading time for the funding detail page has been reduced by approximately 40% compared to the previous version.
Google Analytics
Image download reduction: 40-50% cost reduction
We configured it to download only the images visible on the screen, reducing CDN usage by approximately 40-50% compared to previous levels.
CDN usage reduction
Future Challenges
We are sequentially implementing various tasks related to improving the performance of Wadiz, starting with the application of lazy loading for images on the funding detail page.
- Image size reduction: Convert large GIF images to webp or mp4 formats to reduce file size while maintaining equivalent functionality.
- Image placeholder technique: Apply a placeholder using the primary color of the actual image or a low-resolution version of the image.
- Display images smoothly: Adjust transparency values before loading
etc.
We expect the quality of Wadiz to improve significantly once various performance enhancement tasks are completed.
To tackle upcoming challenges, we need more team members. We are recruiting team members to work on these tasks together, so we hope you'll show your interest!
Looking for a partner!
Lastly, to the Wadiz FE Development Team pros who always look out for me even amidst their busy schedules, and to the Development Team pros who brainstormed with me from the start about implementing lazy loading technology and its future improvements!
Thank you. Thanks to your help, we were able to enhance the quality of Wadiz funding service 🥰
Still have questions? 👀
Curious about the FE development team's organizational culture that improved the funding detail page? 👉Click
