How to make mobile websites - especially Responsive Design sites faster to improve UX and Google rankings. Ya for mobile SEO!

1. Making Mobile
Super Fast
By: Cindy Krum
MobileMoxie
SMX Munich, 2015

2. Google Prefers Faster
Websites – Especially
for Mobile:
(Currently Testing a New
‘Slow Tag’ in Mobile the
SERP)

3. Google Says They
Prefer Responsive
Web Design for
Mobile:

4. Google Says They
Prefer Responsive
Web Design for
Mobile:

5. 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

6. The Problem is, Responsive Design is Hard to
Make Fast:
But….
Google Prefers
Responsive
Design
But…
Google Prefers
Fast Mobile
Pages

7. 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:

8. This Talk Will Cover:
• Round Trip Requests & Critical Path
Rendering
• Image & CSS Optimization
• Caching & Compression Opitimization

9. What is Critical
Path Rendering?

10. Understanding Round Trip Requests for Mobile:

11. Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement

12. Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
Round Trip
Requests
# External
Assets On
the Page
=

13. Combine Elements to Reduce Round Trip
Requests:

14. Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement
Unique Object Count Object Size

15. 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

16. Understanding Round Trip Requests for Mobile:
Data Received
Data Request
Connection Request
Data Transmission
Acknowledgement

17. 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.

18. Combine Elements to Reduce Round Trip
Requests:

19. 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)

20. Other Things You are Forgetting About:
Tool: Google PageSpeed Chrome Plugin

21. Making Images Mobile Friendly - Sprites:

22. Bad Sprite Hygiene Risks Extra Round Trips
Please Don’t Do this with Your Sprites….

24. 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)

25. Images Are Critical – Image Weight a Key Driver
in Overall Page Weight:

26. Images Are Critical – Image Weight a Key Driver
in Overall Page Weight:

27. Making Images Mobile Friendly – Image Servers:

28. 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.

29. 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.

30. 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.

31. Caching &
Compression

32. Proxy Caching vs. Browser Caching:
Browser Caching
Proxy Caching

33. Proxy Caching For Mobile:
Internet
Web Server
Proxy Cache
EX: Your ISP
End User
End User

34. 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

35. Compression & Minification
gZip & Minify:
JavaScript
HTML
CSS

36. Proper CDN
Settings:

38. http://bit.ly/1BTgIFe

39. Thanks!!
Cindy Krum
CEO & Founder, MobileMoxie
cindy@mobilemoxie.com
@Suzzicks