客戶
Leafly是一個線上大麻社群和電子商務平台，將消費者、品牌和零售商相互連結。他們每月有 4.16 億次來自教育文章、產品清單和用戶評論的圖像請求。他們之前的圖像優化解決方案擴展性很差，並且給他們的基礎設施帶來了壓力。透過使用 imgix 創建高效能 srcset，Leafly 減少了 90% 的儲存消耗，將網站速度提高了 60%，增強了 SEO 工作，並節省了寶貴的工程時間。
.svg)
頁面速度的提高
.svg)
減少影像存儲
.svg)
每月圖像請求數
社區和市場
Leafly 協助 1.25 億人尋找和購買合法大麻，教育消費者了解大麻品種，並為 4,600 家零售商和 7,800 個品牌提供專門的電子商務工具。他們每年處理超過 400 萬份訂單，發布 130 萬條用戶評論，列出 5,000 種大麻品種，並擁有超過 11,000 篇教育文章。
如此大的內容量帶來了龐大的影像優化需求。 Leafly 成立於 2010 年，目前擁有 251 萬張 Origin 圖片。他們每個月都會收到 4.16 億個影像請求，使用 9.60 TB 的頻寬。其中 75% 的流量來自智慧型手機，20% 來自 PC。
挑戰
跨不同裝置大規模優化影像為 Leafly 帶來了許多挑戰。詳細的產品圖片最接近實體購物體驗。透過提供準確和高解析度的圖像，消費者在到達藥房之前就可以準確地知道他們正在購買什麼
Leafly 工程副總裁 Leslie Zavisca 解釋道。 「消費者研究並發現適合他們的大麻產品。性能對於在所有設備和網路上提供快速、無縫的用戶體驗以及 SEO 至關重要。 Leafly 的行業在其影像優化方法中發揮了獨特的作用。
「即使在完全合法的市場中，大麻仍然受到污名和錯誤訊息的影響。除了這些障礙之外，植物本身很複雜，對於新手和“cannasseurs”來說可能會令人生畏！
— Leslie Zavisca，工程副總裁
Leslie 繼續說道，“與啤酒、葡萄酒和烈酒一樣，有無數的菌株、加工方法和產品形式，所有這些都會影響消費者的具體利益和體驗。”詳細的產品圖片是建立消費者信任和信心的重要組成部分。
Leafly needed an image processing solution capable of delivering fast, high-quality product and marketing images, but resizing images with their technology stack put an unsustainable resource demand on their cluster. This was critical for helping their customers find the right products for their needs. Their original solution was a custom-built tool, but it scaled poorly. Leafly moved to Thumbor, an open-source solution with a caching CDN. They used Cloudfront alongside this technology, but the latter made cache invalidations difficult. Leafly’s web technology stack included NextJS/React applications, traditional MVC rails applications, and WordPress. Thumbor’s resource consumption varied throughout the day, even with metrics-based auto-scaling. Other services on the shared nodes were impacted, so Leafly had to move it to its own node group. Leafly also had several visual experience issues. Partners could upload any images they wanted of their cannabis products and stores, but these images were often too large or not cropped to web-presentable ratios. The images could also become broken if the file names contained emojis, hashtags, and other special characters, due to the way the system processed them.
The Solution
Leafly searched for a new image optimization solution to reduce infrastructure team stress, while delivering fast, high-quality images. They turned to imgix to handle all images on their website, primarily using S3 buckets to integrate with the platform. “We have many areas around the site that needed solutions for multiple screen sizes. We built a responsive image component based entirely on the tools that Imgix provides. Those tools allow us to properly convert, size, and optimize images on the fly,” said Leslie. Consumers see accurate, high-quality images on every device that they use, allowing them to make informed purchase decisions.” The e-commerce experience becomes the next best thing to seeing these products in-person, when the right images are in place.
These imgix rendering parameters included:
- dpr controlled the Device Pixel Ratio and allowed Leafly to build a performant srcset that ensures every device gets the best image experience.
- s offered a way for Leafly to secure image URLs, preventing unauthorized parties from altering any parameters.
- fm allowed Leafly to choose the most appropriate image format for the request.
- fit controlled the way the output image fits to its target dimensions after resizing and how background areas get filled.
- bg filled in transparent areas on the images with the selected color.
Leafly wrapped imgix in a React component to make it easy for their engineers to use. They also used the Swift and Ruby-on-Rails libraries to further simplify the imgix integration process with their tech stack.
With the srcset attribute, Leafly offers web browsers multiple resolution images to choose from for a responsive user experience. By combining srcset with imgix’s dpr parameter, they can serve high-DPR images to the devices that support them, without wasting bandwidth on sending those images to low-DPR displays. Using imgix for Leafly’s images also provided SEO benefits. The optimized images could load faster, improving Core Web Vitals, while maintaining great image quality. It ultimately resulted in a better user experience. “As part of introducing imgix, we didn’t significantly change our architecture, although it did allow us to deprecate our Cloudfront CDN + Thumbor combination. Our stack is mostly javascript-based. imgix requests our images through S3 buckets, making it easy to separate concerns in our microservices. We have a variety of S3 buckets depending on the image type,” explained Leslie.
The typical image lifecycle for Leafly looks like this, using a store’s location image as an example:
- The store administrator uploads the image using Leafly’s tools, which puts it in an S3 bucket.
- Leafly saves off the imgix URL in their database, which is picked up when visits are made to the site.
- The frontend detects that the image is imgix-based and adds additional rendering parameters to provide the best experience for that image.
The Results
It wasn’t long before Leafly’s website started to see significant performance improvements. Before, their original Speed Index on desktop was around 15 seconds. After implementing imgix, it dropped to 6 seconds on average– a 60% improvement.
“Between Cloudflare and imgix, our requests are aggressively cached to help improve costs, give the users a good experience, and improve SEO.”
— Leslie Zavisca, VP of Engineering
“We originally started looking at imgix because our infrastructure team was unhappy with the number of resources performing our own image resizing was putting on our cluster. Shifting to imgix reduced image resizing resource consumption in our cluster down by approximately 90%,” recounted Leslie. Leafly was able to save valuable engineering time, as they no longer needed to debug and diagnose performance regressions in the open-source image sizing stack they first worked with.
“imgix has made it easy for frontend developers, who are working closely with the web’s code, to make changes quickly. We’ve used it to force aspect ratios, set quality levels, and resize images for a better mobile experience.”
— Leslie Zavisca, VP of Engineering
