Diese Seite wurde von kurzem (also relativ zum Datum 6.5.2020) neu gestaltet. Um genauer zu sein, nicht nur neu gestaltet, sondern von Grund auf neu entwickelt. Alles, was übrig geblieben ist, ist der Inhalt, den ich erfolgreich migriert habe. Früher wurde diese Seite mit Wordpress betrieben, jetzt wird sie durch JigSaw generiert. Ich entschied mich für wechseln, da ich gerne etwas mit static site generators herumspielen wollte. Man kann mehr über den Wechsel und ihre Vor- und Nachteile in einem anderen Beitrag lesen.

In diesem Beitrag werde ich einen der Vorteile präsentieren: wie ich die Website signifikant schneller machen konnte, ohne dubiose WordPress-plugins.

Geschwindigkeit. Pure Geschwindigkeit.

Diese Seite ist statisch bedient, dh der gesamte Inhalt ist bereits in der endgültigen Form: HTML. Keine PHP Skripte in zwischen holen oder den Inhalt zu manipulieren. Ich begann aus der Jigsaw Blog-Vorlage, aber ich fand einige Verbesserungsmöglichkeiten. Sie werden im Folgenden aufgeführt.

Compile-Zeit-Code-Formatierung

Da die Seite statisch kompiliert wird, halte ich es für wichtig, wenn möglich schon bei der Kompilierung der Seite so viel Arbeit zu erledigen wie möglich. Ein Beispiel für eine Arbeit, die nicht clientseitig ausgeführt werden muss, ist beispielsweise die Code-Formatierung. Das Template kommt standardmässig mit highlight.js installiert. Der Ersatz zu Kompilierzeit für diese Funktion ist highlight.php zusammen mit einem passenden Jigsaw-Listener. Auf diese Weise müssen weniger Berechnungen clientseitige wiederholt werden und weniger JavaScript muss über das Netzwerk übertragen werden. Als kleiner Nachteil ist die resultierende HTML-Datei etwas größer, wenn es Code zu formatieren gab.

HTML Minifizierung

Eine weitere Verbesserung gegenüber der Vorlage ist die Verkleinerung des resultierenden HTML-Code: Eine zusätzliche blade directive wird verwendet, um alle unnötigen Leerzeichen aus dem post-kompilierte HTML zu entfernen. Auf diese Weise werden wertvolle Bytes gespart.

// blade.php
<?php

return [
  'spaceless' => function () {
    return '<?php ob_start() ?>';
  },
  'endspaceless' => function () {
    return "<?php echo preg_replace('/>\\s+</', '><', ob_get_clean()); ?>";
  }
];

Bildkomprimierung und Ändern der Größe

Um die Bilder in den Beiträgen zu erhalten, die schnell laden, ist es sinnvoll, sie auf die kleinstnötige Grösse zuzuschneiden, sowie die Datei zu komprimieren. Da ich nach Möglichkeit keine serverseitigen Skripts verwenden wollte, kann ich nicht einen dynamischen Resizer verwenden, der das Bild in der Pixel perfekte Größe zurückgeben könnte. Stattdessen muss ich mich auf das srcset img Attribut verlassen.

Um die Bilder zu den gewünschten Größen zuzuscheinen und zu komprimieren verwende ich ein eigenes Webpack Plugin.

Auf der anderen Seite, dass das srcset Attribut entsprechend gesetzt wird, habe ich ein blade template, das die nötige Arbeit übernimmt.

Client-Side Caching

Ein Service Worker, der von Googles Workbox generiert wird, versorgt den clientseitigen Cache dieser Website mit Inhalt. In der Datei webpack.mix.js sind geringfügige Konfigurationsänderungen erforderlich, damit Workbox funktioniert:

(...)
mix.webpackConfig({
    plugins: [
        build.images,
        build.jigsaw,
        build.watch([
            (...)
        ]),
        new CopyWebpackPlugin([
            { from: 'source/assets/build/images', to: 'images' }
        ]),
        new GenerateSW({
            clientsClaim: true,
            skipWaiting: true,
            swDest: '../../service-worker.js', // Need to move the service-worker to the root
        }),
    ]
});
(...)

InstantClick

Schliesslich wird InstantClick verwendet, um dem Client eine zusätzliche wahrgenommene Leistungssteigerung vorzutäuschen. Dies durch verfrühtes Laden der Ziele jeglicher Links: noch bevor Besuchende dieser Website fertig geklickt haben, beginnt das Skript, die Ziel-Seite zu laden, und schiebt sie danach unter.

Quellen

Inspiration für die serverseitige Code-Formatierung kam von Stefan Zweifel.

Foto von Christian Englmeier auf Unsplash.