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


Netbeans und GIT

Autor*in: Florian Müller


Technologie


Ich habe mich mal während der Arbeit mit Git mit den Git Hooks beschäftigt. Ziel war es, unnötige Builds in der Pipeline zu vermeiden, welche aufgrund von Lintern fehlschlagen. Dazu wollte ich einen Pre-Commit Hook einsetzen. Ein simpler Hook, welcher vor einem Commit ausgeführt werden sollte: Wenn man über die Command line commiten will, wird diese auch …


Beitrag lesen
21
APR
17

Apple Touch Icons nutzen

Autor*in: Bastian Schwarz


Projekte // Technologie // User Experience & Design


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen. Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das „Lesezeichen“ mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert. Generell sollten die …


Beitrag lesen
17
OKT
12

JavaScript Days Berlin und online 2022

Autor*in: Magdalena Piller


Technologie // Über den Tellerrand


Ein kurzes Wrap-Up meiner diesjährigen Teilnahme an den JS-und Angular-Days. Leider wurde in diesem Jahr die Konferenz nicht als volle „Hybrid“-Veranstaltung gehalten, so dass nur eine geringe Auswahl an Sessions online zur Verfügung standen. Sehr schade! Trotzdem fanden sich noch einige spannende Themen.


Beitrag lesen
07
NOV
22

GOTO Berlin 2017

Autor*in:


Technologie


Dari und ich durften vom 15. bis 17. November an der GOTO Konferenz in Berlin teilnehmen. TL;DR Bevor ich ein paar Insights zu den einzelnen Themen gebe, hier mein Fazit zur GOTO Berlin: eine Entwickler-Konferenz der Extraklasse! Internationale Top-Speaker und – mit dem BBC direkt am Alexanderplatz – eine ideale Location! Auch aus fachlicher Sicht kann …


Beitrag lesen
21
NOV
17