Web-Site: Validierung und Performance

Der valide Aufbau und die Laufzeit-Optimierung von Web-Sites sind nicht ganz einfach, werden aber zunehmend wichtig – zumal Google mit verschiedenen Qualitäts-Offensiven in die richtige Richtung drängt.

Die durchaus wichtige Diskussion über fehlenden Datenschutz bei Google et al. sowie über Sinn und Unsinn „kostenloser“ Google-Dienste, deren Preis die eigenen Daten und die den „Blick über den Tellerrand“ verhindernde Gefangenschaft in der „Such-Bubble“ sind, soll hier nicht geführt werden.

Die Validierung des HTML-Codes erfolgt am besten mit dem Validator des W3C. Für die Überprüfung der Performance eignet sich das Chrome-Plugin PageSpeed Insights. Eine große Hilfe sind die Google Webmaster Tools.

Wir betrachten hier den Apache Web-Server und HTML5-Dokumente, also solche mit

<!DOCTYPE html>

Server

Kompression

Apache-Modul deflate aktivieren. In der VirtualHost-Konfiguration:

<ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css
  DeflateFilterNote Input input_info
  DeflateFilterNote Output output_info
  DeflateFilterNote Ratio ratio_info
  LogFormat '"%r" %{output_info}n/%{input_info}n (%{ratio_info}n%%)' deflate
  CustomLog /var/log/apache2/deflate.log deflate
</ifmodule>

Browser Caching

Apache-Module expires und headers aktivieren. In der VirtualHost-Konfiguration:

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault "access plus 1 day"
  ExpiresByType text/cache-manifest "access plus 0 seconds"
  ExpiresByType text/html "access plus 1 day"
  ExpiresByType text/xml "access plus 0 seconds"
  ExpiresByType application/xml "access plus 0 seconds"
  ExpiresByType image/x-icon "access plus 1 week"
  ExpiresByType image/gif "access plus 1 week"
  ExpiresByType image/png "access plus 1 week"
  ExpiresByType image/jpg "access plus 1 week"
  ExpiresByType image/jpeg "access plus 1 week"
  ExpiresByType text/css "access plus 1 week"
  ExpiresByType application/javascript "access plus 1 week"
  ExpiresByType text/javascript "access plus 1 week"
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

Kontrolle: Wir sehen beim Abruf per wget mit dem Parameter -S (Ausgabe der HTTP Header):

Cache-Control: max-age=86400, public
Expires: Thu, 22 Jan 2015 12:21:57 GMT

HTML Code

Wir setzen validen Code voraus. Zusätzlich empfiehlt sich

  • Größenangaben bei Fotos/Bildern (width, height)
  • Fehlende und gleiche title Tags in verschiedenen Dokumenten vermeiden (gleiches gilt für die meta tags description und keywords)
  • Bereitstellung einer Sitemap und Einreichung via Webmaster Tools
    Bei Nutzung von Sitemap-Generatoren, die das Dateisystem des Servers auswerten, auf richtige Ausschlusskriterien achten, damit keine Testverzeichnisse bei Google landen.

Social Media

Google Plus

Die Einbindung der API erfolgt asynchron. Würde man sie im HTML-Header einbinden, müsste sie geladen werden, bevor der Browser beginnt, die Inhalte zu rendern.

<script type="text/javascript">
  (function() { 
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s); 
  })();
</script>

Darstellung:

<div class="g-plusone" data-href="[URI]" data-size="medium" data-annotation="none" data-recommendations="true" data-align="left"></div>

Statt [URI] die eigene „Web-Adresse“ setzen, z.B. http://www.euc.de