Boehrsi.de V7 - Geschwindigkeit
Heute beginne ich mit einer kleinen Reihe zur neuen Version meiner Homepage und dabei will ich mich von oben nach unten arbeiten. Ich beginne also an der Oberfläche und dem was man so direkt sieht und gehe dann immer weiter nach unten in den Code und das Backend. Heute ist das Thema die Geschwindigkeit meiner neuen Seite, denn die alte hatte diverse Fallstricke und Probleme. Diese waren mitunter so umfangreich das man tatsächlich spürbare Verlangsamung hatte und vor allem mit mobilen Geräten ist dies natürlich wirklich ein Problem. Um auf der neuen Seite solchen Problemen aus dem Weg zu gehen habe ich an diversen Schrauben gedreht und wenn man verschiedenen Analysetools glauben kann war ich erfolgreich. Dies könnt ihr im unteren Teil der News sehen, genau wie ein Überblick zu den kommenden Themen der Serie.
Es gibt diverse Tools zur Geschwindigkeitsanalyse aber ich möchte an dieser Stelle einfach mal nun die von Google PageSpeed Insights open_in_new darstellen, denn sonst wird es etwas zu viel. Im folgenden gibt es die Ergebnisse meiner Desktop Version.
open_in_newAuch wenn mein Code für die mobile Version identisch mit dem der Desktop Version ist, sind die Analyse Funktionen anders aufgebaut. Aus diesem Grund gibt es auch zwei Ergebnisse und das für die mobile Version gibt es nun:
open_in_newAuch wenn ich keine 100 Punkte erreiche bin ich sehr zufrieden, denn die alte Seite erreichte nur ca. 70 Punkte, wenn sie einen guten Tag hatte. Die restlichen Probleme basieren zum einen auf Dingen die sich nicht ändern lassen und zum anderen auf Dingen bei denen ich tatsächlich widersprechen muss. Aber wie auch immer die Seite ist gefühlt wie auch gemessen schneller. Erreicht habe ich dies wie erwähnt durch diverse Änderungen und davon werden unter anderem die folgenden in zukünftigen Beiträgen thematisiert:
- Code Minimierung
- Minimierung von HTTP Requests
- Bild Optimierung
- Korrekte Positionen für Skripte und CSS
- Caching von Daten
Da einige Teil kürzer und einige länger werden kann es vorkommen das zu bestimmten Themen auch mehrere News erscheinen. Wenn ihr Fragen oder Wünsche habt einfach direkt in den Kommentaren melden, dabei ist es egal ob es um Frontend, Backend, HTML, CSS, PHP oder z.B. die Server Konfiguration geht, ich werde versuchen euch weiter zu helfen.