Preload – was bringts?


Im Laufe der Umsetzung des Grassau-Portals habe ich mich mal mit Preloading im html auseinandergesetzt.

Benutzt wird das Ganze, um Resourcen wie z.B. Styles, Fonts etc. effizienter laden zu können und somit die Performance zu verbessern.

Der Vorteil gegenüber dem ja inzwischen schon etwas älteren Prefetching ist, dass im Tag ein Type angegeben wird, der es dem Browser erlaubt die Resourcen mit entsprechender Priorität zu laden.

Ein Preload Tag könnte beispielsweise folgendermaßen aussehen:

<link rel="preload" href="late_discovered_thing.js" as="script">

Die möglichen Tags können hier gefunden werden: https://fetch.spec.whatwg.org/#concept-request-destination , die wichtigsten sind aber wohl „font“ „script“ oder „document“.

Im Grassau-Portal werden bei Listen die erste Folgeseite via preload document vorgeladen, was eine deutliche Performanceverbesserung bei der Pagination verursacht.

Das Ganze ist allerdings mit Bedacht zu verwenden. Man muss immer daran denken, dass die Inhalte die man mit preload versieht eben auch dann geladen werden, wenn der User diesen Inhalt am Ende gar nicht benötigt (vor allem mobil kann das durchaus relevant sein!).

Genauere Informationen finden sich hier:

Preload: What Is It Good For?

 

Dieser Artikel wurde verschlagwortet unter:


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Templating with good ol‘ Javascript

Autor*in: Benjamin Hofmann


Technologie


Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann. Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner. Der Code Der komplette Code basiert auf RequireJS, kann aber natürlich …


Beitrag lesen
29
SEP
16

WJAX 2018 – Angular, Java 11 und ein wenig ML

Autor*in: Magdalena Piller


Technologie


Im November war ich mal wieder auf der WJAX und habe mir den „Angular-Day“ herausgesucht, also ein kompletter Tag rund um Angular. Aber auch ein paar andere Themen versprachen Interessantes. In der Keynote mit dem Titel „Trust and Confidence through Chaos“ präsentierte Russ Miles seine Variante des Chaos Engineerings ganz nach dem Motto „Umarme Deinen …


Beitrag lesen
28
DEZ
18

Google EAT

Autor*in: Hannes Heigenhauser


infomax // Strategie & Konzeption // Technologie


Alles neu mit Google EAT? Oder doch eher nur ein Hypethema? Wir erklären Ihnen, was sich hinter EAT verbirgt und worauf Sie achten müssen


Beitrag lesen
31
AUG
20

Microsoft Edge

Autor*in: Benjamin Hofmann


Technologie


Mit Windows 10 kommt Microsofts neuer Browser, sein Codename war bisher „Spartan“. Gestern hat Microsoft dem IE-Nachfolger nun einen richtigen Namen gegeben: Microsoft Edge. Neben der Integration von Cortana gibt es die Möglichkeit, Dinge auf Websites zu markieren, zu beschriften und dann direkt mit anderen zu teilen. Interessant ist ebenfalls, dass Microsoft es erlaub Erweiterungen …


Beitrag lesen
30
APR
15