Mobile Page Speed - SMX Munich 2015

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

Transcript of Mobile Page Speed - SMX Munich 2015

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

Thanks!!

Cindy Krum

CEO & Founder, MobileMoxie

[email protected]

@Suzzicks