Preload – was bringts?

Datum: 28. Februar 2017
Autor: Philip Dumas


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?

 

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Responsive Webdesign – Was hat das mit mir zu tun?

Autor: Axel Güldner


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


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18.
Januar
2012

Follow-up zu Vortrag beim imx.Camp – „Technologie-Umstellung bei Twitter“

Autor: Christian Göbel


Technologie


Wie mir gerade bewusst wird, muss ich eine Aussage aus meinem Vortrag beim imx.Camp korrigieren: Twitter ist nicht bei der US-Präsidentschaftswahl im Jahre 2008 in weiten Teilen von Ruby auf Scala (Java Virtual Machine) umgestiegen, sondern erst während der US-Wahlen im Jahre 2012. Wen’s interessiert, der kann die Hintergründe hier nachlesen: Twitter’s Shift from Ruby …


Beitrag lesen
22.
Oktober
2015

Photoshop-Ebenenstile als CSS3-Code exportieren

Autor: Michael Degener


Technologie // User Experience & Design


Ob Designer oder Entwickler, jeder der schon einmal eine Screen-Vorlage mit all seinen Ebenen mittels HTML und CSS zum Leben erwecken musste, hat sich insgeheim sicherlich schon einmal gewünscht, dass sich dabei manche Arbeitsschritte beschleunigen ließen. Wer kennt sie nicht, die allgegenwärtigen Buttons in Formularen, Teasern und Schnellsuchen. Von runden Ecken über Konturen und Schlagschatten …


Beitrag lesen
03.
August
2012

Datenimporte in die imx.Platform

Autor: Tobias Pfannkuche


Technologie


Aufgrund der kontinuierlich steigenden Anzahl externer Datenlieferanten bzw. der Anbindung von Schnittstellen im Rahmen von Datenimporten und damit verbundenen wiederkehrenden Fragen, hier eine Zusammenfassung der Kern-Anforderungen, um Daten von Drittanbietern in die imx.Platform zu übernehmen, sowie Grundfunktionalitäten für Datenimporte. Anforderungen Grundsätzlich sind folgende technischen Anforderungen einer Schnittstelle, die wir zwecks Datenübernahme/-import nutzen wollen, zu erfüllen: …


Beitrag lesen
10.
Nov.
2017