Mobile Page Speed - SMX Munich 2015
Transcript of Mobile Page Speed - SMX Munich 2015
Google Prefers Faster Websites – Especially for Mobile:
(Currently Testing a New ‘Slow Tag’ in Mobile the SERP)
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
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
=
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.
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)
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)
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 – 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