Product Description Section Improvement Story Part.2

The existing HTML-type product descriptions relied on an external solution to use Image Crop and Lazy Loading features. However, in the PC environment, the original HTML was served as-is, causing slower loading speeds for large images, and there were difficulties in customizing features and managing cache.

To solve this, Oliveyoung internalized the external solution and built its own image processing pipeline using AWS Lambda, S3, and CloudFront. The new pipeline works as follows.

• Step 1-2: When accessing product details, Redis cache is checked first; if there is no cache, data is fetched from the DB and a message is published to SQS.
• Step 3: Lambda scrapes the external image, uploads it to S3, performs Crop and HTML processing, and then saves it back to S3 and Redis.
• Step 4: Image identity is verified on a 24-hour cycle to reflect any changes.

In particular, Kotlin Coroutine was introduced for the image scraping, identity checking, and S3 upload processes, handling them asynchronously to minimize task delays.

As a result of the improvement, the loading speed of detailed technical documents in the PC environment improved by 60~99% compared to before, and image loading performance also improved in the mobile environment. Additionally, a real-time detection process for invalid images was built, and maintenance costs were reduced.