Das PRPL Pattern
Was ist das PRPL-Pattern?
Das PRPL-Pattern ist ein theoretischer Ansatz zur Optimierung der Ladezeit von Websites/Progressive Web Apps.
Es ist eigentlich eine Auflistung von Techniken, die hier als Synonym für die Optimierung der Ladezeit verwendet werden. Diese stammen nicht unwesentlich aus der Entwicklung von PWAs (Progressive Web Apps)
Die Abkürzung steht für:
- P: Push/Preload
- R: Render
- P: Pre-cache
- L: Lazy-load
Preload/Push
Mit dem Preload-Link werden Ressourcen im Ladevorgang einer Website priorisiert.
<link rel="preload" as="style" href="assets/css/styles.css" />
Diese Technik wird hier als Synonym genannt um sichtbare Elemente möglichst schnell darzustellen und zur Verfügung zu stellen. Trotz korrekten Ansatzes ist diese Technik als Namensgebung laut der Meinung des Autors ungeeignet.
Die Push-Implementierung wird normalerweise dazu verwendet dem Client ohne vorangegangenem Request Inhalte zur Verfügung zu stellen. Diese ist als Synonym für das frühe Laden von Ressourcen einer Website laut Meinung des Autors gänzlich ungeeignet.
Render
Render steht für die möglichst zeitnahe Durchführung des kritischen Rendering-Pfads. Das bedeutet, die Inhalte Above the fold sollten so schnell wie möglich sichtbar sein.
Im PRPL-Pattern sind wieder Technik-Lösungen gemeint. Einerseits das Inlining von CSS und das asynchrone Laden von nicht unmittelbar benötigtem Javascript.
Bei der offiziellen Beschreibung des PRPL-Patterns wird auch das Pre-Rendering von HTML serverseitig angeführt. Dies zeigt wieder auf, dass das PRPL-Pattern eigentlich primär für Progressives Web Apps bzw. SPAs (Single Pages Applications) gedacht ist. Vor allem SPAs arbeiten bekanntlich mit Virtual DOM. PWAs nicht zwingend.
Pre-cache assets
Dieser Punkt meint den Einsatz von Service-Workern. Das Kernstück einer Progressive Web App. Sie fungieren als Cache-Proxy zwischen Client und Server. Wird eine Ressource vom Client angefragt, geht der Request zuerst zum Service-Worker. Ist die Ressource bereits vorhanden, so wird der Request nicht an den Server geschickt.
Für klassische Websites ist dieser Punkt gänzlich ungeeignet.
Lazy-Load
Lazy-loading bezeichnet das verzögerte Nachladen von nicht unmittelbar sichtbaren oder benötigten Elementen einer Website. Beispiele hierfür wären:
- Bilder
- iframes
- Javascript
Zusammenfassung und Kritik
Das PRPL-Pattern ist ein theoretisches Konstrukt zur Optimierung der Ladezeit von Progressive Web Apps und Websites. Es leitet sich aus der Entwicklung von Progressive Web Apps ab.
Service Worker und eine Push-Implementierung sind Hauptbestandteile von PWAs und nicht von Websites. Die offizielle Beschreibung des PRPL-Musters erwähnt zwar Push als Abkürzungs-Beschreibung, arbeitet allerdings dann nur Preload in der Beschreibung ab. Wieder eine Inkonsistenz die das PRPL-Pattern ad absurdum führt.
Auch wenn die Ansätze hinter dem Pattern korrekt sind, und z.B.: Lazy-Loading schon lange in Websites implementiert werden, ist das PRPL-Pattern als Ansatz gänzlich ungeeignet zur Optimierung WordPress-Websites beziehungsweise Websites generell. Streng genommen auch für PWAs und SPAs.
Es versucht moderne Technologien über User-Signale im Bezug auf die Ladezeit zu stülpen. Und vermischt gleichzeitig Websites, PWAs und SPAs. Ein gänzlich ungeeigneter Ansatz.
Quellen und weiterführende Links