Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Faster Mobile Websites

Faster Mobile Websites

This talk was first presented at UpFront Conference on the 19th May 2015. http://upfrontconf.com/

Presentation Details
----------------------------------
As mobile device usage continues to grow, developers need to ensure that their mobile websites are fast and offer a high quality experience for all users. A fast mobile website can be the difference between winning or losing a customer. A few seconds delay in your page load time and you might find that users to your site easily become frustrated and navigate away to another site...or even worse, your competitors site!

Developers understand the need for fast, smooth websites - but how do you apply this to a mobile website and the vast amount of mobile devices out there? This talk is aimed at all developers that build websites and will dive into basic and advanced web performance techniques - there is something for everyone! The talk also covers free tools that developers can use to test and profile the performance of their mobile websites.

This talk will cover a variety of performance related issues specifically aimed at mobile websites and the techniques that developers can use to overcome them and will include:

- Mobile Network Overhead
- Critical Path Rendering
- Basic web performance techniques
- Responsive images
- Performance build automation
- Mobile Website profiling and debugging tools
- A step by step website optimization

http://deanhume.com

Dean Hume

May 19, 2015
Tweet

More Decks by Dean Hume

Other Decks in Programming

Transcript

  1. £1

  2. A slow site will : Affect the impression of your

    brand Increase user frustration
  3. A slow site will : Affect the impression of your

    brand Increase user frustration Cost your user’s money
  4. A slow site will : Affect the impression of your

    brand Increase user frustration Cost your user’s money Make your user’s use your competitors
  5. A slow site will : Affect the impression of your

    brand Increase user frustration Cost your user’s money Make your user’s use your competitors Affect your SEO rankings
  6. Mobile commerce will be 40% of eCommerce by the end

    of 2015 source: criteo.com/resources/mobile-commerce-q1-2015/
  7. RAIL in Action 1. Reduce page size (Load) 2. Reduce

    HTTP requests (Load) 3. Reduce Blocking (Load, Idle)
  8. RAIL in Action 1. Reduce page size (Load) 2. Reduce

    HTTP requests (Load) 3. Reduce Blocking (Load, Idle) 4. Improve render times (Animation, Idle, Response)
  9. • Optimize images • Remove unused CSS • Minify CSS

    and JS files • Responsive images Reduce page size
  10. 72%

  11. <picture> <source media="(min-width: 1024px)" srcset="dest/1024/dog.jpg"> <source media="(min-width: 640px)" srcset="dest/640/dog.jpg"> <source

    srcset="dest/320/dog.jpg"> <img src="dest/640/dog.jpg" alt="The fallback image."> <p>This is some accessible text.</p> </picture>
  12. <picture> <source media="(min-width: 1024px)" srcset="dest/1024/dog.jpg"> <source media="(min-width: 640px)" srcset="dest/640/dog.jpg"> <source

    srcset="dest/320/dog.jpg"> <img src="dest/640/dog.jpg" alt="The fallback image."> <p>This is some accessible text.</p> </picture>
  13. <picture> <source media="(min-width: 1024px)" srcset="dest/1024/dog.jpg"> <source media="(min-width: 640px)" srcset="dest/640/dog.jpg"> <source

    srcset="dest/320/dog.jpg"> <img src="dest/640/dog.jpg" alt="The fallback image."> <p>This is some accessible text.</p> </picture>
  14. ★ Combine Styles and Scripts ★ Spriting ★ Caching ★

    Do you really need that? Reduce HTTP Requests
  15. - Beware of proxies - Standardize your file capitalization -

    Determine the best cache lifetime Caching
  16. - Beware of proxies - Standardize your file capitalization -

    Determine the best cache lifetime - Minimize churn Caching
  17. “When you want to be fast, you have to give

    up the things slowing you down.” Addy Osmani
  18. “Across the 61 million mobile sessions we studied, we found

    that only 0.2% of mobile users do any social sharing.” source: http://moovweb.com/blog/anyone-use-social-sharing-buttons-mobile/
  19. <!doctype html> <head> <style> /* inlined critical CSS */ </style>

    <script> loadCSS('deferred.css'); </script> </head> <body> ...body goes here </body> </html>
  20. <!doctype html> <head> <style> /* inlined critical CSS */ </style>

    <script> loadCSS('deferred.css'); </script> </head> <body> ...body goes here </body> </html>
  21. Recap 1. Reduce page size 2. Reduce HTTP requests 3.

    Reduce Blocking 4. Improve render times
  22. Stats 52 HTTP Requests 950 KB Total 250 KB of

    CSS 158 KB of JavaScript Speed Index - 2075
  23. After 32 HTTP Requests 402 KB Total 3.7 KB of

    CSS 44 KB of JavaScript Speed Index - 1675
  24. After (52) 32 HTTP Requests (950) 402 KB Total (250)

    3.7 KB of CSS (158) 44 KB of JavaScript (2075) Speed Index - 1675
  25. Summary The importance of a fast website The latency delay

    in mobile networks RAIL Critical Path
  26. Summary The importance of a fast website The latency delay

    in mobile networks RAIL Critical Path Improve rendering
  27. Summary The importance of a fast website The latency delay

    in mobile networks RAIL Critical Path Improve rendering Profiling & testing tools