Eine Zeitungsseite im E-Paper ist ein großes Bild: 2.000 Pixel an der langen Seite, voller kleiner Schrift. Leser blättern durch zehn oder zwanzig davon, oft auf dem Handy mit wackliger Verbindung. Als wir Version 1.1 von Inkfold gebaut haben, unserer selbst gehosteten E-Paper-Plattform, haben wir als Erstes die Ladegeschwindigkeit der Seiten neu geschrieben.
Jede Seite dreimal speichern
Beim Hochladen wird jede Seite mit GD in drei Dateien umkodiert: die volle Seite, eine mittlere Fassung von etwa 1.100 Pixeln Breite und ein Vorschaubild für die Seitenleiste. Das Format wird einmal pro Server gewählt: WebP, wenn PHP es unterstützt, sonst JPEG. Bei unseren Testausgaben hat WebP das Seitengewicht bei gleicher Bildqualität um rund ein Drittel gesenkt, und auf einer Website mit vielen Seiten zählt das mehr als jede andere Optimierung.
Das Umkodieren entfernt außerdem alles, was niemand braucht, etwa eingebettete Farbprofile und Kameradaten, und legt Transparenz auf Weiß, damit ein PNG-Export aus dem Layoutprogramm nie einen schwarzen Hintergrund zeigt.
Zuerst die mittlere Größe, die volle nur bei Bedarf
Der Reader zeigt standardmäßig das mittlere Bild. In normaler Ansicht ist es vom Original nicht zu unterscheiden und wiegt nur einen Bruchteil. Zoomt der Leser hinein, vergleicht das Skript die angezeigte Breite, multipliziert mit dem Pixelverhältnis des Geräts, mit der natürlichen Breite des Bildes. Sobald die Seite deutlich größer dargestellt wird, als die mittlere Datei hergibt, lädt es im Hintergrund das volle Bild und tauscht es ein, sobald es da ist.
Wer nie zoomt, lädt die volle Seite nie herunter. Wer zoomt, bekommt eine scharfe Seite ohne Wartezeit, weil das mittlere Bild sichtbar bleibt, bis das größere bereit ist. Die nächsten Seiten der Ausgabe werden in mittlerer Größe vorgeladen, das Umblättern wirkt dadurch sofort.
Artikel einmal ausschneiden, dann zwischenspeichern
Jeder Artikelbereich lässt sich als eigenes Bild öffnen, für das Pop-up und zum Teilen. Früher wurden diese Ausschnitte bei jeder Anfrage erzeugt. Jetzt schneidet die erste Anfrage den Bereich aus und legt ihn auf dem Mediendatenträger ab, unter einem Namen mit einem Hash aus Bereich und Seitenbild. Ein neu gezeichneter Bereich oder eine ersetzte Seite erhält so automatisch eine neue Datei. Die Antworten tragen einen Cache-Header von einer Woche.
Medien auf jedem Datenträger oder hinter einem CDN
Jeder Dateizugriff läuft über eine Hilfsfunktion statt über eine fest verdrahtete lokale Platte. Mit INKFOLD_DISK=s3 wandern Seitenbilder, PDFs und Ausschnitte zu Amazon S3, Cloudflare R2 oder DigitalOcean Spaces. Wer die Dateien lieber lokal behält, leitet die Bild-URLs mit INKFOLD_MEDIA_URL über ein Pull-CDN wie Cloudflare oder Bunny mit der Website als Ursprung. Dateinamen behalten einen zufälligen Teil aus 20 Zeichen, damit Premiumseiten bei keinem Speicher erraten werden können.
Das Wichtigste
- Einmal beim Hochladen kodieren, in drei Größen, und WebP nutzen, wenn der Server es kann.
- Zuerst ein mittleres Bild zeigen; die volle Seite erst laden, wenn der Zoom den Unterschied sichtbar macht.
- Erzeugte Ausschnitte mit einem Schlüssel zwischenspeichern, der sich mit der Quelle ändert.
- Alle Dateizugriffe über eine Abstraktion führen, damit S3 oder ein CDN reine Konfiguration ist.
Als Nächstes in dieser Reihe: eine Doppelseitenansicht, die beide Seiten auf gleiche Höhe bringt. Alles hier Beschriebene können Sie in der Inkfold-Live-Demo ausprobieren, die Software selbst gibt es bei Charming Theme.
Sie veröffentlichen eine Zeitung oder ein Magazin online und kämpfen mit langsamen Seiten? Sprechen wir darüber — ArtinTech Solution entwickelt und optimiert genau diese Art von Publishing-Software.