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
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:
http://typofree.org/articles/optimizing-typo3-backend-responsiveness/
Dus, pak dat artikel er ff bij
Hoe kom je er op? Tijdens een HCI handson sessie in Arnhem werd wat CSS gewijzigd In de CSS map stond een _.htaccess bestand
ExpiresActive on ExpiresDefault "access plus 7 days" FileETag MTime Size
YSlow Extensie op FireBug: http://getfirebug.com/ YSlow: http://developer.yahoo.com/yslow/ Waarom langzaam? Om een boel redenen 26000% snelheidsverbetering is niet genoeg!
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.
Waarom is mijn backend zo traag?
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
F25
Voer minder HTTP requests uit scriptmerger – Stefan Galinsky jsmin + csstidy – alleen frontend jsmin zit wel in de core van 4.2.1 (typo3/contrib)
Gebruik een CDN WTF is een CDN? Content Delivery Network, denk Yahoo / Google netwerk. In ieder land servers. Heb je dat niet?
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 2010 20:00:00 GMT Apache: mod_expires
# Send expiry headers for files that do not change often # http://httpd.apache.org/docs/2.0/mod/mod_expires.html
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"
F35
Uiterste houdbaarheidsdatum Sommige dingen hoeven niet in de koelkast Install tool waarschuwing bijvoorbeeld # Do not cache the main php files in /typo3
ExpiresActive Off
Pakketjes netjes inpakken YSlow -> Components tab Net ingepakte pakketjes zijn kleiner Minder data verkeer -> snellere response Apache mod_deflate
SetOutputFilter DEFLATE # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 . . . 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
Components tab
64K should be enough for anyone 20 K is al zat, dan laadt de pagina 'lekker snel'
Zet CSS in de Dus niet inline in de body op de pagina Progressieve pagina opbouw (CSS laadt na de pagina zelf)
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)
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
Maak zo min mogelijk DNS lookups Het resolven van domein namen naar IP nummers kost tijd Meer domein namen maken meerdere gelijktijdige downloads mogelijk
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
Vermijd kastje-muur constructies Vermijd redirects (301 / 302) pagina is permanent verhuisd naar een nieuwe locatie De backend heeft hier geen last van
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
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 2006 03:03:59 GMT If-Modified-Since: ETag: "10c24bc-4ab-457e1c1f" Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: Content-Length:"10c24bc-4ab-457e1c1f" 12195 HTTP/1.1 304 Not Modified
# Set ETags to a sensible value FileETag MTime Size
Gezakt! We hebben goed ons best gedaan, maar we hebben nog geen voldoende
Uitslag van de skin wedstrijd
before after
retro skin t3skin F 32 F 19 D 69 D 62
216%
326%
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?
of gebruiken
Toetje Server Token aanpassen Server: Apache/2.0.41 (Unix) PHP/4.2.2 MyMod/1.2 Ietsie kleinere headers Server: Apache Server: Apie
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.
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
Bronnen http://getfirebug.com/ http://developer.yahoo.com/performance/ http://httpd.apache.org/docs/2.0/
? http://typofree.org
