Ein REDAXO-Addon, das durch Prefetching und Preloading die Ladedauer für Website-Besuchende verbessert

Related tags

Miscellaneous redaxo redaxo-addon
Overview

SPEED_UP für REDAXO 5

Ein REDAXO-Addon, das durch Prefetching und Preloading von Artikeln und Kategorien die wahrgenommene Ladezeit ausgewählter Seiten für Website-Besuchende auf wenige Millisekunden reduziert.

Hinweis: Ja, Millisekunden.

Use Case: Dein Kunde hat von seinem selbst ernannten SEO-Experten gehört, wie toll WordPress ist. Bring den SEO-Experten mit der Instllation dieses Addons und der anschließenden Demonstration der Ladezeit ins Schwitzen. Zwinker. Rechne das ganze teuer als Ladezeit-Optimierung ab und spende dem Addon-Entickler einen Teil vom Kuchen. Zwinker-Zwinker.

Wichtig: Dieses Addon hat Auswirkungen darauf, wie Browser nicht nur die aktuelle Seite, sondern auch andere Seiten vorladen und zwischenspeichern. Bitte lies dir aufmerksam durch, welche manuellen Schritte ggf. durch den REDAXO-Entwickler oder Redakteur zu ergreifen sind.

Wichtig Verwende dieses Addon nicht, wenn du serverseitiges Tracking verwendest, bspw. zur Besuchszahlenmessung. Jedes per Preload/Prefetch geladene Dokument führt dazu, das Tracking zu verfälschen, weil der Server annimmt, die Seite wäre tatsächlich aufgerufen worden. Verwende stattdessen clientseitiges Tracking oder eine Technik, die außerhalb des REDAXO-Artikels bzw. REDAXO-Templates funktioniert, z.B. über die REX_API.

Features

  • Einfach: In unter 5 Minuten installiert und eingerichtet
  • Flexibel: 4 verschiedene Konfigurationsprofile passend zu deinem REDAXO-Projekt, Extension Point zur händischen Optimierung.
  • Sinnvoll: Entferne einzelne Artikel aus dem automatischen Prefetching, wenn diese dynamische Inhalte darstellen.
  • Kompatibel Automatische Konfiguration für Instllationen, die das Addon YCom verwenden (beta)
  • Kompatibel Automatische Konfiguration für Instllationen, die das Addon URL verwenden (geplant)

Steuere eigene Verbesserungen dem GitHub-Repository von speed_up bei. Oder unterstütze dieses Addon: Mit einer Spende oder Beauftragung unterstützt du die Weiterentwicklung dieses AddOns. Es gibt noch weitere Ideen, deine Website zu beschleunigen.

Installation

Voraussetzung: YRewrite muss installiert und aktiviert sein.

  1. Im REDAXO-Installer das Addon speed_up herunterladen und installieren. Anschließend erscheint unter System ein neuer Menüpunkt Speed Up.

  2. Wähle bei Bedarf das gewünschte Konfigurationsprofil.

  3. Bei der Installation wurde ein Artikel-Metainfo-Feld speed_up angelegt. Deaktiviere die Einstellung fürs Prefetching an jedem Artikel, in dem dynamische Inhalte dargestellt werden (z.B. Aufruf mit Get-Parameter, Formulare und deren Zielseiten). Diese willst du schließlich nicht prefetchen. Nein, willst du wirklich nicht.

  4. Füge im <head>-Bereich deiner Templates möglichst weit oben $speed_up = new speed_up(); $speed_up->show(); ein, um eine Liste von <link>-Attributen auszugeben.

Das war's erstmal.

Ob alles funktioniert, erkennst du mit einem Blick in den Netzwerk-Reiter deiner Browser-Entwicklertools und dem Gefühl, du würdest die angeklickte Seite gerade mit Glasfaser ansurfen und nicht mit deiner DSL 6.000-Leitung, die dir dein Provider maximal zur Verfügung stellen konnte. ;)

Einstellungen

Profil

