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


HTML5 Please

Autor*in: Benjamin Hofmann


Technologie


Sehr praktisch um schnell nachschauen zu können, was geht und was man vermeiden sollte.


Beitrag lesen
24
JAN
12

Java-Orbit 2024

Autor*in: Tobias Pfannkuche


Technologie   //   Über den Tellerrand


Foto von Nicolas Gras auf Unsplash

Der Hype der vergangenen Jahre rund um AI lässt spürbar nach, die immer noch verhältnismässig junge Technologie hat den Einzug in den Alltag gerade auch in der Software-Entwicklung gefunden und steht nun vor der Herausforderung, sich zu bewähren. So wie davor zahlreiche andere technologische Entwicklungen und Veränderungen.


Beitrag lesen
18
NOV
24

Browser Diet

Autor*in: Benjamin Hofmann


Technologie


Eben bin ich über t3n auf eine interessante Website gestoßen: Browser Diet. Hier geht es darum, wie der Name bereits vermuten lässt, wie man Websites im Browser beschleunigen kann. Einiges davon machen wir bereits seit einiger Zeit, einiges nicht. Ein paar Beispiele dafür sind folgende Punkte: http://browserdiet.com/#cache-array-lengths Ein viel gemachter Fehler, auch in PHP, da …


Beitrag lesen
27
MRZ
13

HTML5 Polyfill

Autor*in: Sascha Nützel


Technologie


Nachdem das „required“- Attribut im Safari nicht funktioniert, bin ich auf die Suche nach einem Polyfill gegangen. Dabei bin ich auf folgende Bibliothek gestoßen: https://github.com/aFarkas/webshim Die Einbindung gestaltet sich recht simpel und wird hier https://github.com/aFarkas/webshim#installation-and-usage gut erklärt. Es besteht auch die Möglichkeit, nicht alle Module einzubinden sondern nur vereinzelt gebrauchte (z.B. ‚forms‘). Das Portalseitige Minify muss für …


Beitrag lesen
31
AUG
16