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


Servus, Magazin gråd extra V!

Autor*in: Christine Pfleger


infomax   //   Strategie & Konzeption   //   Technologie   //   Tourismus   //   Über den Tellerrand   //   User Experience & Design


Magazin gråd extra | Ausgabe 5 | 2020
Magazin gråd extra | Ausgabe 5 | 2020

Die gerade erschienene fünfte Ausgabe unseres Magazins gråd extra befasst sich mit dem Schwerpunkt Renaissance. Und jeder Beitrag hat dabei seine ganz eigene Deutung.


Beitrag lesen
28
MAI
20

JavaScript, HTML5 & Angular Days 2016

Autor*in:


Technologie // Über den Tellerrand // User Experience & Design


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights: „Dem Benedikt seine Highlights“ CSS3 Flexbox Der Style „display: flex;“ ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, …


Beitrag lesen
28
NOV
16

Messung Dokumentgröße

Autor*in: Bastian Schwarz


Projekte // Technologie


Seit kurzem scheint die Anzeige der Dokumentgröße über die Web Developer Toolbar im Firefox nicht mehr korrekt zu funktionieren. Es wird häufig die Komprimierung von Scripten / Stylesheets nicht mehr korrekt erkannt.  Alternative Google Chrome – Developer Tools  Kurzanleitung Über Tools – Entwicklertools öffnen, auf „Network“ Tab wechseln, Seite mit Strg+F5 neuladen. Jetzt sieht man …


Beitrag lesen
16
APR
13

Flickr und das Image Plugin oder „Dees is sowieso blääd“

Autor*in: Bastian Schwarz


Technologie


Gerade habe ich ein Problem für unser Kundenprojekt „Holsteinische Schweiz“ analysiert: Im Keyvisual wurden bis zu 20 Flickr-Bilder geladen. Die URLs der Bilder wurden über die Flickr API geholt und dann durch das Image Plugin geladen, entsprechend gerechnet und abgelegt. So weit, so gut. Nun das Problem: Für den Dateinamenhash benutzt ajaxImage u.a. die Breite …


Beitrag lesen
21
SEP
11