A live run through of a Magento eCommerce RWD site that performed badly on mobile. in the session we looked at quick ways we can improve the performance.
personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Responsive & Fast: Iterating Live Michael Gooding & Ellen van Keulen
personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Wait! That’s Adaptive, not Responsive! (I don’t care)
Client Side Rendering • CSS @media • Fluid Grids / Flex Images • Device decides which content to use • Server Side • Device / Situation Detection • Server decides the appropriate content for the user
Desktop, Moto G [opensignal.org] • Moto E, Nexus 7 on initial test • Network Conditions: Cable, 3G [State of the Internet] • Browsers: Chrome [akamai.io] • IE 9, Firefox, Chrome on initial test • Ignore multi-geo testing • Assume adding oceans makes it worse
• Network Conditions (bandwidth, latency) impact performance • Mobile is slower than Desktop • Lots of Images • Lots of JS • Cost of Painting on mobile • Cost of JS on mobile
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Original and very large images! <div class="product-image-gallery"> <img id="image-main" class="gallery-image visible" src="http://magentor.example.com/magento/media/catalog/product/cache/1/image/9df78eab33525d 08d6e5fb8d27136e95/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" /> <img id="image-0" class="gallery-image" src="http://magentor.example.com/magento/media/catalog/product/cache/1/image/1200x/040ec09b 1e35df139433887a97daa66f/m/s/msj012t_2.jpg" data-zoom- image="http://magentor.example.com/magento/media/catalog/product/cache/1/image/1200x/040ec0 9b1e35df139433887a97daa66f/m/s/msj012t_2.jpg" /> <img id="image-1" class="gallery-image"
• No Images! • Use SVG • Use CSS • Change formats • Increase compression • Use different sized image for different viewport (Responsive Images) • (impractical) • (impractical) • (impractical; unexpected results) • (interesting, more later) • (a different talk)
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Magento Original <div class="product-image-gallery"> <img id="image-main" class="gallery-image visible" src="/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e 95/2/8/2880411400_2_1_1.jpg" alt="Linen Blazer" title="Linen Blazer" /> <img id="image-0" class="gallery-image" src=“/media/catalog/product/cache/1/image/1200x/040ec09b1e35df139433887a97daa66f /m/s/msj012t_2.jpg" data-zoom- image=“/magento/media/catalog/product/cache/1/image/1200x/040ec09b1e35df13943388 7a97daa66f/m/s/msj012t_2.jpg”/> <img id="image-1" class="gallery-image"
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Responsive Images: Results
• Use <Picture> polyfill (eg: Scott Jehl’s PictureFill) • Polyfill manipulates the <img src> in the DOM; Supported Browsers do not • JS Libraries that depend on <img> may not work with <picture> (see ImageZoom) • Future of <picture> is still uncertain – Only Chrome 38 (Desktop) is committed
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Solution: (Client-Side) Conditional Loading If Then
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Magento Original <div class="box-collateral box-up-sell"> <h2>You may also be interested in the following product(s)</h2> <ul class="products-grid products-grid--max-6-col" id="upsell-product-table"> <li> <a href="/magento/isla-crossbody-handbag.html" title="Isla Crossbody Handbag" class="product-image"> <img src="/magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d6e5fb8 d27136e95/a/b/abl000_4.jpg" alt="Isla Crossbody Handbag" /> </a> <h3 class="product-name"><a href="/magento/isla-crossbody-handbag.html" title="Isla Crossbody Handbag">Isla Crossbody Handbag</a></h3>
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Magento Updated v2 <script> function loadRealUpSell(img) { if (!img) return; if (img.offsetParent != null) { // Implies hidden img.onload = null; img.src = img.getAttribute("data-src"); } } </script> <div class="box-collateral box-up-sell"> <h2>You may also be interested in the following product(s)</h2> <ul class="products-grid products-grid--max-6-col" id="upsell-product- table"> <a href="/magento/roller-suitcase.html" title="Roller Suitcase" class="product-image"> <img data- src="/magento/media/catalog/product/cache/1/small_image/280x/9df78eab33525d08d 6e5fb8d27136e95/a/b/abl005a_1.jpg" alt="Roller Suitcase" src="/magento/media/catalog/product/1x1.gif" onload="loadRealUpSell(this);" />
Caveats • “onLoad” only fires if the 1x1.gif exists and loaded • Make sure you don’t have broken JavaScript or no images are shown • Resizing viewport or orientation changes require special attention and additional logic • Yet more JavaScript!
Notes • Many automated solutions offer lazyload • Eg: Google PageSpeed, Akamai FEO • Existing lazyload solutions may need to be updated may not interact with final <picture> supported browsers • Picture Polyfill + Lazyload scripts need to be careful – use solutions such as Picturefill 2 and lazyloading
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Problem: Unnecessary CSS Loaded !=
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. grep "@media" styles.css | sort | uniq @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media only screen and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 0) { @media only screen and (max-width: 1000px) { @media only screen and (max-width: 1199px) { @media only screen and (max-width: 1279px) { @media only screen and (max-width: 320px) { @media only screen and (max-width: 420px) { @media only screen and (max-width: 450px) { @media only screen and (max-width: 479px) { @media only screen and (max-width: 499px) { @media only screen and (max-width: 520px) { @media only screen and (max-width: 530px) { @media only screen and (max-width: 535px) { @media only screen and (max-width: 599px) { @media only screen and (max-width: 600px) { @media only screen and (max-width: 620px) { @media only screen and (max-width: 670px) { @media only screen and (max-width: 699px) { @media only screen and (max-width: 770px) { @media only screen and (max-width: 799px) { @media only screen and (max-width: 850px) { @media only screen and (max-width: 870px) and (min-width: 771px) { @media only screen and (max-width: 979px) { @media only screen and (min-width: 1126px) {
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Magento RWD Styles.css Breakdown Reality: Most RWD sites aren’t mobile first
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 4b. Solution: More Javascript! <link rel="stylesheet" type="text/css" data-src=“/magento/skin/frontend/rwd/default/css/styles_mobile.css" data-mq="screen and (max-width:770px)" /> <link rel="stylesheet" type="text/css" data-src=“/magento/skin/frontend/rwd/default/css/styles_desktop.css” data-mq="screen and (min-width:771px)" /> <script> var styles= document.getElementsByTagName("link"); for(var i=0;i<styles.length; i++) { // Test if the Media Query matches var mq = styles[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (link) element. var l = document.createElement("link"); l.rel = 'stylesheet'; l.type = 'text/css'; l.href = scripts[i].getAttribute("data-src"); document.getElementsByTagName('head')[0].appendChild(l); } } </script>
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. On Demand CSS: Results WPT Results Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Start Render: 9.2s Doc Complete: 12.7s Fully Loaded: 20.4s
Splitting CSS by Media Query has marginal net-benefits • The Browser will still load CSS with Media Queries • Use Conditionally loaded CSS for mobile first designs • Focus on critical CSS instead
CSS) “… conditional loading can be used to ensure that small screen users don’t download a whole bunch of stuff they can’t use …” Brad Frost: <script type="text/javascript" data-src=”/magento/skin/frontend/rwd/default/js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js" data-mq="screen and (min-width:771px)" /> <script> var scripts = document.getElementsByTagName("script"); for(var i=0;i<scripts.length; i++) { // Test if the Media Query matches var mq = scripts[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (script) element. var s = document.createElement("script"); s.src = scripts[i].getAttribute("data-src"); document.body.appendChild(s); } } </script>
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. No Hidden SPoF!
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Problem: Hidden DOM impacts download
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. RESS can reduce DOM complexity
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. RESS: Results WPT Results Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17 s
Vary: User-Agent to avoid SEO Cloaking • Cache-Control: Private to avoid cache collision by Proxy • Pre-instruct your CDN to utilize the same RESS logic • (Otherwise your CDN will not cache or have cache collisions)
Identify Common Devices ◦ Or common properties of devices • Optimize for those devices ◦ RWD, even if not 100% Client Side • Example: Akamai EDC & Property Manager ◦ Device Properties sent as header ◦ Origin returns correct content ◦ Cache key includes mobile property
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Solution: ESI Conditional Loading <esi:choose> <esi:when test="$(IS_TABLET) & $(BRAND_NAME == 'Chrome')"> <link href="tablet.css" type="text/css" /> <script src="/utils/tablet.js" type="text/javascript"></script> </esi:when> </esi:choose>
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Instead of 3 Sources, 1 Source with ∞ Permutations Edge Origin is_mobile is_tablet (other) <ESI> decorated
design for images? Format Size vs JPEG Proggressive Transparency Support Hardware Decoding Encoder Browser Support JPEG N/A N/A No No jpegtran Everybody WebP -35% -35% Yes No cwebp JPEG XR -30% N/A In Spec, not Browsers Maybe jxrlib JPEG 2000 -30% N/A In Spec, not Browsers Maybe OpenJP EG 10+ 12.1+ 4+ 23+ 6+ 6+
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Solution: Auto Image Selection WebP JXR Jpg2000 Jpg Jpg
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Adaptive Format: Results for Chrome & WebP WPT Results Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17 s Start Render: 6.4s Doc Complete: 9.4s Fully Loaded: 16.2 s
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Bonus: Image Transcoder
& Compression • Deliver a browser specific version of a requested image • Reduce the “noise” in the <picture> tag • Provides backward compatibility for all browsers • Ensures all images apply best practices (remove EXIF, progressive, etc)
Conditions Quality: 100% Size: 101KB Average Throughput: High Size: 85KB (Q: 90) Throughput: Med Size: 35KB (Q: 40) Throughput: Low Size: 13KB (Q: 20) May be Grainy, But Stays Fast!
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Final Results
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Final Results (Bonus “unnamed” CDN)
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Final Results
responsive image solution (like <picture />) 2. Prevent downloading hidden & below the fold images 3. Inline critical css 4. Use conditional loading for CSS & JS (to avoid hidden SPOF issues) 5. Implement RESS to reduce DOM complexity • Integrate with your CDN for maximum offload 6. Adaptive Images to Browser and Network conditions
by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Free Copy bit.ly/rf-free
mgooding1981
drumnistnakano
coosuke
tarotaro0129
shingo_kawahara
mii3king
hakubishin3
magisystem0408
duelist2020jp
twada
marchin1989
lycorptech_jp
tomoki10
bermonpainter
maggiecrowley
tammyeverts
erikaheidi
holman
chriscoyier
dougneiner
3n
marcduiker
csswizardry
jlugia
shlominoach
![©2015 AKAMAI | FASTER FORWARDTM Initial run [WPT Initial Run]](https://files.speakerdeck.com/presentations/1a45fd86d5c945669f7781878de87ea0/slide_19.jpg){kind=link}
