Google Page Speed Test loves Neos CMS

Slides of my 5min lightning talk at www.inspiringconference.com in April 2016

Transcript

1. GOOGLE PAGE SPEED TEST — NEOS Or: How to get to 100 out of 100 points
2. HI, THIS IS MARIO Works at internezzo.ch Cannot decide between Dev and Ops… Image: https://www.flickr.com/photos/75370227@N05/6789433973/
3. https://developers.google.com/speed/pagespeed/insights/
4. https://developers.google.com/speed/pagespeed/insights/
5. IS IT IMPORTANT AT ALL?
6. TRANSFER LESS
7. SERVER-SIDE OPTIMISATIONS ➤ Enable compression ➤ Leverage browser caching ➤ Reduce server response time ➤ (Eliminiate landing page redirects) ➤ (Use a Content Delivery Network) ➤ (Deliver your site encrypted) Those things help a lot - but don’t bring you close to 100 points alone…
8. STATIC ASSET OPTIMISATIONS ➤ Merge and minify your static assets ➤ JavaScript ➤ CSS ➤ Optimize static images ➤ Template-Images Tools: Sass / gulp.js + a bunch of npm modules
9. CONTENT / OUTPUT OPTIMISATIONS
10. LOADING ORDER OF CSS
11. LOADING ORDER OF CSS
12. EXTERNAL JAVASCRIPTS Download + include in your minified JS via a Gulp.js task
13. LOADING ORDER OF CSS
14. LOADING ORDER OF CSS
15. LOADING ORDER OF CSS Used Tools:
 
 Gulp.js / Penthouse / PhantomJS
16. OPTIMIZE IMAGES ➤ Scaling is not enough ➤ Use srcset to deliver multiple versions (aka responsive and Retina-Optimized images) ➤ Images must be optimized! A Neos-Package does the magic (with the help of some npm packages):
 https://github.com/mocdk/MOC.ImageOptimizer
17. OPTIMIZE YOUR HTML OUTPUT ➤ Do just include + deliver what’s needed ➤ Use and tune Caching! ➤ (minify the HTML output) Caching is greatly configurable with Neos, minifying is possible with Flownative’s Compressor-Package:
 https://github.com/Flownative/neos-compressor
18. IT’S FRAGILE
19. “ Don’t ever take those tests
 too serious! -Mario Rimann
20. 5 MINUTES ARE SHORT Just contact me for more details: mario@rimann.org @mrimann Or visit www.stickermanufaktur.ch to see the optimized website.