Swimply 是一個快速成長的市場,促進休閒空間和游泳池租賃。隨著清單和用戶生成的圖像的增長,該平台變得難以在優化其網站和行動應用程式的頁面速度的同時提供高品質的圖像。借助 imgix,Swimply 將圖像檔案大小減少了 38%,將圖像響應時間縮短了 50%,並節省了寶貴的工程時間。

38%
減少圖片檔案大小
50%
更快的回應時間
680m
每月圖像請求

客戶

Swimply被稱為泳池界的 Airbnb,是一個線上市場,它將游泳池、熱水浴缸和運動場等私人休閒空間的所有者與尋求在當地聚會、游泳和逃離的人們聯繫起來。 Swimply 平台上有超過 25,000 個泳池,為 96% 無法使用泳池的美國人提供了選擇。 92% 的 Swimply 預訂是由距離房東 5 英里的當地人完成的。70% 的預訂是媽媽們為孩子和家人預訂的。

使用 Swimply 的網站、iOS 應用程式和 Android 應用程序,用戶可以查看清單並進行預訂,所有通訊、設施選擇和付款均透過 Swimply 網站或行動應用程式處理。 Swimply 目前在美國、加拿大和澳洲開展業務。

與大多數酒店網站一樣,Swimply 嚴重依賴圖像和影片。從用戶生成的圖像(例如列出照片和用戶頭像)到主頁上的行銷圖像,Swimply 每月提供 210,000 張原始圖像,並在旺季提供驚人的 6.8 億個圖像請求。大約 40% 的流量來自行動應用程序,30% 來自行動網絡,其餘來自桌面。

「消費者做出決定——快速決定——只是基於他們是否喜歡該房產,或者喜歡游泳池。因此,這就是為什麼圖像位於我們應用程式的前面和中心。對於我們的大多數客戶來說,游泳池或網球場如何外觀與定價一樣重要,這就是為什麼擁有非常穩定和可靠的圖像處理和交付對我們來說非常重要。- Kaan Merelan,工程副總裁
用於 imgix 案例研究的 Swimly 列表

挑戰

Swimply 的主機和訪客可以透過多種裝置和應用程式存取它。在使用 imgix 之前,無論裝置或瀏覽器環境如何,每個影像(有些影像幾乎是半 MB)都按原樣提供。此外,Swimply 僅提供 JPEG 格式的影像,而不是 AVIF 和 WebP 等下一代影像格式。最後,用戶生成的圖像有多種格式,但通常具有非常高的解析度。這意味著影像比需要的大得多,尤其是在行動裝置上。這對 Core Web Vitals (CWV) 產生了負面影響,進而對他們的 SEO 產生了負面影響。

Having worked with other solutions before, the Swimply engineering team wanted to avoid backend processing tools like ImageMagick or Thumbor, which can cost a large amount of engineering time and effort to set up and maintain. Additionally, building an image pipeline using open-source packages was just not scalable for Swimply’s needs. To focus on building its core application, the team decided to look for a solution that could process images on the fly.

"Depending on tools like imgix nowadays helps you not only save time and money, but also it helps you keep your team nimble and productive."

- Kaan Merelan, VP of Engineering

The Solution

Swimply deployed imgix in 2021 to optimize and process all of its user-generated images. Since then, it has leveraged a full suite of sophisticated features, which include the following:

  • react-imgix automatically generates srcset Attributes, so different-sized images can be rendered and served based on the browser viewport width (fluid-width srcset) or device pixel density (fixed-width srcset).
  • Variable q parameter adjusts the compression quality based on the device pixel ratio when fixed-width srcset is generated, so each image is served at the optimal file size and visual quality.
  • fit=min resizes images to match the aspect ratio of the requested width and height while staying within the original width and height of the image.
  • auto=format,compress applies best-effort compression and image-format conversion. With auto=format, images will be served in the AVIF format whenever possible. In addition to imgix, they also use lazy loading to help with the page performance as it defers offscreen images from loading until the visitor scrolls and the images enter the viewport.
用於 imgix 案例研究的 Swimply 屬性影像

The Results

With imgix, Swimply decreased the average image file size by 38% and the average image response time by 50%, from 325 milliseconds to 163 milliseconds. These performance improvements give the team the reassurance that their page weight and loading speed are optimized to handle the rapid growth in listings and images.

In addition, the team is able to improve efficiency and focus more of their attention on developing and improving the core platform product itself. While image processing and delivery are essential to their business, it’s a workflow that the team can offload with peace of mind.

"This saves us a lot of time, so we can actually spend our time on features and other things rather than worrying about whether there is a new format we must accommodate or how best to optimize our images, or how to change a wrong format. It’s very easy with imgix."

- Kaan Merelan, VP of Engineering

用於 Imgix 案例研究的 Swimply OG 影像