Identify pages to migrate first as part of a POC
- Identify pages to migrate first as part of a POC
Overview
In order to progress with the migration to Cloudinary we must migrate a set of pages first to identify image and video transformations as well as doing some pre and post analysis to give some clear documented metrics on Amplience vs Cloudinary.
Notes
- We will continue to manually define our srcsets and sizes until we are able to release Cloudinary JS library
- It would be beneficial to have the preconnect to the Cloudinary origin for the POC but unlikely due to release windows
- Awaiting a decision on CNAME but this is not crucial for the POC
- We can most likely remove lazy loading as a next step to this POC
Status
Proposed
Pro Team Shoes - POH01XX
https://www.rapha.cc/gb/en/shop/pro-team-shoes/product/POH01XXHero Carousel
Mannequin Set
| Component | Mannequin Set | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/i/rapha/POH01XX_HVP_Product_H120_01 | |
| Original Size | 2048 x 2048 | |
| File Size | 296.58 KB | |
| Current - 480 | https://i8.amplience.net/i/rapha/POH01XX_HVP_Product_H120_01?&scaleFit=poi&w=768&sm=aspect&aspect=1:1 480w | 15.86 KB |
| Current - 760 | https://i8.amplience.net/i/rapha/POH01XX_HVP_Product_H120_01?&scaleFit=poi&w=768&sm=aspect&aspect=1:1 760w | 41.19 KB |
| Current - 1200 | https://i8.amplience.net/i/rapha/POH01XX_HVP_Product_H120_01?&scaleFit=poi&w=150&&sm=aspect&aspect=1:1 1500w | 152.26 KB |
| Cloudinary | https://rapha-res.cloudinary.com/image/upload/ar_1:1,c_fill,dpr_auto,f_auto,g_auto,q_auto,w_450/v1585069046/poc/POH01XX_HVP_Product_H120_01.jpg | 15.04 KB |
- Remove srcset. It has minimum effect as the general render size is 450x450.
- Reduce the src to 450x450 as this is the largest display dimension.
- Discuss the importance of keeping the original file size on upload.
Triptyc Set
- Our new fallback size is 992
- Discuss the importance of keeping the original file size on upload.
Features Carousel
Just For You
Men's Pro Team Bib Shorts II - PSH04RG
https://www.rapha.cc/gb/en/shop/mens-pro-team-bib-shorts-ii-regular/product/PSH04RG- Hero Carousel - Slide - Same as above
- Mannequin Set - Same as above
- Just For You - Same as above
- Features Carousel - Same as above
Triptyc
| Component | Triptyc - Lower Video | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/v/rapha/PSH04RG_BBK_ProTeam_BibShortsII _Regular_Mens | |
| Format | MP4 | |
| Original Size | 1280 × 1920 | |
| File Size | 12.2 MB | |
| Current - 720 - webm | https://i1.adis.ws/v/rapha/PSH04RG_BBK_ProTeam_BibShortsII%20_Regular_Mens/webm_720p, | - |
| Current - 720 - mp4 | https://i1.adis.ws/v/rapha/PSH04RG_BBK_ProTeam_BibShortsII%20_Regular_Mens/mp4_720p, | - |
| Cloudinary | https://rapha-res.cloudinary.com/video/upload/ar_2:3,c_fill,dpr_auto,f_auto,q_auto,w_915/v1653552542/POC/PSH04RG_BBK_ProTeam_BibShortsII__Regular_Mens_i8epaw.mp4 | 1.02 MB |
- Automautomatically selecting the most appropriate codec based on the output format.
- Width of 915px as this is the max width based on 1920px breakpoint
Video Player
| Component | Video Player | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/v/rapha/updated_Rapha_Bibs_2020_pro_team_PDP_online | |
| Format | MP4 | |
| Original Size | 1920 × 1080 | |
| File Size | 15.37 MB | |
| Current - 720 - webm | https://i8.amplience.net/v/rapha/updated_Rapha_Bibs_2020_pro_team_PDP_online/webm_720p?protocol=https | - |
| Current - 720 - mp4 | https://i8.amplience.net/v/rapha/updated_Rapha_Bibs_2020_pro_team_PDP_online/mp4_720p?protocol=https | - |
| Cloudinary | https://rapha-res.cloudinary.com/video/upload/ar_16:9,c_fill,dpr_auto,f_auto,q_auto,w_1230/v1653553779/POC/updated_Rapha_Bibs_2020_pro_team_PDP_online_zttfvr.mp4 | 2.13 MB |
- Automautomatically selecting the most appropriate codec based on the output format.
- Width of 1230 as this is the max width based on 1920px breakpoint
Fit Guide
Men's Jersey Guide
https://www.rapha.cc/gb/en/stories/rapha-mens-jersey-guideHero Video Player
| Component | Hero Video Player | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/v/rapha/Soar_in_the_sun_1920x842_30s | |
| Format | MP4 | |
| Original Size | 1920 × 842 | |
| File Size | 31.83 MB | |
| Current - 720 - webm | https://i8.amplience.net/v/rapha/Soar_in_the_sun_1920x842_30s/webm_720p?protocol=https | - |
| Current - 720 - mp4 | https://i8.amplience.net/v/rapha/Soar_in_the_sun_1920x842_30s/webm_720p?protocol=https | - |
| Cloudinary | https://rapha-res.cloudinary.com/video/upload/c_scale,dpr_auto,f_auto,q_auto,w_1860/v1653561553/POC/Soar_in_the_sun_1920x842_30s_ygczto.mp4 | 3.85 MB |
- Automautomatically selecting the most appropriate codec based on the output format.
- Width of 1860 as this is the max width based on 1920px breakpoint
Mediasingle - Full Width
Mediasingle - Classic
| Component | Mediasingle - Classic | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/i/rapha/2_3_51A4632 | |
| Original Size | 2048 × 3072 | |
| File Size | 818.32 KB | |
| Current - src | https://i8.amplience.net/i/rapha/_51A4646?aspect=16:9&sm=aspect&scaleFit=poi&fmt=auto&fmt.jpeg.interlaced=true&w=1500 | 236.22 KB |
| Cloudinary - src | https://rapha-res.cloudinary.com/image/upload/ar_2:3,c_fill,dpr_auto,f_auto,g_auto,q_auto,w_930/v1653563959/POC/Mens%20Jersey%20Guide/2_3_51A4632_ua4rww.jpg | 72.05 KB |
- Long term should be fixed with srcsets
Product Image(s)
| Component | Product Image | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/i/rapha/FLY06XX_FDI_Product_H122_01 | |
| Original Size | 2048 × 2048 | |
| File Size | 254.24 KB | |
| Current - src | https://i8.amplience.net/i/rapha/_51A4646?aspect=16:9&sm=aspect&scaleFit=poi&fmt=auto&fmt.jpeg.interlaced=true&w=1500 | 14.74 KB |
| Cloudinary - src | https://rapha-res.cloudinary.com/image/upload/ar_1:1,c_fill,dpr_auto,f_auto,g_auto,q_auto,w_384/v1653564593/POC/Mens%20Jersey%20Guide/FLY06XX_FDI_Product_H122_01_tydiyz.jpg | 2.92 KB |
- Current SRC is the wrong size. Its currently double the size needed
- Long term should be fixed with srcsets
- Width of 384 as this is the max width based on 1920px breakpoint
| Component | Product Image | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/i/rapha/CLJ08XX_BFD_Product_H122_01 | |
| Original Size | 2048 × 2048 | |
| File Size | 109.17 KB | |
| Current - src | https://i8.amplience.net/i/rapha/CLJ08XX_BFD_Product_H122_01?aspect=16:9&sm=aspect&scaleFit=poi&fmt=auto&fmt.jpeg.interlaced=true&w=1500 | 10.61 KB |
| Cloudinary - src | https://rapha-res.cloudinary.com/image/upload/ar_1:1,c_fill,dpr_auto,f_auto,g_auto,q_auto,w_384/v1653564598/POC/Mens%20Jersey%20Guide/CLJ08XX_BFD_Product_H122_01_xjw44m.jpg | 1.76 KB |
- Current SRC is the wrong size. Its currently double the size needed
- Long term should be fixed with srcsets
- Width of 384 as this is the max width based on 1920px breakpoint
- Applies to all product images on page
Mediasingle - Full Width
Mediasingle - Pro Team
| Component | Mediasingle - Pro Team | Content-Length |
|---|---|---|
| URL | https://i8.amplience.net/i/rapha/PTh12228 | |
| Original Size | 2400 × 1914 | |
| File Size | 663.36 KB | |
| Current - src | https://i8.amplience.net/i/rapha/PTh12228?fmt.jpeg.interlaced=true&sm=aspect&scaleFit=poi&aspect=2:3&w=1200 | 277.51 KB |
| Cloudinary - src | https://rapha-res.cloudinary.com/image/upload/ar_2:3,c_fill,dpr_auto,f_auto,g_auto,q_auto,w_930/v1653566349/POC/Mens%20Jersey%20Guide/PTh12228_lkbsqt.jpg | 119.90 KB |
- Long term should be fixed with srcsets