Es gibt mehrere Profile zur Auswahl. Standardmäßig wird das Profil auto verwendet. In jedem Fall wird anhand des aktuell aufgerufenen REDAXO-Artikels ermittelt, welche Seiten als nächstes aufgerufen werden könnten.

  • disabled: Das Addon erzeugt keine Ausgabe
  • custom (für Experten): Nur die in den Einstellungen hinzufgefügten Codes sowie über den EP veränderten URLs werden berücksichtigt.
  • auto (empfohlen): Die Startseite, sowie sofern vorhanden:
    • Die beiden Nachbar-Kategorien der aktuellen Kategorie.
    • Die beiden Nachbar-Artikel des aktuellen Artikels.
    • Die erste Kind-Kategorie der aktuellen Kategorie.
  • agressive (Empfohlen nur zu Demonstrations- und Testzwecken): Die Startseite, sowie sofern vorhanden:
    • Alle Nachbar-Kategorien der aktuellen Kategorie.
    • Alle Nachbar-Artikel des aktuellen Artikels (bei Kategorien: Alle Artikel in der Kategorie).
    • Alle Kind-Kategorien der aktuellen Kategorie.

Tipp: Verwende den Extension Point PREFETCH_URLS, um ein Array mit den URLs zu erhalten, die das Addon auf dieser Seite ausgeben wird. Ergänze oder ersetze dieses Array, wenn du mit ziemlicher Sicherheit weißt, welche Seiten als nächstes aufgerufen werden könnten - z.B. bei einer Call-To-Action, eigenen URL-Profilen oder den ersten Elementen einer Liste.

Zusätzliches Preloading

Zusätzliche hartkodierte Links zu Dateien, die auf jeder Seite sofort geladen werden sollen, z.B. CSS, JS, Webfonts.

Zusätzliches Prefetching

Zusätzliche hartkodierte Links zu Dateien, die auf jeder Seite früh vorausgeladen werden sollen.

Fragen und Wissenswertes

Wie funktioniert prefetching?

Der Browser entscheidet, ...

  1. ...anhand der ihm zur Verfügung gestellten <link>-Tags im <head> deiner Webseite und
  2. der Information darüber, ob man sich in einem schnellen/langsamen oder getakteten/ungetakteten Internet befindet,...

... ob er ein oder mehrere Dokumente und Ressourcen laden soll, noch bevor der Nutzer diese bspw. über einen Link klickt aufrufen möchte.

Erfahre mehr über das Prinzip unter

Was ist der Unterschied zwischen prefetching und preloading?

Preloading ist, wenn der Browser ganz zwingend ganz früh wissen sollte, welche Ressourcen (JS, CSS, Webfonts, weitere Medien) für den aktuellen Seitenaufruf benötigt werden.

Prefetching ist, wenn der Browser erfahren soll, welche Ressourcen bei der vermutlich nächsten Interaktion benötigt werden, z.B. eine Webseite (Dokument) oder andere Ressourcen.

Warum beeinflusst das Prefetching nicht meinen Google Page Speed Score?

Beim Prefetching werden Dokumente angefordert und vorgehalten, obwohl der Website-Besuchende diese noch nicht angefordert hat. Die tatsächliche Ladezeit der Dokumente, vom Zeitpunkt des Anforderns bis zur vollständigen Serverantwort bleiben hiervon unberührt. Ebenso nicht optimierter Programm-Code, Datenbank-Tabellen und Abfragen, HTML-Code oder Servereinstellungen/Performance. Hier geht es ausschließlich, um die Usability und die wahrgenommene Ladezeit.

Wenn du stattdessen wissen möchtest, wie du auf deiner REDAXO-Website einen Page Speed Score von bis 100 Punkten erreichen kannst, nimm Kontakt mit diesem Addon-Entwickler auf.

Lizenz

MIT Lizenz, siehe LICENSE.md

Autoren

Alexander Walther
https://www.alexplus.de https://github.com/alexplusde

Projekt-Lead
Alexander Walther

You might also like...
Activity Log für REDAXO 5
Activity Log für REDAXO 5

