PageSpeed Insights v2.0
100/100
András Ottó
@OttoAndras
guide
#t3cm
TYPO3 Camp München
München
Learn	
  and	
  book	
  a	
  session	
  
Book a seminar now and get an event discount
  Voucher-Code T3CM
  Seminar detail...
OK, but what is it all about?
Take a page as a start
And reach our goal: 100/100/100
... a bit more specific?
This is about rendering a page
Some tricks that may help with
  Images
  JS and CSS
  Code compression
„Above the fold“ so...
So... simply speed up a page?
„Jaein“
Yes
Less requests
Compressed data
Quick „look and feel“ = Quick
way to the first view
No
Your Database
Your Busine...
Take a chance on the
Introduction package:
h:p://pagespeed.marit.ag/	
  
A brand new 6.2 installation
A brand new 6.2 installation
Have fun and reach the 100
Compression and Browser-Caching
.htaccess - Compression
.htaccess – Browser Caching
Compression and Browser-Caching
Compression and Browser-Caching
Wait a second!
This should work out of the box,
because this is included in the
introduction package!
Or not?
http://www.c...
Reduce the JavaScript
But.. compression is on
“If it is on, then turn it off!!!”
… and let grunt make the job
Grunt for JavaScript and CSS
Step1: Explore what you have in the TypoScript Object Browser:
Grunt for CSS
Compile:
Minify:
Grunt for JavaScript
Grunt settings:
Reference - Grunt packages
And at the end TypoScript setup
All pain… no gain
Reduce HTML– save that 562 Bytes
OK, but… is it really so important?
Well… anyway the
solution is simple:
1) Install the extension,
2) and set the formatHt...
At least… another one is green
Lets deal with the images
Save another 1858 Bytes…
What says Google?
JPEG
jpegtran
jpegoptim
PNG
OptiPNG
  PNGOUT
External tools… or something else?
Reference - Image Magick magic
Green feels good ;)
What is the point?
Does Google measure the speed?
Yes
If you follow the instructions it will
help to speed up your page. (At
least the fronte...
What was (is) critical?
The important points
Structure -> grids, layout
  Menu -> 2. level, 3. level, and so on
  Teaser /...
How to implement the critical part?
Almost done, but we were too lazy
We have to tune php…
Opcode & APCu
https://www.mittwald.de/hosting/global-rocket-cache
100/100
89/100 ???????
After one line of CSS
But… let see the features page
Lazy loading
Simple loading
The main numbers
Finish Lazy	
   Not	
  so	
  lazy	
  
Finish	
   448	
   253	
  
DOMContentLoaded	
   378	
   379	
  
Loa...
Reference - TypoScript added
WebPageTest
Behind the 100
Implementing static file cache
Requirements
  Page should be cacheable in TYPO3
  Server with rewrite capabillities (Apach...
Reference - .htaccess code
Results – for the Features page
Response time: 40ms instead of 134ms
Before	
   A3er	
  
Finish	
   253	
   240	
  
DOMCon...
How does it look like?
References
PageSpeed Isights:
https://developers.google.com/speed/pagespeed/insights/
mod_pagespeed:
https://developers.go...
If	
  you	
  need	
  more	
  details...	
  
Don‘t forget to check our seminar and claim your discount!
  Voucher-Code T3CM...
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/1...
Licensing	
  of	
  the	
  presenta7on:	
  	
  
Crea7ve	
  Commons	
  	
  A:ribu7on-­‐NoDeriva7ves	
  4.0	
  Interna7onal	
...
Nächste SlideShare
Wird geladen in …5
×

Marit AG - Google Page Speed Insight 100/100 guide

5.439 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
8 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.439
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
892
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
8
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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!  

×