Optimiert

Wie bereits im ersten Teil der Artikelserie geschildert, verbirgt sich hinter der Darstellung einer Webpräsenz auf dem Monitor ein komplexer Vorgang. Dazu gehört besonders die Anzeige von Abbildungen im Textfluss. Kennt die Render-Engine des Webbrowsers die Bildgröße bereits vorab, reserviert sie entsprechend Platz und fügt die mit Verzögerung nachgeladenen Bilddaten nach dem Transfer passend ins Layout ein.

Damit dies möglichst ohne Rechenaufwand und damit verbundenen Zeitverzug gelingt, benötigen die eingebundenen Bilder Alternativtexte (ALT-Attribut) sowie korrekte Größenangaben im IMG-Tag. Die Alternativtexte zeigt der Webbrowser während des Datentransfers im Platzhalter an, auch Blinde oder Fehlsichtige – und letzten Endes auch die Suchmaschinen – profitieren von guten Beschreibungen der Bilder. Besonders nachteilig wirkt sich in diesem Schritt eine Skalierung aus: Es ist Unsinn, großformatige Bilder samt des damit verbundenen Datenvolumens über die Leitung zu zerren, nur damit die Render-Engine sie wieder passend verkleinert.

Die Bildgröße beeinflusst auch die Verarbeitung im Browsercache. Von Vorteil sind Kantenlängen, die ein Vielfaches von 2 darstellen – also etwa 8, 16, 32, 64, 128, 256, 512 oder 1024 Pixel. Damit gehen die interne Verarbeitung und das Page-Alignment im Cache am effektivsten um.

Nachgeladen

HTML5 beinhaltet Funktionen, die Inhalte bereits laden, bevor der Besucher der Webseite sie explizit aufruft. Zum Einsatz kommt die Technik zum Beispiel bei Anrisstexten ("Teasern"), die auf weiterführende Inhalte verweisen, etwa den vollständigen Artikel. Diese Funktionen verwenden Nachrichtenportale gern auf der Titelseite; viele Content-Management-Systeme integrieren sie von Haus aus.

Aus technischer Sicht sind diese Inhalte explizit als nachladbar gekennzeichnet – HTML5 kennt dafür die Link-Attribute prefetch und prerender [30]. Während das erste nur die referenzierte Ressource nachlädt, bereitet das zweite zusätzlich die gesamte Seite im Hintergrund vor. Listing 2 zeigt zwei entsprechend ausgestaltete Links als Beispiel.

Listing 2

<link rel="prefetch" href="http://www.meineurl.de">
<link rel="prerender" href="http://www.andereseite.de">

Der Webbrowser des Benutzers lädt die Seite im Hintergrund und stellt sie dann ohne weitere Lade- oder Rechenzeiten sofort dar, sobald der Anwender den entsprechenden Link aufruft. Das reduziert die Ladezeiten und nutzt zudem die Netzwerkbandbreite besser aus, sorgt aber einerseits für zusätzliche Netzwerklast und andererseits für Einträge in den Browsercache – auch bei Seiten, die Sie tatsächlich niemals besucht haben.

Das Ganze funktioniert allerdings nur, wenn die entsprechende Option dazu auch im Webbrowser aktiviert ist. Firefox nutzt Prefetch in der Standardkonfiguration von Haus aus; bei Bedarf kontrollieren Sie die entsprechende Einstellung im Schlüssel network.prefetch-next unter about:config (Abbildung 4). Eine Option, die Funktion über den Konfigurationsdialog zu steuern, bietet Firefox nicht.

Abbildung 4: In Firefox lässt sich das sogenannte Prefetching, also das automatisierte Laden von Inhalten vor dem eigentlichen Abruf, über die internen Einstellungen abschalten.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • out of the box
    Unsicher, ob das HTML der eigenen Webseiten richtig ist? Hat der HTML-Export der Textverarbeitung oder der HTML-Editor Unfug produziert? Mit tidy räumen Sie auf.
  • Expressversand
    Durchdachte Einstellungen beim Webserver und kleine Tricks beim Optimieren machen lahmen Webseiten Beine.
  • Links auf Webseiten überprüfen mit Linkchecker
    Manche Domains sterben einen leisen Tod – zurück bleiben verwaiste Links, die dorthin zeigen. Mit Linkchecker identifizieren Sie solche Sackgassen in Ihrer Webpräsenz.
  • HTML-Editoren
    Der Weg zur eigenen Internetseite gerät ohne passendes Werkzeug recht steinig. Während Einsteiger ohne HTML-Kenntnisse nach einer komfortablen Layout-Hilfe verlangen, stoßen Kenner schnell an die Grenzen eines einfachen Texteditors. Für beide Welten stehen unter Linux gleich mehrere Programme bereit, die antreten das Designerleben zu erleichtern.
  • Interessante Tool für HTML5-Entwickler
    "HMTL5 rocks" – das findet nicht nur Google, und so gibt es bereits eine erkleckliche Anzahl von Ressourcen, Frameworks und Werkzeugen rund um den brandneuen Web-Standard.
Kommentare

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Broadcom Adapter 802.11n nachinstallieren
Thomas Mengel, 31.10.2017 20:06, 2 Antworten
Hallo, kann man nachträglich auf einer Liveversion, MX Linux auf einem USB-Stick, nachträglich...
RUN fsck Manually / Stromausfall
Arno Krug, 29.10.2017 12:51, 1 Antworten
Hallo, nach Absturz des Rechners aufgrund fehlendem Stroms startet Linux nicht mehr wie gewohn...
source.list öffnet sich nicht
sebastian reimann, 27.10.2017 09:32, 2 Antworten
hallo Zusammen Ich habe das problem Das ich meine source.list nicht öffnen kann weiß vlt jemman...
Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 6 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...