Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Marit AG - Google Page Speed Insight 100/100 guide

7,205 views

Published on

This presentation made for the TYPO3 Camp München 2015 and TYPO3 Developer Days 2015 Nürnberg.
It shows a step by step guide how to tuning the page speed of a page manually to reach the 100 from 100 by Google Page Speed Insights.
Topics:
- Browser Caching
- Compression
- Above the fold
- grunt
- Cache

Published in: Technology

Marit AG - Google Page Speed Insight 100/100 guide

  1. 1. PageSpeed Insights v2.0 100/100 András Ottó @OttoAndras guide #t3cm TYPO3 Camp München München
  2. 2. Learn  and  book  a  session   Book a seminar now and get an event discount   Voucher-Code T3CM   Seminar details (german) http://www.marit.ag/typo3-schulungen/pagespeed- schulungen/   Booking (german) http://www.marit.ag/kontakt/ Request  PageSpeed   consul7ng  now   -30% 50  %  
  3. 3. OK, but what is it all about?
  4. 4. Take a page as a start
  5. 5. And reach our goal: 100/100/100
  6. 6. ... a bit more specific?
  7. 7. This is about rendering a page Some tricks that may help with   Images   JS and CSS   Code compression „Above the fold“ solution manually Why? How? ... without mod_pagespeed ... in a shared environment
  8. 8. So... simply speed up a page?
  9. 9. „Jaein“ Yes Less requests Compressed data Quick „look and feel“ = Quick way to the first view No Your Database Your Business Logic Your Cache   ... is your problem J
  10. 10. Take a chance on the Introduction package: h:p://pagespeed.marit.ag/  
  11. 11. A brand new 6.2 installation
  12. 12. A brand new 6.2 installation
  13. 13. Have fun and reach the 100
  14. 14. Compression and Browser-Caching
  15. 15. .htaccess - Compression
  16. 16. .htaccess – Browser Caching
  17. 17. Compression and Browser-Caching
  18. 18. Compression and Browser-Caching
  19. 19. Wait a second! This should work out of the box, because this is included in the introduction package! Or not? http://www.contao-austria.at/blogreader/contao-3-und-gzip-mod_deflate-bei-hosteurope.html Solution: delete the <IfModule mod_filter.c> in line 164 and the </IfModule> in line 181
  20. 20. Reduce the JavaScript
  21. 21. But.. compression is on
  22. 22. “If it is on, then turn it off!!!”
  23. 23. … and let grunt make the job
  24. 24. Grunt for JavaScript and CSS Step1: Explore what you have in the TypoScript Object Browser:
  25. 25. Grunt for CSS Compile: Minify:
  26. 26. Grunt for JavaScript Grunt settings:
  27. 27. Reference - Grunt packages
  28. 28. And at the end TypoScript setup
  29. 29. All pain… no gain
  30. 30. Reduce HTML– save that 562 Bytes
  31. 31. OK, but… is it really so important? Well… anyway the solution is simple: 1) Install the extension, 2) and set the formatHtml property to 1
  32. 32. At least… another one is green
  33. 33. Lets deal with the images
  34. 34. Save another 1858 Bytes…
  35. 35. What says Google? JPEG jpegtran jpegoptim PNG OptiPNG   PNGOUT
  36. 36. External tools… or something else?
  37. 37. Reference - Image Magick magic
  38. 38. Green feels good ;)
  39. 39. What is the point?
  40. 40. Does Google measure the speed? Yes If you follow the instructions it will help to speed up your page. (At least the frontend rendering) No You can reach the 100 and you can be still slower as a page with < 100
  41. 41. What was (is) critical? The important points Structure -> grids, layout   Menu -> 2. level, 3. level, and so on   Teaser / Slider   Font-size   Colors
  42. 42. How to implement the critical part?
  43. 43. Almost done, but we were too lazy
  44. 44. We have to tune php…
  45. 45. Opcode & APCu https://www.mittwald.de/hosting/global-rocket-cache
  46. 46. 100/100
  47. 47. 89/100 ???????
  48. 48. After one line of CSS
  49. 49. But… let see the features page Lazy loading Simple loading
  50. 50. The main numbers Finish Lazy   Not  so  lazy   Finish   448   253   DOMContentLoaded   378   379   Load   404   414  
  51. 51. Reference - TypoScript added
  52. 52. WebPageTest
  53. 53. Behind the 100
  54. 54. Implementing static file cache Requirements   Page should be cacheable in TYPO3   Server with rewrite capabillities (Apache / NginX) Settings Install the extension Implement some .htaccess code
  55. 55. Reference - .htaccess code
  56. 56. Results – for the Features page Response time: 40ms instead of 134ms Before   A3er   Finish   253   240   DOMContentLoaded   379   290   Load   414   332  
  57. 57. How does it look like?
  58. 58. References PageSpeed Isights: https://developers.google.com/speed/pagespeed/insights/ mod_pagespeed: https://developers.google.com/speed/pagespeed/module/filter-head-add EXT: sourceopt: http://typo3.org/extensions/repository/view/sourceopt EXT: nc_staticfilecache http://typo3.org/extensions/repository/view/nc_staticfilecache PageSpeed page by Marit: http://www.marit.ag/websites/performante-websites/ http://pagespeed.marit.ag/
  59. 59. If  you  need  more  details...   Don‘t forget to check our seminar and claim your discount!   Voucher-Code T3CM (50% off)   Seminar details (german) http://www.marit.ag/typo3-schulungen/pagespeed-schulungen/   Booking (german) http://www.marit.ag/kontakt/ -30% Request  PageSpeed   consul7ng  now  
  60. 60. András Ottó Team Leader, Senior Developer Wilhelm-Hale-Straße 53 80639 München Tel: +49 (0) 89/130 145-0 Fax: +49 (0) 89/130 145-10 Thank you! Do you have any questions or ideas? Do not hesitate to contact us, we are looking forward to hear about you! András Ottó   Contact   Email:
  61. 61. Licensing  of  the  presenta7on:     Crea7ve  Commons    A:ribu7on-­‐NoDeriva7ves  4.0  Interna7onal   Thank  you!  

×