Activity Log für REDAXO 5 Eine einfache Möglichkeit um Aktivitäten zu loggen. Die Logs werden im System unter Activity Log angezeigt. rex_activity::me

Friends Of REDAXO 6 May 4, 2022
Automatische Updates für REDAXO Core und Addons

Automatische Updates für REDAXO 5 Lädt täglich automatisch neue Updates aus dem REDAXO-Installer herunter Features Prüft und installiert täglich Updat

alex+ Informationsdesign 3 May 26, 2022
Anmelden ohne Passwort für REDAXO 5

Anmelden ohne Passwort für REDAXO 5 Dieses Addon ermöglicht, sich ohne Passwort in REDAXO einzuloggen. Dazu wird beim Login die Mail-Adresse eingegebe

Thorben 5 Jul 23, 2022
Redaxo 5-Addon zum gruppieren beliebiger Inhaltsmodule (Blöcke) innerhalb eines Spaltenrasters mit selbst definierten Templates.
Redaxo 5-Addon zum gruppieren beliebiger Inhaltsmodule (Blöcke) innerhalb eines Spaltenrasters mit selbst definierten Templates.

Gridblock Redaxo 5-Addon zum gruppieren beliebiger Inhaltsmodule (Blöcke) innerhalb eines Spaltenrasters. Die Inhaltsmodule entsprechen dabei den übli

Falko Müller 13 Jun 27, 2022
REDAXO-Addon: yform UI 🔧
REDAXO-Addon: yform UI 🔧

REDAXO-Addon: yform UI Dieses Addon bietet eine einfache Möglichkeit yform-Felder mit einer Breite zu speichern. Dadurch spart man sich Zeit beim erst

Friends Of REDAXO 15 Sep 12, 2022
REDAXO-Addon mit nützlichen Methoden im Umgang mit dem Picture-Element, Responsive Bilder, SVG-Ausgabe, u.v.m.

REDAXO-Addon mit nützlichen Methoden im Umgang mit dem Picture-Element, Responsive Bilder, SVG-Ausgabe, u.v.m.

alex+ Informationsdesign 8 Dec 15, 2022
REDAXO-Addon mit nützlichen Methoden im Umgang mit dem Picture-Element, Responsive Bilder, SVG-Ausgabe, u.v.m.
REDAXO-Addon mit nützlichen Methoden im Umgang mit dem Picture-Element, Responsive Bilder, SVG-Ausgabe, u.v.m.

REDAXO-Addon mit nützlichen Methoden im Umgang mit dem Picture-Element, Responsive Bilder, SVG-Ausgabe, u.v.m.

alex+ Informationsdesign 8 Dec 15, 2022
Planner semanal simples e intuitivo para melhor organização das tarefas semanais.

Planner semanal simples e intuitivo para melhor organização das tarefas semanais. Simple and intuitive weekly planner for better organization of your tasks.

Beatriz Vidal 2 May 29, 2022
Diese Demo demonstriert den Aufbau einer REDAXO Website mit UIKit3

UIKit3 Demo für REDAXO 5 Diese Demo demonstriert den Aufbau einer REDAXO Website mit UIKit3. Diese Demo benötigt eine utf8m4 kompatible Datanbank. Hin

