Tijdens een HCI handson sessie in Arnhem werd wat CSS gewijzigd In de CSS map stond een _.htaccess bestand

Transcriptie

1 Bekentenis Hallo allemaal, mijn naam is Michiel Roos en ik ben een gebruiker Ik gebruik al 8 jaar Het begon allemaal als een experiment, maar het is steeds meer uit de hand gelopen Ik ben nu zelfs financieel afhankelijk geworden

2 Waar gaat dit over? Inzet van Yslow, een uitbreiding op de Firefox extensie Firebug waarmee je snelheids-pijnpunten in je website en serverconfiguratie op kunt opsporen. Het is leuker als je zelf toegang hebt tot een server, een deze testjes zelf uitvoert tijdens het lezen De uitgebreide versie kun je vinden op: Dus, pak dat artikel er ff bij

3 Hoe kom je er op? Tijdens een HCI handson sessie in Arnhem werd wat CSS gewijzigd In de CSS map stond een _.htaccess bestand <FilesMatch "\.css$"> <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 7 days" </IfModule> FileETag MTime Size </FilesMatch>

4 YSlow Extensie op FireBug: YSlow: Waarom langzaam? Om een boel redenen 26000% snelheidsverbetering is niet genoeg!

5 Hoe werkt dat? Net als vroeger op school Je krijgt een cijfer tussen de 0 en 9,9 (a-f) F32 is bar slecht, je hoort bij de sloomsten Een A78 is best aardig, vlotte leerling Aan de hand van een aantal criteria wordt een rapport cijfer voor vlotheid gegeven Heb je een laag cijfer? Dan zijn er wat puntjes waar je aan kunt werken.

6 Waarom is mijn backend zo traag?

7 Voer minder HTTP requests uit Sowieso een goed idee: verstuur minder data! Minder schijf activiteit Minder request en response headers Minder data verkeer Pagina laadt sneller

8

9 F25

10 Voer minder HTTP requests uit scriptmerger Stefan Galinsky jsmin + csstidy alleen frontend jsmin zit wel in de core van (typo3/contrib)

11 Gebruik een CDN WTF is een CDN? Content Delivery Network, denk Yahoo / Google netwerk. In ieder land servers. Heb je dat niet?

12 Uiterste houdbaarheidsdatum Voeg een uiterste houdbaarheidsdatum toe aan je response Doe je dat niet? Dan wordt je content niet gecached in de browser (of proxy)! Veel CSS, JS en afbeeldingen zijn na een paar weken nog best te gebruiken TYPO3 kan cache headers sturen (frontend) Expires: Thu, 15 Apr :00:00 GMT Apache: mod_expires

13 # Send expiry headers for files that do not change often # <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 48 hours 1 seconds" ExpiresByType image/gif "access plus 48 hours 1 seconds" ExpiresByType image/png "access plus 48 hours 1 seconds" ExpiresByType text/css "access plus 48 hours 1 seconds" ExpiresByType application/x-javascript "access plus 48 hours 1 seconds" ExpiresByType text/javascript "access plus 48 hours 1 seconds" ExpiresByType image/jpeg "access plus 48 hours 1 seconds" </IfModule>

14 F35

15

16 Uiterste houdbaarheidsdatum Sommige dingen hoeven niet in de koelkast Install tool waarschuwing bijvoorbeeld # Do not cache the main php files in /typo3 <FilesMatch "(/typo3/index.php /typo3/install/index.php /typo3/backend.php)"> ExpiresActive Off </FilesMatch>

17 Pakketjes netjes inpakken YSlow -> Components tab Net ingepakte pakketjes zijn kleiner Minder data verkeer -> snellere response Apache mod_deflate

18 <IfModule mod_deflate.c> SetOutputFilter DEFLATE # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # NOTE: Due to a bug in mod_setenvif up to Apache etc. BrowserMatch \bmsi[e]!no-gzip!gzip-only-text/html # Don't compress everything SetEnvIfNoCase Request_URI \.(?i:gif jpe?g png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?i:exe t?gz zip bz2 sit rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.avi$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.mov$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.rm$ no-gzip dont-vary </IfModule>

19

20

21 Components tab

22 64K should be enough for anyone 20 K is al zat, dan laadt de pagina 'lekker snel'

23 Zet CSS in de <head> Dus niet inline in de body op de pagina Progressieve pagina opbouw (CSS laadt na de pagina zelf)

24 Plaats JavaScript onderaan de pagina Scripts blokkeren gelijktijdige downloads van het HTTP protocol mag je maximaal 2 resources tegelijk van een server ophalen Google Analytics is een goed voorbeeld van een traag reagerend JavaScript (zit gelukkig niet in BE)

25 Vermijd CSS condities Je schijnt in CSS condities te kunnen gebruiken om bijvoorbeeld ieder uur de achtergrond te wijzigen De expressies worden echter vaak geevalueerd, ook bijvoorbeeld bij een scroll actie

26 Maak zo min mogelijk DNS lookups Het resolven van domein namen naar IP nummers kost tijd Meer domein namen maken meerdere gelijktijdige downloads mogelijk

27 Comprimeer JavaScript en CSS Naast het gebruik van mod_deflate kun je ook de code zelf minimaliseren Verwijderen regeleindes, overbodige spaties en tabs Jsmin / CSSTidy Frontend: scriptmerger Stefan Galinsky

28 Vermijd kastje-muur constructies Vermijd redirects (301 / 302) pagina is permanent verhuisd naar een nieuwe locatie De backend heeft hier geen last van

29 DRY Don't Repeat Yourself! 11 redundante resources 3 typo3/contrib/prototype/prototype.js 1 typo3/contrib/scriptaculous/effects.js 1 typo3/js/common.js 2 typo3/js/iecompatibility.js 3 typo3/tab.js 1 typo3/js/clickmenu.js

30 Configureer Entity tags / ETags Mechanisme om te bepalen of een entity / component is gewijzigd sinds het laatste bezoek GET HTTP/1.1 /i/yahoo.gif 200 OK HTTP/1.1 Host: Last-Modified: us.yimg.com Tue, 12 Dec :03:59 GMT If-Modified-Since: ETag: "10c24bc-4ab-457e1c1f" Tue, 12 Dec :03:59 GMT If-None-Match: Content-Length:"10c24bc-4ab-457e1c1f" HTTP/ Not Modified

31 # Set ETags to a sensible value FileETag MTime Size

32 Gezakt! We hebben goed ons best gedaan, maar we hebben nog geen voldoende

33

34 Uitslag van de skin wedstrijd before after retro skin t3skin F 32 F 19 D 69 D % 326%

35 Verbeteringen voor TYPO3 BE Samenvoegen van de.htaccess bestanden./typo3/gfx/_.htaccess./typo3/mod/user/ws/_.htaccess./typo3/sysext/t3skin/stylesheets/_.htaccess./typo3/sysext/_.htaccess Verschillende regels voor directories of bestanden? <DirectoryMatch> of <FileMatch> gebruiken

36 Toetje Server Token aanpassen Server: Apache/ (Unix) PHP/4.2.2 MyMod/1.2 Ietsie kleinere headers Server: Apache Server: Apie

37 Koffie Cache-control: public Je vindt het ok dat publieke proxies je pagina's cachen Proxies gebruiken alleen de Expiry headers. Dus als je pagina's wijzigt weet de proxy daar niets van.

38 En de frontend dan? Deze optimalisatie instellingen werken natuurlijk ook voor de fontend Pas op met.htaccess Inspecteer je HTTP headers met Live HTTP Headers

39 Bronnen

40 ?