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
=
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.
22. Bad Sprite Hygiene Risks Extra Round Trips
Please Don’t Do this with Your Sprites….
23.
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)
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.
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
Vary: Accept-Encoding is a setting that tells proxy servers like ISP’s that they should cache both the encoded and non-encoded versions of a request, so that they can serve whichever one is needed
Include a Vary: User-Agent header as well as a Cache-Control: private header to make a redirect from www. to m. cachable
