Block > Fruehjahrsputz #2

Im vorletzten Beitrag hatte ich es ja bereits durchblicken lassen, dass ich noch einiges machen wollte. Dieses einige habe ich nun erledigt und wollte es euch nicht vorenthalten :)

Optimierungen

SSL

Dank Heartbleed hab ich mal ein neues Zertifikat gebaut. Dies ist nun ein Wildcard-Zertifikat (so koennen nun auch blafasel.yhaupenthal.org und test.yhaupenthal.org verschluesselt werden), etwas groesserer Schluessellaenge (4096 bit) und wieder bei CAcert.

Da ich es schon oefter gemacht habe, und immer vergesse, wie das geht, hier eine Anleitung. Dies richtet sich allerdings nur an Leute, die bei CAcert Zertifikate ausstellen koennen und lighttpd als Webserver einsetzen.

Und da wir gerade schon dabei sind, hier eine Anleitung, wie lighttpd beim SSL Server Test gut abschneidet (ich bekomme zwar ein F, das liegt aber daran, dass sie CAcert nicht trauen, ansonsten haette ich ein A+).
Dabei lasse ich nur noch bestimmte Protokolle und Cipher zu und gewaehrleiste so auch Perfect Forward Secrecy (PFS) :)

Der SSL Server Test kann dabei uebrigens auch durch Kommandozeilenprogramme durchgefuehrt werden: SSLScanner oder testssl.sh

Quellen:

PageSpeed Insights

Dank PageSpeed Insights konnte ich einige Verbesserungen erzielen, fuer mobile Geraete wie auch fuer den Desktop.

Eine sinnvolle Methode war, die JavaScript- und CSS-Dateien zu entschlacken und zu minimieren:

Desweiteren werden nun einige Dateitypen vom Webserver komprimiert ausgeliefert. Dazu kam folgendes in meine Lighttpd-Konfiguration (vorher noch das Servermodul mod_compress laden):

compress.allowed-encodings = ("bzip2", "gzip", "deflate")
compress.cache-dir = "/tmp/cache/"
compress.filetype = ("text/css", "text/javascript", "text/plain", "text/html", "text/xml", "application/javascript", "image/png", "application/rss+xml", "application/octet-stream", "application/x-javascript")

Quellen:

Leider meint Google immer noch, dass da noch was zu optimieren ist, aber ich glaube, das liegt am HTML-Code, der ist naemlicht nicht komprimiert. Und ich bin mir auch nicht so recht sicher, ob ich das will (Lesbarkeit und so …).

Per default folgendes als Response auf einen GET-Request zu senden, macht naemlich einiges kaputt:

setenv.add-response-header = ( "Content-Encoding" => "gzip" )

Naja, das muss ich mal noch weiter untersuchen. Im Moment reicht mir da aber die 99% bzw. 97% bei der Bewertung.

Noch ein Thema bei der Komprimierung waren die Bilder auf meiner Seite. Ich koennte die alle mal durch optipng oder aehnliches jagen, hab das aber noch nicht gemacht.

Ebenfalls im Zusammenhang mit dem schnelleren Laden von Websites steht das Nachladen von Code, wie JavaScript oder CSS.
Dank Google hab ich nun die JavaScript-Datei ans Ende meiner Website geschoben und lade sie asynchron nach:

--- 8< ---
        <script async src="./js/js-min.js"></script>
    </body>
</html>

Was mich nun neben der Komprimierung noch von 100% bei den Bewertungen abhaelt ist zum einen die optimale Groesse von Links oder Schaltflaechen auf Mobilgeraeten einhalten - was mir wirklich im Moment zu doof ist - und zum anderen, dass ich nur CSS-Code laden soll, der direkt gebraucht wird, weil alles unterm Bildschirmrand erstmal unsichtbar ist und nicht gebraucht wird (daher above the fold). Auch das ist mir im Moment zu doof.

Update (2014-06-02): Vorher hatte ich den CSS-Code erst ganz am Ende (nach </html>) geladen, allerdings failt das in einigen Browsern und mir selbst war der Sinn nicht ganz klar (hier Google dazu). Daher nun wieder wie gewohnt im <head>.

Webmaster-Tools

Neben PageSpeed Insights hab ich mir auch mal die Webmaster-Tools von Google angeguckt und konnte ein paar Optimierungen vornehmen.
Dabei habe ich insbesondere mal eine ordentliche Sitemap kreirt, denn meine jetzige ist eher fuer Menschen denn fuer Maschinen gedacht ;)

Dabei habe ich mir erst ein kleines Script geschrieben, was mir alle Dateien, die meine Website ausmachen, in eine Datei ausspuckt:

--- 8< ---
http://yhaupenthal.org/1198265694.htm
http://yhaupenthal.org/1198267875.htm
http://yhaupenthal.org/1198415538.htm
--- >8 ---

Zusammen mit sitemap-generators und der folgenden Konfiguration spuckt das Script mir dann eine Sitemap-Datei aus.

<?xml version="1.0" encoding="UTF-8"?>
<site
    base_url="http://yhaupenthal.org/"
    store_into="/tmp/sitemap.xml"
    verbose="1"
    sitemap_type="web"
>
<urllist path="/tmp/urls.txt" encoding="UTF-8" /> 
</site>

Die Sitemap-Datei befindet sich nun hier: sitemap.xml.

Wichtig ist dabei noch, das auch den anderen Suchmaschinen mitzuteilen, z.B. per robots.txt:

# Have phun ...
User-agent: *
Disallow:
Sitemap: http://yhaupenthal.org/sitemap.xml

Und hier noch was fuer die Statistik:

--- 8< ---
Writing Sitemap file "/tmp/sitemap.xml" with 1677 URLs
Search engine notification is suppressed.
Count of file extensions on URLs:
       1  .blend
       1  .c4d
       1  .cpp
       1  .css
     171  .fcgi
       2  .gif
       1  .gz
     207  .htm
     614  .jpg
       1  .js
       7  .pdf
     645  .png
       2  .psd
       1  .sh
       1  .stl
       9  .svg
       1  .tex
       1  .thing
       5  .txt
       5  .xml
Number of errors: 0
Number of warnings: 0

GTmetrix

Update (2014-06-02): GTmetrix nutzt PageSpeed und YSlow und testet damit die jeweilige Website.
Ich hatte beim ersten Versuch 99% bei PageSpeed und 95% bei YSlow.

Daraufhin habe ich im Header <meta charset="utf-8"> entfernt, da es direkt vom Server beim HTTP Request mitgeschickt wird:

mimetype.assign = (
    ".htm" => "text/html; charset=utf-8"
)

Update (2014-06-05): Die Aenderung habe ich nun wieder rueckgaengig gemacht (also wieder <meta charset="utf-8"> zum Header hinzugefuegt), da einige Browser wie Firefox nicht ohne auskommen ..

Nicht klar ist mir, was dieses CDN soll, ich will meine Dateien nicht von externen Quellen laden .. Datenschutz und so ..

Sonstiges

TODO

Geschrieben: 2014-05-25, 00:43 - Tags: neu