{"id":139,"date":"2010-10-21T19:31:49","date_gmt":"2010-10-21T17:31:49","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=139"},"modified":"2010-11-26T23:20:21","modified_gmt":"2010-11-26T22:20:21","slug":"web-performance-best-practices","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/web-performance-best-practices\/","title":{"rendered":"Web-Performance: Best Practices"},"content":{"rendered":"

Was folgt ist eine Mischung aus der sehr guten (!) Artikelserie „Make the web faster“<\/a> von google und einigen pers\u00f6nlichen Erg\u00e4nzungen und Erfahrungen. Erhebt keinerlei Anspruch auf Vollst\u00e4ndigkeit und mischt server- sowie clientseitige Tipps querbeet. Ich gehe hier nicht besonders ins Detail, nenne aber genug Stichw\u00f6rter, zu denen man sich dann schlaugooglen kann. Als Abschluss der Einleitung m\u00f6chte ich noch auf den Gott<\/a> der Webperformance verweisen, ohne dessen B\u00fccher und Analysen wir sicher noch nicht da w\u00e4ren wo wir heute sind.<\/p>\n

    \n
  1. Javascript so weit wie es geht asynchron laden bzw. ans Seitenende bef\u00f6rdern, da Browser JS-Dateien in der Regel nicht parallel laden. Langsam geht es allerdings in die richtige Richtung mit der neuen Browsergeneration (siehe hier<\/a> f\u00fcr mehr Details, Stichw\u00f6rter async<\/i> und defer<\/i>). Es folgt ein von ncz entliehenes Script, um Javascript asynchron nachzuladen – Details siehe hier<\/a>.\n
    \r\nfunction loadScript(url, callback){\r\n\r\n    var script = document.createElement("script")\r\n    script.type = "text\/javascript";\r\n\r\n    if (script.readyState){  \/\/IE\r\n        script.onreadystatechange = function(){\r\n            if (script.readyState == "loaded" ||\r\n                    script.readyState == "complete"){\r\n                script.onreadystatechange = null;\r\n                callback();\r\n            }\r\n        };\r\n    } else {  \/\/Others\r\n        script.onload = function(){\r\n            callback();\r\n        };\r\n    }\r\n\r\n    script.src = url;\r\n    document.getElementsByTagName("head")[0].appendChild(script);\r\n}\r\n<\/pre>\n<\/li>\n
  2. Da die Anzahl der maximal m\u00f6glichen Requests zu einem Server beschr\u00e4nkt sind, lohnt sich oft das verteilen von statischem Content auf Subdomains (=anderer Hostname, also mehr Downloads parallel). Allerdings sollte mans nicht \u00fcbertreiben, da beim Verteilen auf zuviele verschiedene Server die DNS-Lookup-Zeit mehr ins Gewicht f\u00e4llt als mehr parallele Downloads.<\/li>\n
  3. In der Rangfolge der externen Dateien erst CSS und dann Javascript, da auf die Art und Weise mit den ersten Javascript-Files bereits begonnen werden kann, w\u00e4hrend CSS noch downloaded. Wer nach Waterfall Charts<\/a> googlet, wird sehen was ich meine.<\/li>\n
  4. Die Dimensionen von Bildern direkt in den img-Tag einbauen, da der Browser auf die Art und Weise beim Aufbau der Seitenstruktur direkt schon den Platz „einplanen“ kann, bevor das Bild wirklich geladen wurde<\/li>\n
  5. Cache-Header vern\u00fcnftig setzen (.htaccess). K\u00f6nnte etwa so aussehen – ist aber nat\u00fcrlich an die individuellen Bed\u00fcrfnisse anzupassen:\n
    <IfModule mod_expires.c>\r\n    ExpiresActive On\r\n    ExpiresDefault "access plus 3 days"\r\n\tExpiresByType image\/jpg "access plus 2 years"\r\n\tExpiresByType image\/jpeg "access plus 2 years"\r\n\tExpiresByType image\/gif "access plus 2 years"\r\n\tExpiresByType application\/javascript "access plus 2 years"\r\n\tExpiresByType text\/css "modification plus 1 day"\r\n<\/IfModule><\/pre>\n
    Dabei ist wenn immer m\u00f6glich der expires-header zu verwenden, da auf die Art und Weise ein http-request gespart wird und auch wenn die Antwort 304<\/i> ist, kostet das weitere Zeit.\n<\/li>\n
  6. HTTP-Requests vermeiden. Imagesprites, Javascript und CSS in der Entwicklung getrennt, im Live-Betrieb minified und zu einer Datei zusammengepackt. Wenn auch schon 4 Jahre alt, hier<\/a> immernoch mein Lieblingsscript dazu. Die effektive URL f\u00fcr seine Scripts lautet dann etwa\n
    \r\nhttp:\/\/www.creatype.nl\/javascript\/prototype.js,builder.js,effects.js,dragdrop.js,slider.js\r\n<\/pre>\n
    Diese werden zusammengecruncht und als eine Datei physisch auf dem Server abgelegt.\n<\/li>\n
  7. CSS Selektoren nicht unn\u00f6tig spezifizieren. Statt\n
    body #wrapper #left div#menu<\/pre>\n
     w\u00fcrde es auch <\/p>\n
    #menu<\/pre>\n
     tun, was dem Browser viel Arbeit beim CSS-parsen erspart. CSS Selektoren werden von rechts nach links abgearbeitet. Ich ertappe mich allerdings selbst oft dabei, einen Selektor zu \u00fcberspezifizieren, weil ich dadurch besser erkenne, in welchem Kontext er steht. Da dann lieber Kommentare verwenden. Au\u00dferdem sinkt der „reuse“-Faktor von \u00fcberspezifizierten Selektoren, was ja eigentlich den Kern von CSS ausmachen sollte. Siehe dazu Object Oriented CSS<\/a><\/li>\n
  8. Javascript-reflows vermeiden. Ein Reflow wird durch so ziemlich alles ausgel\u00f6st, was im DOM manipuliert wird. So ist es bspw. empfehlenswert, erst das HTML komplett als String zusammenzubauen, bevor man es ins DOM einf\u00fcgt da auf die Art und Weise die Anzahl der Reflows minimiert wird. Klassisches Beispiel:\n
    \r\nvar categories = ["Home","About me","Stuff","Other Stuff"];\r\n\r\n$.each(categories,function(elem)\r\n{\r\n    $("ul").append("<li>" + elem + "<\/li>");\r\n});\r\n<\/pre>\n
     ist vergleichen mit <\/p>\n
    var categories = ["Home","About me","Stuff","Other Stuff"],\r\n    htmlstr = "";\r\n    \r\n$.each(categories,function(elem)\r\n{\r\n    htmlstr += "<li>" + elem + "<\/li>"\r\n});\r\n\r\n$("ul").html(htmlstr);<\/pre>\n
     um eine ganze Ecke unperformanter.\n<\/li>\n
  9. Cookies am besten komplett vermeiden, da diese bei jeder neuen Seite erneut im Header \u00fcbertragen werden. Wenn irgendwie machbar, dann per Session-ID. Wenn unbedingt n\u00f6tig, dann zumindest nur eine ID und einen hash im Cookie speichern und den dann serverseitig validieren und die Daten so auslesen. Ist ohnehin wesentlich sicherer. Auf jeden Fall liegt die maximal vertretbare Gr\u00f6\u00dfe bei 1500 byte, was der durchschnittlichen MTU entspricht (Bytes pro \u00fcbertragenem Paket). Die Cookies immer so spezifisch wie m\u00f6glich setzen. Sollte der Cookie also nur auf einer Subdomain oder einer einzelnen Seite gebraucht werden, ist er auch nur f\u00fcr diese zu setzen.<\/li>\n
  10. Komprimieren! Lieder deflate statt gzip, einfach ausprobieren.\n
    <IfModule mod_deflate.c>\r\nAddOutputFilterByType DEFLATE text\/html text\/plain text\/xml text\/css application\/x-javascript text\/javascript application\/javascript application\/json \r\n<\/IfModule><\/pre>\n<\/li>\n
  11. SQL-Statements in Loops vermeiden. Gerade bei Insert gern genommen:\n
    \r\nforeach ($cars as $c) \r\n{\r\n  $query = 'INSERT INTO cars (cartype,horsepower) VALUES("'.$c['type'].'","'.$c['hp'].'")';\r\n  mysql_query($query);\r\n}\r\n<\/pre>\n
    Wesentlich effektiver hingegen:<\/p>\n
    \r\n$sql = array();\r\nforeach ($cars as $c) {\r\n    $sql[] = '("'.$c['type'].'","'.$c['hp'].'")';\r\n}\r\n$query = 'INSERT INTO cars (cartype,horsepower) VALUES '.implode(',', $sql);\r\nmysql_query($query);\r\n<\/pre>\n
    Auch Insert delayed<\/a> bietet sich oft an.\n<\/li>\n
  12. Google Page Speed<\/a> und YSlow!<\/a> benutzen um die wirklichen bottlenecks zu finden (premature optimization is the root of all evil<\/i> wie wir alle wissen).<\/li>\n
  13. Zum rumspielen mit den HTTP-Headern empfiehlt sich folgendes Script:\n
    <?php\r\n$lastModified = filemtime(__FILE__);\r\n$etagFile = md5_file(__FILE__);\r\n$ifModifiedSince=(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ? $_SERVER['HTTP_IF_MODIFIED_SINCE'] : false);\r\n$etagHeader=trim($_SERVER['HTTP_IF_NONE_MATCH']);\r\n\r\nheader("Last-Modified: ".gmdate("D, d M Y H:i:s", $lastModified)." GMT");\r\nheader("Etag: $etagFile");\r\nheader('Cache-Control: public');\r\n\r\nif (@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $lastModified ||\r\n    $etagHeader == $etagFile) \r\n\t{\r\n\t\theader("HTTP\/1.1 304 Not Modified");\r\n\t}\r\n\r\necho "Last modified: ".$lastModified." (".gmdate("D, d M Y H:i:s",$lastModified. "GMT").")<br \/>";\r\necho "if-modified-since: ".strtotime($ifModifiedSince)." (".$ifModifiedSince.")<br \/>";\r\necho "etag-File: ".$etagFile."<br \/>";\r\necho "etag-Header: ".$etagHeader."<br \/>";\r\n<\/pre>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Was folgt ist eine Mischung aus der sehr guten (!) Artikelserie „Make the web faster“ von google und einigen pers\u00f6nlichen Erg\u00e4nzungen und Erfahrungen. Erhebt keinerlei Anspruch auf Vollst\u00e4ndigkeit und mischt server- sowie clientseitige Tipps querbeet. Ich gehe hier nicht besonders … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,9,10,6,8,3],"tags":[],"class_list":["post-139","post","type-post","status-publish","format-standard","hentry","category-php","category-javascript","category-datenbanken","category-performance","category-security","category-quicktips","category-webdev"],"_links":{"self":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":0,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"wp:attachment":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}