Friends Of REDAXO 19 Jan 6, 2023
Comments
Releases(1.3.1)

  • 1.3.1(Sep 19, 2022)

    What's Changed

    • fix BC method by @alxndr-w in https://github.com/alexplusde/speed_up/pull/22

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.3.0...1.3.1

    Source code(tar.gz)
    Source code(zip)

  • 1.3.0(Sep 15, 2022)

    What's Changed

    • SPEED_UP REDAXO_VARs by @alxndr-w in https://github.com/alexplusde/speed_up/pull/15
    • Update rex_var_speed_up.php by @alxndr-w in https://github.com/alexplusde/speed_up/pull/16
    • Update README.md by @alxndr-w in https://github.com/alexplusde/speed_up/pull/17
    • add as attribute for media files by @alxndr-w in https://github.com/alexplusde/speed_up/pull/18
    • Fix rexvar by @alxndr-w in https://github.com/alexplusde/speed_up/pull/19

    REX_VAR_SPEED_UP[] und REX_VAR_SPEED_UP_ASSETS[file="project.js"] sind nun möglich und können auf Herz und Nieren getestet werden. Feedback willkommen!

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.2.3...1.3.0

    Source code(tar.gz)
    Source code(zip)

  • 1.3.0-dev(Aug 16, 2022)

    What's Changed

    • REDAXO_VARs by @alxndr-w in https://github.com/alexplusde/speed_up/pull/15

    REX_VAR_SPEED_UP[] und REX_VAR_SPEED_UP_ASSETS[file="project.js"] sind nun möglich und können auf Herz und Nieren getestet werden. Feedback willkommen!

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.2.3...1.3.0-dev

    Source code(tar.gz)
    Source code(zip)

  • 1.2.3(Jul 31, 2022)

    What's Changed

    • ignore filemtime(): stat failed by @alxndr-w in https://github.com/alexplusde/speed_up/pull/13

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.2.0...1.2.3

    Live-Docs: https://github.com/alexplusde/speed_up/blob/main/README.md

    Source code(tar.gz)
    Source code(zip)

  • 1.2.0(Jul 13, 2022)

    • Neu: Optionales Cache-Busting für Projektdateien (CSS, JS, Webfonts) mit der Methode speed_up_assets::getUrl($file) für eine Verkürzung der Gesamt-Ladezeit beim Seitenwechsel. Erfordert ein manuelles Anpassen von Template und ´.htaccess`-Datei.

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.1.5...1.2.0

    Live-Docs: https://github.com/alexplusde/speed_up/blob/main/README.md

    Source code(tar.gz)
    Source code(zip)

  • 1.1.5(May 23, 2022)

  • 1.1.4(May 10, 2022)

    Behebt den Fehler, dass im Installer eine neue Version angezeigt wird, obwohl man die aktuelle installiert hat.

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.1.3...1.1.4

    Source code(tar.gz)
    Source code(zip)

  • 1.1.3(Apr 20, 2022)

  • 1.1.2(Apr 18, 2022)

    • Code zum Preloading von Medien verbessert, type wird jetzt am Medium mit ausgegeben, URL im Frontend wurde korrigiert

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.1.1...1.1.2

    Source code(tar.gz)
    Source code(zip)

  • 1.1.1(Apr 6, 2022)

    What's Changed

    • Meta-Infos Abhängigkeit in package.yml definiert, um Whooops im Setup zu vermeiden
    • Einstellung zur Verfügung stellen by @alxndr-w in https://github.com/alexplusde/speed_up/pull/7
    • Update README.md by @tyrant88 in https://github.com/alexplusde/speed_up/pull/10

    New Contributors

    • @tyrant88 made their first contribution in https://github.com/alexplusde/speed_up/pull/10

    Full Changelog: https://github.com/alexplusde/speed_up/compare/1.0.5...1.1.1

    Source code(tar.gz)
    Source code(zip)

  • 1.0.5(Mar 23, 2022)

    1.0.5 [23.03.2022]

    Erster Release dieses Addons.

    Changelog

    Version 1.0.5 behebt einen Fehler, wenn es keine YRewrite-Kategorie in der Struktur gibt.

    Installationshinweise

    Voraussetzung: YRewrite muss installiert und aktiviert sein.

    1. Im REDAXO-Installer das Addon speed_up herunterladen und installieren. Anschließend erscheint unter System ein neuer Menüpunkt Speed Up.

    2. Wähle bei Bedarf das gewünschte Konfigurationsprofil.

    3. Bei der Installation wurde ein Artikel-Metainfo-Feld speed_up angelegt. Deaktiviere die Einstellung fürs Prefetching an jedem Artikel, in dem dynamische Inhalte dargestellt werden (z.B. Aufruf mit Get-Parameter, Formulare und deren Zielseiten). Diese willst du schließlich nicht prefetchen. Nein, willst du wirklich nicht.

    4. Füge im <head>-Bereich deiner Templates möglichst weit oben $speed_up = new speed_up(); $speed_up->show(); ein, um eine Liste von <link>-Attributen auszugeben.

    Das war's erstmal.

    Ob alles funktioniert, erkennst du mit einem Blick in den Netzwerk-Reiter deiner Browser-Entwicklertools und dem Gefühl, du würdest die angeklickte Seite gerade mit Glasfaser ansurfen und nicht mit deiner DSL 6.000-Leitung, die dir dein Provider maximal zur Verfügung stellen konnte. ;)

    Weitere Infos

    Zum Repository auf GitHub wechseln

    Source code(tar.gz)
    Source code(zip)
Owner
alex+ Informationsdesign
alex+ Informationsdesign
GitHub
Ein einfacher Seeder mit "Migration" für YForm 4 - REDAXO 5

YForm Datenbank "Migration"/Seeder Über die Addon-Einstellung lassen sich Templates mit einem Tabellen Namen für YForm Tabellen erstellen. Über diese

Thorben 4 May 9, 2022
Unterschiedliche Versand-Profile für den PHPMailer in REDAXO (REXMailer) für unterschiedliche Absende-Adressen und/oder SMTP-Postfächer

Mailer Profile für REDAXO 5 Erweitert das Core-Addon phpmailer um die Möglichkeit, unterschiedliche Absende-Profile und Postfächer-Konfigurationen vor

alex+ Informationsdesign 7 Dec 22, 2022
Collect - REDAXO-Addon für APIs und Feeds auf Basis von YForm

Collect sammelt anhand unterschiedlicher APIs und Schnittstellen in regelmäßigen Abständen Social Media Posts, RSS-Einträge, Videos und Playlists und andere Inhalte.

alex+ Informationsdesign 5 Jun 23, 2022
REDAXO Addon für Sachspenden

REDAXO-AddOn: Sachspende Was es macht Mit dem AddOn kann man eine Spendenliste einrichten. Der Besucher der Website kann sich dann aus einem Formular

Wolfgang Bund 5 Sep 9, 2022
REDAXO 5 Addon für Metainfos an YRewrite-Domains auf Basis von YForm.

Meta-Infos für YRewrite Domains auf Basis von YForm 4 Ergänzt YRewrite um die Möglichkeit, Metainformationen an Domains zu verwalten. Mit vorgefertigt

alex+ Informationsdesign 9 Sep 19, 2022
Helfer-Addon um Inhalte für REDAXO 5 zu erstellen

Helfer-Addon um Inhalte für REDAXO 5 zu erstellen Über das Addon content lassen sich Inhalte für eine REDAXO-Instanz einfach und schnell programmatisc

Friends Of REDAXO 8 Dec 18, 2022
Helfer-Addon um Inhalte für REDAXO 5 zu erstellen

Helfer-Addon um Inhalte für REDAXO 5 zu erstellen Über das Addon content lassen sich Inhalte für eine REDAXO-Instanz einfach und schnell programmatisc

Friends Of REDAXO 6 Oct 25, 2022
SliceColumns is a REDAXO AddOn. Grid arrangement for REDAXO article slices.

REDAXO-AddOn: SliceColumns Das REDAXO-AddOn erlaubt die Anordnung der Slices in Spalten und das Verschieben von Blöcken per Drag & Drop. Screenshot mi

Friends Of REDAXO 20 Sep 12, 2022
Unterstützung bei der DSGVO-konformen Umsetzung von ein oder mehreren REDAXO-Websites, indem Logs und Daten nach festgelegten Regeln gelöscht werden.

Auto-Delete-Addon für REDAXO 5.x Löscht alte Logs und Datensätze via Cronjob. Features YForm-Feld datestamp_auto_delete Ein Feld für YForm, das wie da

alex+ Informationsdesign 4 May 18, 2022
Activity Log für REDAXO 5

Activity Log für REDAXO 5 Eine einfache Möglichkeit um Aktivitäten zu loggen. Die Logs werden im System unter Activity Log angezeigt. rex_activity::me

Thorben 0 Dec 22, 2022