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

Making friends with PageSpeed and WebPagetest – Web performance with insights for Neos

Making friends with PageSpeed and WebPagetest – Web performance with insights for Neos

A talk about how to optimize web performance using the tools PageSpeed Insights and WebPagetest with a few insights for Neos

Presented at T3DD15 (Nürnberg) & T3CON15 Asia (Phnom Penh)

7c51f167a1eff172bcb5cdc13abf4c4a?s=128

Aske Ertmann

August 20, 2015
Tweet

Transcript

  1. MAKING FRIENDS WITH PAGESPEED AND WEBPAGETEST WEB PERFORMANCE WITH INSIGHTS

    FOR NEOS @AskeErtmann T3CON15 Asia
  2. Agenda • Introduction • Performance matters • Server response •

    Browser rendering • Cheating • Super-charge • Budget for performance • Further • Wrap-up
  3. ASKE ERTMANN FULL-STACK DEVELOPER PASSIONATE ABOUT UX

  4. PERFORMANCE MATTERS • USER EXPERIENCE • BOUNCE-RATE, CONVERSIONS, PAGE VIEWS

    • SEARCH ENGINE RANKING • MOBILE • COSTS (BANDWIDTH)
  5. EXAMPLE OF PAGE LOAD OF TWO MAGAZINE SITES

  6. None
  7. None
  8. None
  9. None
  10. Gizmodo loads faster and display text fast compared to TechCrunch

    displaying only images later and text even later. Gizmodo readable in one third of the time Big difference for the user experience. VERDICT
  11. USER EXPERIENCE

  12. Pages should load be rendered in under one second. Search

    ranking based on performance, because of the user experience.
  13. MOBILE'S SHARE OF WEB TRAFFIC (Q1 2015) MORE MOBILE USERS

    THAN DESKTOP USERS Especially in developing countries Many mobile-only
  14. Average web page size is growing (64% for images) Increase

    in images and scripts
  15. WEB IS PERFORMANT BY DEFAULT

  16. WEB IS PERFORMANT BY DEFAULT WEB IS NOT PERFORMANT BY

    DEFAULT
  17. WEB IS PERFORMANT BY DEFAULT WEB IS NOT PERFORMANT BY

    DEFAULT Should be considered throughout the whole process
  18. TOOLS

  19. None
  20. None
  21. None
  22. A = 1219 B = 9022

  23. SERVER RESPONSE • SERVER ENVIRONMENT • OPTIMIZING IMAGES • SERVE

    SCALED IMAGES • FONT-SIZE • DOMAIN SHARDING (CDN) • CACHE BACKENDS (NEOS) • CONTENT CACHE OPTIMIZATION
  24. Server environment (high impact) • SSD > HDD • Webserver

    • Nginx > Apache 2.4 (lower memory consumption = more requests per second) • Utilize newer PHP versions • php-fpm (fast-cgi) 5.6 • HipHop (not a big difference from PHP7) • PHP7 (currently in alpha)
  25. Optimize images (high impact / medium cost) • Compress/optimize static

    assets • use SVG (where possible – not for small images necessarily, keep retina in mind) • replace png with jpegs (where possible – not transparent) • ImageOptim • svgo / svg-editor • Compress/optimize persistent assets (Neos/Flow) • MOC.ImageOptimizer (https://goo.gl/ZkJ77m)
  26. None
  27. MOC.ImageOptimizer Optimize images delivered by Neos/Flow https://github.com/mocdk/MOC.ImageOptimizer (http://goo.gl/68KciW) composer require

    "moc/imageoptimizer" “dev-master” (development version) Optimizes JPG, PNG, GIF and SVG images automatically. Supported platforms Linux, FreeBSD, OSX, SunOS & Windows + more with global binaries. Works for all Flow installations.
  28. Serve scaled images (high impact / medium cost) • srcset

    – http://caniuse.com/srcset • picturefill – http://scottjehl.github.io/picturefill/
  29. How to serve scaled images in Neos (Fluid) Provide correctly

    scaled images for responsive web sites Example: http://goo.gl/aKmZOF
  30. Font-size (medium impact / low cost) • Use woff2 and

    woff only – http://caniuse.com/woff2 • Remove unnecessary characters • Icomoon / font-squirrel to build fonts • Hosted fonts (self-hosted) • Prevent external point of failure • Avoid synchronous loading • More flexibility
  31. None
  32. None
  33. Domain sharding • Load resources from multiple domains • Average

    of 6 requests per domain • Use a CDN • can also improve latency by having a server closer to the user • * Not always better – max 2 domains!
  34. Cache backends in Neos (high impact on large sites) Challenge

    Lots of content makes saving slow. Reason Default file caches are inefficient with lots of entries with tags. Solution Use a proper caching technique for those large caches that use tags.
  35. How to Using Redis or Memcached for these three caches.

    Caches.yaml http://goo.gl/3yy2Pq Alternatively MySQL/Postgres database or sqlite
  36. Content cache optimization (low impact) • Optimize parts of page

    • E.g. head & script blocks https://goo.gl/qbaxgM
  37. BROWSER RENDERING • LEVERAGE BROWSER CACHING • ENABLE COMPRESSION •

    COMPRESS/OPTIMIZE STATIC ASSETS • MINIFY CSS / JS • ASYNCHRONOUS FONT-LOADING • ASYNCHRONOUS JAVASCRIPT-LOADING • CRITICAL VS. NONCRITICAL JS • PROGRESSIVE JPEGS • MINIFY / GZIP HTML • CRITICAL CSS • EXTERNAL LIMITATIONS
  38. Leverage browser caching (high impact – low cost) • Expire

    headers • .htaccess • Vary: Accept-encoding headers • .htaccess • needed for proxy servers (CDN) https://github.com/h5bp/server-configs
  39. Specify a cache validator (high impact – low cost) •

    E-tag • .htaccess https://github.com/h5bp/server-configs
  40. Enable compression of static assets (high impact – low cost)

    • Gzip compress assets (images, documents, fonts, js, css, svg, etc.) • .htaccess configuration https://github.com/h5bp/server-configs
  41. Use a preprocessor like Grunt/Gulp/Broccoli to build minified files while

    developing. Recommended modules: concat, uglify, autoprefixer, cssmin No built-in processing for Neos on purpose. Example: http://goo.gl/Sf532e Minify CSS / JS (high impact / medium cost)
  42. None
  43. Font-loading (high/medium impact / low/ medium cost) • asynchronous •

    prevent FOIT (Flash of Invisible Text) • font events – https://www.filamentgroup.com/lab/font- events.html
  44. Async loading of JS – defer parsing of JavaScript (high

    impact / low cost) • Use async and optionally defer attribute • Prevents render-blocking • TypoScript example:
  45. Critical vs. non-critical JS • Split JS into critical (needed

    to render the page) and non- critical (only needed for when clicking/hovering things) • https://github.com/filamentgroup/loadJS
  46. Progressive jpegs (medium impact / low/medium cost) • visible faster

    • prevent page from jumping • jpegtran / Photoshop • MOC.ImageOptimzer
  47. Minify / Gzip HTML (medium impact) • Smaller size of

    document • Not possible with .htaccess • Can be done using a Flow HTTP Component
  48. Inline scripts (low impact / low cost) • <script> tags

    with content • Considered bad practice • * Remove inline scripts • LastVisitedNode https://goo.gl/14Ls1Z
  49. Critical CSS (high impact / high cost) • only way

    to achieve page rendering in less than one second • above-the-fold • split css • asynchronous load of css • loadcss (library)
  50. External limitations • Facebook (share buttons, unoptimized images) • Analytics

    (synchronous scripts) • Twitter (share buttons, unoptimized images) • Flickr (button, unoptimized images)
  51. CHEATING

  52. CHEATING CHEATING SAVE TIME

  53. CHEATING CHEATING SAVE TIME CHEATING SAVE TIME SAVE MONEY

  54. PageSpeed Module Skip implementation – automate everything *Warning: less control

  55. SUPER-CHARGE

  56. • Hundreds of thousands of requests per hour • Extremely

    fast response times (5-40 ms depending on latency) HTTP Cache Proxies Content Cache
  57. Optimize Neos page response times Seamless drop-in installation with Neos

    site Bridges Neos and Varnish by sending cache-control headers and BAN requests based on the built-in Neos content cache. Provides a backend module to give non-developers control / insight * Be aware that pages needs to be cacheable to achieve performance gains https://github.com/mocdk/MOC.Varnish (http://goo.gl/fGSAU9) MOC.VARNISH
  58. None
  59. WHAT ABOUT HTTP/2?

  60. SPDY protocol

  61. HTTP/2 (replacing SPDY)

  62. HTTP/2 Different guidelines for some things compared to HTTP/1 With

    HTTP/2 the browser is relying on the server to deliver data in an optimal way. Always secure (SSL).
  63. HTTP/2 Resource inlining (critical rendering path / reduce request)

  64. HTTP/2 Concatinated assets (reduce requests)

  65. HTTP/2 Domain sharding (CDN)

  66. None
  67. Find out more https://goo.gl/Z6L3ph

  68. BUDGET FOR PERFORMANCE • Make it a part of the

    offer • Set a time limit – optimize efficiently (high impact / low cost) • Evaluate and adjust
  69. FURTHER

  70. SPEEDCURVE Monitor and compare your own and your competitors site

    performances Alternatively add to own continous integration system
  71. INTEGRATE WEBPAGETEST IN CONTINUOUS INTEGRATION

  72. INTERACTION PERFORMANCE Find out more https://goo.gl/bQQNJr

  73. TELL ME MORE https://goo.gl/DyX5XJ http://perf.rocks/

  74. WRAP-UP • PERFORMANCE MATTERS FOR THE USER EXPERIENCE • WEB

    NOT PERFORMANT BY DEFAULT • GREAT TOOLS AVAILABLE • IMPROVE SERVER RESPONSE • OPTIMIZE RENDERING PERFORMANCE • SAVE TIME WITH PAGESPEED MODULE • SUPER-CHARGE WITH HTTP CACHE PROXY • PERFORMANCE BUDGET • USE HTTP/2 (+ SPDY)
  75. http://goo.gl/V54MOV HTTP/2 vs. HTTP/1