Making Mobile Super Fast By: Cindy Krum MobileMoxie SMX Munich, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Making MobileSuper Fast
By: Cindy Krum
MobileMoxie
SMX Munich, 2015
Google Prefers Faster Websites – Especially for Mobile:
(Currently Testing a New ‘Slow Tag’ in Mobile the SERP)
Google Says They Prefer Responsive Web Design for Mobile:
Google Says They Prefer Responsive Web Design for Mobile:
The Problem is Most Developers Don’t Know How to Build a Fast Responsive Design Site:April 2014 Survey of 1,000 Responsive Design Sites
The Problem is, Responsive Design is Hard to Make Fast:
But….
Google Prefers Responsive Design
But…
Google Prefers Fast Mobile Pages
Hurts Crawl
Efficiency
Fewer Pages are
Indexed
Slows the
Crawler High Mobile Bounces
High Site Abandonment
Hurts UX
The Problem is, Responsive Design is Hard to Make Fast:
This Talk Will Cover:
• Round Trip Requests & Critical Path Rendering
• Image & CSS Optimization
• Caching & Compression Opitimization
What is Critical Path Rendering?
Understanding Round Trip Requests for Mobile:
Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
Round Trip Requests
# External Assets On the Page
=
Combine Elements to Reduce Round Trip Requests:
Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
Unique Object Count Object Size
Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
Google Says Each RTR = 200 Milliseconds for 3G/4G so…65 RTRs = 13,000 Milliseconds = 13 Seconds Latency
Unique Object Count Object Size
Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
And Blocking These Resources Will Only Hurt You
The Only Way Google Can Accurately Tell if Your Site is Built in Responsive Design is if they can Crawl the JS and CSS.
If CSS or JS Files You Control are Blocked, Google Might Not Consider You Mobile-Friendly.
Combine Elements to Reduce Round Trip Requests:
The Round Trips You are Forgetting About:
Any External Links to Unused
Style Sheets/Images/Scripts
301 Redirects
Multi-Hop 301 Redirects
404 Page Requests
Web Fonts
Favicons
Script Libraries (EX: Bootstrap)
Other Things You are Forgetting About:
Tool: Google PageSpeed Chrome Plugin
Making Images Mobile Friendly - Sprites:
Bad Sprite Hygiene Risks Extra Round TripsPlease Don’t Do this with Your Sprites….
Make Sprite Hygiene a Priority
1 Global Sprite for the Entire Site
Sprites Are NOT Cachable so Keep the File Size Small
1 Sprite for Each Page Template
Include the Template Name in the Sprite Name
Use URI Valet to Review Sprites Twice a Year
Click on the Links to Open the Sprite & See the Images it Holds
Use SpriteMe to Find Opportunities for Consolidation
Use Chrome Developer Tools to Find Un-Used Sprite Calls (Classes)
Images Are Critical – Image Weight a Key Driver in Overall Page Weight:
Images Are Critical – Image Weight a Key Driver in Overall Page Weight:
Making Images Mobile Friendly – Image Servers:
Making Images Mobile Friendly – Responsive Images:
The picture element allows you to provide multiple sources of the same image at different resolutions so the browser can pick the image of the correct size based on the viewport size.
Making Images Mobile Friendly – Responsive Images:
The picture element allows you to provide multiple sources of the same image at different resolutions so the browser can pick the image of the correct size based on the viewport size.
Making Images Mobile Friendly – Responsive Images:
Simple Cropping:Basic implementation, uses the source element and different @media-queries to fetch the correct image for the device-screen.
Grid System & Variable Width:
This uses a mobile first approach with 5 breakpoint. It only loads images as each breakpoint matches.
Variable width images with multiple responsive breakpoints & max-width EM sailing.
Art Direction:If the screen is small and the image is scaled down, its details cannot be seen. Using "art direction" helps overcome this problem. Rotate/resize the window and the image presentation can change.
Caching & Compression
Proxy Caching vs. Browser Caching:
Browser Caching
Proxy Caching
Proxy Caching For Mobile:
Internet
Web Server
Proxy CacheEX: Your ISP
End User
End User
Caching & Compression – Browser Caching:
Do This:
• Specify a Freshness lifetime of a week or more – Without a Freshness Lifetime Set, Your Stuff Won’t Cache.
• Remove Unnecessary Query Strings - Most Caching Bodies Won’t Cache items with a ‘?’
• Don’t Worry About Freshness if You are Changing File Names
• Use Cache Validators to Ensure Freshness (ET Tags and/or Expiration Dates)
• NOTE: Inline CSS & JS Won’t be Cached
Compression & Minification
gZip & Minify:
JavaScript
HTML
CSS
Proper CDN Settings:
http://bit.ly/1BTgIFe
Related Documents
