Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Mobile Page Speed - SMX Munich 2015

2.302 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Mobil
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Mobile Page Speed - SMX Munich 2015

  1. 1. Making Mobile Super Fast By: Cindy Krum MobileMoxie SMX Munich, 2015
  2. 2. Google Prefers Faster Websites – Especially for Mobile: (Currently Testing a New ‘Slow Tag’ in Mobile the SERP)
  3. 3. Google Says They Prefer Responsive Web Design for Mobile:
  4. 4. Google Says They Prefer Responsive Web Design for Mobile:
  5. 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. 6. The Problem is, Responsive Design is Hard to Make Fast: But…. Google Prefers Responsive Design But… Google Prefers Fast Mobile Pages
  7. 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. 8. This Talk Will Cover: • Round Trip Requests & Critical Path Rendering • Image & CSS Optimization • Caching & Compression Opitimization
  9. 9. What is Critical Path Rendering?
  10. 10. Understanding Round Trip Requests for Mobile:
  11. 11. Understanding Round Trip Requests for Mobile: Data Received Data Request Connection Request Data Transmission Acknowledgement
  12. 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. 13. Combine Elements to Reduce Round Trip Requests:
  14. 14. Understanding Round Trip Requests for Mobile: Data Received Data Request Connection Request Data Transmission Acknowledgement Unique Object Count Object Size
  15. 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. 16. Understanding Round Trip Requests for Mobile: Data Received Data Request Connection Request Data Transmission Acknowledgement
  17. 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. 18. Combine Elements to Reduce Round Trip Requests:
  19. 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. 20. Other Things You are Forgetting About: Tool: Google PageSpeed Chrome Plugin
  21. 21. Making Images Mobile Friendly - Sprites:
  22. 22. Bad Sprite Hygiene Risks Extra Round Trips Please Don’t Do this with Your Sprites….
  23. 23. 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)
  24. 24. Images Are Critical – Image Weight a Key Driver in Overall Page Weight:
  25. 25. Images Are Critical – Image Weight a Key Driver in Overall Page Weight:
  26. 26. Making Images Mobile Friendly – Image Servers:
  27. 27. 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.
  28. 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. 29. 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.
  30. 30. Caching & Compression
  31. 31. Proxy Caching vs. Browser Caching: Browser Caching Proxy Caching
  32. 32. Proxy Caching For Mobile: Internet Web Server Proxy Cache EX: Your ISP End User End User
  33. 33. 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
  34. 34. Compression & Minification gZip & Minify: JavaScript HTML CSS
  35. 35. Proper CDN Settings:
  36. 36. http://bit.ly/1BTgIFe
  37. 37. Thanks!! Cindy Krum CEO & Founder, MobileMoxie cindy@mobilemoxie.com @Suzzicks

×