1.
PageSpeed Insights v2.0
100/100
András Ottó
@OttoAndras
guide
#t3cm
TYPO3 Camp München
München

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.
OK, but what is it all about?

4.
Take a page as a start

5.
And reach our goal: 100/100/100

6.
... a bit more specific?

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.
So... simply speed up a page?

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.
Take a chance on the
Introduction package:
h:p://pagespeed.marit.ag/

11.
A brand new 6.2 installation

12.
A brand new 6.2 installation

13.
Have fun and reach the 100

14.
Compression and Browser-Caching

15.
.htaccess - Compression

16.
.htaccess – Browser Caching

17.
Compression and Browser-Caching

18.
Compression and Browser-Caching

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.
Reduce the JavaScript

21.
But.. compression is on

22.
“If it is on, then turn it off!!!”

23.
… and let grunt make the job

24.
Grunt for JavaScript and CSS
Step1: Explore what you have in the TypoScript Object Browser:

25.
Grunt for CSS
Compile:
Minify:

26.
Grunt for JavaScript
Grunt settings:

27.
Reference - Grunt packages

28.
And at the end TypoScript setup

29.
All pain… no gain

30.
Reduce HTML– save that 562 Bytes

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.
At least… another one is green

33.
Lets deal with the images

34.
Save another 1858 Bytes…

35.
What says Google?
JPEG
jpegtran
jpegoptim
PNG
OptiPNG
PNGOUT

36.
External tools… or something else?

37.
Reference - Image Magick magic

38.
Green feels good ;)

39.
What is the point?

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.
What was (is) critical?
The important points
Structure -> grids, layout
Menu -> 2. level, 3. level, and so on
Teaser / Slider
Font-size
Colors

42.
How to implement the critical part?

43.
Almost done, but we were too lazy

44.
We have to tune php…

45.
Opcode & APCu
https://www.mittwald.de/hosting/global-rocket-cache

46.
100/100

47.
89/100 ???????

48.
After one line of CSS

49.
But… let see the features page
Lazy loading
Simple loading

50.
The main numbers
Finish Lazy
Not
so
lazy
Finish
448
253
DOMContentLoaded
378
379
Load
404
414

51.
Reference - TypoScript added

52.
WebPageTest

53.
Behind the 100

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.
Reference - .htaccess code

56.
Results – for the Features page
Response time: 40ms instead of 134ms
Before
A3er
Finish
253
240
DOMContentLoaded
379
290
Load
414
332

57.
How does it look like?

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.
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.
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.
Licensing
of
the
presenta7on:
Crea7ve
Commons
A:ribu7on-­‐NoDeriva7ves
4.0
Interna7onal
Thank
you!