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


Unsere Ausbildungszeit bei infomax

Autor*innen: Verena Schmuck, David Kelemen, Phil Jope


infomax   //   Technologie   //   Über den Tellerrand


Phil Jope und David Kelemen, haben 2022 ihre Ausbildung zum Fachinformatiker für Anwendungsentwicklung begonnen und dieses Jahr erfolgreich abgeschlossen. In diesem Beitrag geben sie Einblicke in ihre Ausbildungszeit bei infomax, erzählen von Herausforderungen und Lieblingsmomenten, und teilen Tipps für zukünftige Azubis.


Beitrag lesen
25
AUG
25

JIT Grunt

Autor*in: Florian Müller


Technologie


Dieser Beitrag nimmt Bezug auf meinen vorherigen Beitrag zur Optimierung von Grunt. Wer diesen nicht kennt, wird mit diesem hier nicht viel anfangen können. Wer den Concurrent Task und dazu auch den Time-Grunt einsetzt, mag schon mal bemerkt haben, dass bei jedem Concurrent Task sämtliche Tasks geladen. Auf dem DEV dauert dies auch mal gerne 2 …


Beitrag lesen
08
FEB
17

ModPagespeed & Kommentare in CSS

Autor*in: Sascha Nützel


Technologie


Beim gestrigen Tirol Deployment kam es zu interessanten Fehlermeldungen beim CSS Minify über ModPagespeed (Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING im Chrome bzw. 404 in FF/IE). Grund war eine Kommentierung im CSS mittels „//“, bitte verwendet daher im CSS „/* mein lustiger Kommentar */“.  


Beitrag lesen
26
AUG
16

Embedded JavaScript

Autor*in: Benjamin Hofmann


Technologie


Dank Christian Heindl bin ich auf EJS aufmerksam geworden, einer Template-Engine für Javascript, die Smarty gar nicht so unähnlich ist. Damit ist es ein leichtes HTML in Javascript zu bauen und auch wiederzuverwenden. Aktuell habe ich das in der Karte von NÖW so eingebaut, wo unter anderem die Infowindows durch diese Logik generiert werden. Das Schöne …


Beitrag lesen
07
NOV
14