PhotoDeck im Vergleich zu Alternativen: Optimierung der Ladegeschwindigkeit

Dieser Beitrag, geschrieben von den Entwicklern der Software, auf der PhotoDeck basiert, ist ein bisschen nerdig. Aber er ist für einen wichtigen Zweck: die Beschleunigung Ihrer Website. Es geht um eine wichtige Verbesserung, die sie gerade vorgenommen haben, aber es ist vor allem eine Illustration unserer Philosophie und der Art von Arbeit, die PhotoDeck Websites schneller macht als andere.

JavaScript ist neben HTML und CSS ein wichtiger Bestandteil des Codes, aus dem Ihre Website besteht. Jedes Mal, wenn Sie eine Website im Internet aufrufen, laden Sie deren JavaScript Code. In manchen Fällen sogar eine ganze Menge davon.

Es ist also sehr wichtig, dass dieser Code schnell geladen wird. Es ist auch wichtig, dass er kompakt und gut designt ist, damit der Computer oder das Mobiltelefon des Betrachters ihn nicht nur laden, sondern auch so schnell wie möglich ausführen kann. Schlanker Code belastet das Gerät weniger und verbraucht weniger Energie, was sich auf die Akkulaufzeit und im Großen und Ganzen auch auf die Umwelt auswirkt.

Vor diesem Hintergrundhaben wir jetzt ein Projekt zur weiteren Optimierung des JavaScript Codes auf PhotoDeck Websites abgeschlossen. Das Wort „Optimierung” ist angesichts der Ergebnisse vielleicht etwas unpassend, aber darauf kommen wir gleich zurück.

(Wenn Sie es eilig haben, springen Sie zu den Hauptergebnissen )

Die meisten Websites verlassen sich auf Code-Bibliotheken von Drittanbietern. Sie bieten vorgefertigte Schlüsselfunktionen, so dass es für den Entwickler der Website einfacher ist, einfach einige dieser Blöcke zusammenzustellen und neuen Code hinzuzufügen.

Diese Code-Bibliotheken sind sehr praktisch, aber sie sind sehr umfangreich und verlangsamen daher eine Website. Außerdem entwickeln sie sich mit der Zeit weiter (u. a. zur Anpassung an neuere, schnellere Browser und aus Sicherheitsgründen), und die Entwickler von Websites müssen ihren eigenen Code immer wieder entsprechend aktualisieren. Diese Pflege ist so aufwändig, dass nur wenige sie gewissenhaft durchführen.

Wie so ziemlich jeder andere auch, verwenden wir seit unserem Start im Jahr 2010 externe Code-Bibliotheken. Im Gegensatz zu so ziemlich allen anderen haben wir alles auf dem neuesten Stand und sicher gehalten.

Aber wir sind immer auf der Suche nach Möglichkeiten, unsere Websites noch schneller zu machen - sie sind nicht ohne Grund die schnellsten unter den Alternativen.

Hier also die heutige Neuigkeit: Wir haben die Code-Bibliotheken von Drittanbietern abgeschafft und durch unseren eigenen optimierten Code ersetzt.

Die Ergebnisse im Vergleich zur Konkurrenz

Wir haben die Größe des JavaScript-Codes auf PhotoDeck Websites um 32 % reduziert. Der Code wird nicht nur deutlich schneller geladen, sondern ist durch die bessere Integration auch für die Browser viel leichter zu handhaben.

JavaScript auf einer PhotoDeck Website wiegt jetzt nur noch 48 KB. Das entspricht in etwa der Größe eines Thumbnails eines Fotos.

Vergleichen wir dazu eine einfache Kontaktseite auf einer PhotoDeck Website mit einer ähnlichen Seite auf den Websites von drei unserer Hauptwettbewerber. Bei diesen Alternativen zu PhotoDeck handelt es sich um bekannte US-amerikanische „Marktführer”, die Ihnen zweifellos bekannt sind.

• PhotoDeck: 48 KB
• Mitbewerber A: 650 KB, Code-Bibliotheken seit 2012 nicht mehr aktualisiert, mit 6 bekannten Sicherheitslücken
• Mitbewerber B: 470 KB, Code-Bibliotheken, die seit 2014 nicht mehr aktualisiert wurden, mit 5 bekannten Sicherheitslücken
• Mitbewerber C: 750 KB, Code-Bibliotheken seit 2014 nicht mehr aktualisiert
• Wir könnten noch viel mehr aufzählen…

Im Durchschnitt ist der JavaScript Code auf einer PhotoDeck Website zwölfmal leichter als bei diesem kleinen Satz.

Warum ist das wichtig?

Die Ladegeschwindigkeit ist eine sehr wichtige Sache, aber da wir nicht für Marketing-Bullsh*t sind, lassen Sie uns das klarstellen: Diese Optimierung wird Ihre Website beschleunigen, aber an sich keine Revolution für Ihre Kunden oder Ihr Google-Ranking darstellen (PhotoDeck-Websites waren auch vor dieser neuen Verbesserung außergewöhnlich schnell).

Doch im Großen und Ganzen steckt mehr dahinter.

Natürlich die Sicherheit. Mehr Code bedeutet mehr Sicherheitsrisiken.

Aber auch die Benutzererfahrung auf der Website. Die direkte Verwendung der neueren nativen Browsertechnologien anstelle von externen Code-Bibliotheken sorgt für eine reibungslosere und schnellere Ausführung.

Im Allgemeinen sind überladener und ungepflegter Code ein Zeichen für Nachlässigkeit und Anfälligkeit - einer Plattform als Ganzes.

Hier kommen wir auch wieder auf unsere Philosophie zurück: Wir mögen keine Verschwendung. Wir mögen es, wenn die Dinge sauber, schnell und robust sind und nicht mehr Ressourcen als nötig verbrauchen.

Lean ist schön, und es ist das Richtige zu tun!

Fußnote

Um die obigen Ergebnisse selbst zu überprüfen (oder eine andere Website zu vergleichen), öffnen Sie einfach die Entwickler-Tools in Ihrem Computer-Browser und klicken Sie unter dem Reiter Netzwerk auf den JS-Filter, aktivieren Sie das Häkchen, um den Cache zu deaktivieren, und klicken Sie dann auf Neu laden. Die Gesamtzahlen werden am unteren Rand des Fensters angezeigt. Wenn ein externes Captcha vorhanden ist, haben wir dessen Code aus Gründen der Fairness aus dem Vergleich ausgeschlossen, ebenso wie die Verfolgung durch Dritte. Bekannte Sicherheitslücken werden durch das Lighthouse-Tool in Chrome identifiziert.