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)

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
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
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)
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
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)
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
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)
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