kinder im allgaeu logo desk

Optimierung der Seitenladezeit

Verbesserung des Google PageSpeed Wertes und Neu-Komprimierung der Bilder mit Google Guetzli und WebP
2017-06-20 16:00:00 /

Ladezeit verkürzen, vor allem auch bei schlechterem Mobilfunk-Empfang im Allgäuer Land war das Ziel.

Wenn man die Ladezeit verbessern will gibt es mehrere Baustellen. Zum einen muss der Aufbau der Seite schnell von statten gehen, zum anderen müssen sämtliche Bilder verkleinert werden.

Schnellerer Seiten-Aufbau

Da Thomas, der Erschaffer des CMS bee.tools, mit zu unserem Team gehört, verwenden wir natürlich bee.tools als System für die Webseite. Das hat den Vorteil, dass wir das System schnell an neue Anforderungen anpassen können. Mit mehreren Cache-Maßnahmen und einem internen Umzug bei unserem Provider, konnten wir die Aufbauzeit auf die Zeit von ca. 150ms verkürzen. Außerdem wurden alle Browser-Cache-Maßnahmen aktiviert, die wir von der Webserver-Seite aus aktivieren konnten. Wir nutzen seit kurzem zudem das neue, schnelle HTTP 2.0-Protokoll was weitere Ladezeitverbesserung brachte.

Warum dauert manchmal der Aufbau trotzdem länger? 
bee.tools baut den Cache der Seite erst beim erstmaligen Seitenaufruf auf. Sobald wir neue Daten hinzufügen, wird der Seiten-Cache geleert und muss neu erzeugt werden.

Optimierte Bildausgabe

Nachdem sämtliche Cache und Servermaßnahmen getroffen wurden, haben wir uns dem nächsten großen Thema zugewandt. Den Bildern. Eine Seite ohne Bilder mag für manche Seiten funktionieren, nicht für unsere Seite. Denn schließlich sagen Bilder mehr als 1000 Worte.

Wir haben bereits seit Anfang an weboptimierte Bilder verwendet. Dennoch waren die Bilder immer noch zu groß. Ein Tool, das einem hilft, ist Google PageSpeed. Das Tool sagt einem, ob Bilder weiter reduziert werden müssen. 

Bereits seit dem Umzug auf bee.tools haben wir TinyFy (TinyJPG und TinyPNG) zur verlustfreien Bildkomprimierung eingesetzt. Bis Anfang dieses Jahres hatte dies Google PageSpeed auch gereicht und war auch für uns akzeptabel. Nun hat Google Ende letzten Jahres Google Guetzli auf den Markt gebracht. Google Guetzli vermindert zwar die Bildqualität, aber reduziert auch die Bildgröße im Schnitt um 40-60%. Wird für den Google Chrome, Safari und Opera dann noch WebP verwendet, reduziert sich die Größe insgesamt im Schnitt sogar auf 80-90%. Durch die Veröffentlich von Google Guetzli wurden auch die PageSpeed-Werte angehoben und wir haben hier auf einmal durchweg sehr schlechte Werte erhalten.

Nach näherer Betrachtung der Werte war schnell klar, dass wir das Bild-Problem angehen mussten. Wir haben mit TinyFy Kontakt aufgenommen und auch andere Anbieter für Google Guetzli gesucht, jedoch hat keine Maßnahme zum Erfolg geführt. Schließlich hat sich brain at work (unser Sponsor) entschieden einen eigenen Google Guetzli und WebP-Konvertierungsdienst zu entwickeln. Nach 3wöchiger Entwicklungsphase konnte die Testphase beginnen und wir konnten unser Projekt als Testkandidaten verwenden.

Während der Testphase ist es leider immer wieder zu Ausfällen in der Bildanzeige gekommen. Wir entschuldigen uns für diese Unannehmlichkeit.

Als weiteren Schritt wurden sämtliche Bilder für die Ausgabe angepasst und für die ausgegebene Größe automatisch beschnitten. Dies musste ebenfalls erst in bee.tools entwickelt werden. Auch dies eine neue Anforderung von Google PageSpeed, die wir nun erfüllen.

Inzwischen konnten wir die Testphase abschließen und die Bilder komprimieren. Tatsächlich merkt man nur bei wenigen Bildern den Qualitätsverlust. Die komplette Seitenladezeit konnte aber von knapp 5 Sekunden auf 1 bis 1,5 Sekunden reduziert werden. Wir konnten nun auch diese Baustelle abschließen.

Verzicht auf Dritt-Anbieter-Software

Ein weiterer Punkt der uns Kopfzerbrechen bereitet waren Einbindungen von Dritt-Anbieter-Software, wie die Wetter-Darstellung von wetter.com. Diese Integration konnte nicht zwischengespeichert werden, da der Hersteller dies nicht unterstützte.

Um auch dieses Problem zu beheben, haben wir nun das Wetter-Plugin mit unserer neuen Wetterfunktion ersetzt.

Sag uns deine Meinung! (0)

Kommentar hinzufügen
Username:
Vielen Dank. Dein Kommentar wurde erfolgreich abgesendet und wird nach Überprüfung durch einen Moderator bald freigeschaltet.

Deine Bewertung: * * * * *

Kommentar absenden

Was kann man bei diesem Wetter im Allgäu noch unternehmen? (Schneefall bei 3°C)

Hohes Schloss
Dauerhaft geschlossen

Hohes Schloss

Das gotische Hohe Schloss der Bischöfe von Augsburg liegt auf einem Hügel über der Altstadt von Füssen. Das Burgschloss gilt als eine der am besten erhaltenen mittelalterlichen Burgen Bayerns. Das Hohe Schloss konnte seine spätgotische Baugestalt im Wesentlichen bis heute bewahren.

Das Hohe Schloss bildet zusammen mit dem tiefer liegenden Kloster St. Mang ein charakteristisches Ensemble über der Altstadt Füssens.

Das Burgschloss wurde zwischen den Jahren 1957/58 und 1966/67 renoviert. Später wurden die Illusionsmalereien aufgefrischt und einige Innenräume und die Kapelle saniert.

skywalk allgäu
Dauerhaft geschlossen

skywalk allgäu

Erleben Sie mit Ihrer Familie die Natur aus der Vogelperspektive auf dem Baumwipfelpfad des skywalk allgäu Naturerlebnisparks. Über die Treppe oder bequem mit dem Aufzug geht es bis zu 40 Meter Höhe auf einen 540 m langen Panorama-Rundpfad in der Höhe der Baumkronen. Genießen Sie hier eine unvergleichliche Aussicht auf den Bodensee, das Alpenvorland und die Alpen. Betrachten und erforschen Sie den Wald vom Boden bis in die Baumspitzen.

Inselsee Allgäu
Dauerhaft geschlossen

Inselsee Allgäu

Das Freizeit-Highlight zwischen Immenstadt und Blaichach bietet Spaß und Action für die ganze Familie. Mit zwei Badeseen, einer großen Liegewiese samt Kinderspielplatz und Beachvolleyballfeld, dem Café Inselsee sowie drei Wasserski- und Wakeboardanlagen mit Shop und der angesagten Bikini Bar ist hier für jeden die passende Freizeitbeschäftigung für einen unvergesslichen Tag am Wasser dabei.

Fun und Abwechslung pur. An den beiden Liften erlebst Du unvergessliche Tage auf und neben dem Wasser. Dabei spielt es keine Rolle, ob Du Anfänger oder Fortgeschrittener bist oder ob Du auf Wasserski, Monoski, Kneeboard, Wakeboard, Wakeski oder Wakeskate abfährst – Am Inselsee findet jeder seine persönliche Herausforderung.

Die verschiedenen Wassersportarten sind für Interessierte jeden Alters leicht zu erlernen. In speziellen Anfängerkursen erlernst Du die Grundkenntnisse des Wasserskifahrens oder des Wakeboardens unter professioneller Leitung von erfahrenen Coaches zügig und umfassend.

Illerparadies (ab 2019)
Dauerhaft geschlossen

Illerparadies (ab 2019)

Der kleine Freizeitpark Illerparadies in Lauben ist vor allem für Familien mit Kindern ein sehr beliebtes Ausflugsziel. Zahlreiche Tiere in Wildgehegen, verschiedene Fahrgeschäfte und ein gemütlicher Biergarten sorgen hier bei Groß und Klein für Spaß und Erholung.

Ein schattiger Biergarten lädt hier zum Genuss von erfrischenden Getränken und kleinen Snacks ein, und die herrliche Natur rund um die Freizeitanlage eignet sich hervorragend für kleine Wanderungen und Radtouren im Grünen.

Eine besondere Attraktion für Groß und Klein sind im Freizeitpark Illerparadies die Wildgehege, in denen sich verschiedene Tiere wie Rothirsche, Damwild, Ziegen und Minischweine aus nächster Nähe bestaunen lassen. Die Kinder können sich hier an einem Automaten Tierfutter holen und das Wild füttern – strahlende Kinderaugen und gelungene Urlaubsfotos sind dabei garantiert. Jede Menge Spaß versprechen den Kleinen auch die unterschiedlichen Fahrgeschäfte in der kleinen Freizeitanlage. So gibt es hier zum Beispiel Mini-Autoscooter, Kinderautobahn, Quadbahn, Mini-Boote und eine Western-Eisenbahn, die zu vergnüglichen Fahrten einladen. Älteren Kindern und Erwachsenen ist eine Runde im „Luna-Looping“ zu empfehlen. Natürlich können die Attraktionen hier nicht unbedingt mit denen großer und moderner Freizeitparks mithalten, aber im Illerparadies, das den nostalgischen Charme älterer Jahrmärkte versprüht, gibt es viel zu entdecken und Familien kommen hier sicher auf ihre Kosten.

Du bist hier: