BOOST FOR WEBSITES

Verschiedene Tipps & Tricks für bessere Ladezeiten!

Wer eine Webseite ins Internet stellt, wird früher oder später mit Ladezeiten-Optimierung konfrontiert. Denn: eine schnellere Website ist aus Nutzersicht immer besser, niemand will lange auf die gewünschten Inhalte warten. Dies gilt bei einem privaten Blog genauso wie bei einem professionellen Shop.

Diese Seite soll Anregungen und Ansätze zeigen, mit denen man die Ladezeite einer Seite und die „gefühlte“ Geschwindigkeit verbessern kann. Alle hier gezeigten Anregungen werden auch auf dieser Seite verwendet - jeder kann sich somit selbst ein Bild davon machen, wie der Effekt ist.

HTTP 2

HTTP/2

Bisher werden die meisten Webseiten mittels des Prokolls HTTP/1.1 ausgeliefert. Dieses wurde Ende 2015 vom neueren Standard HTTP/2 abgelöst, welcher verschiedene Vorteile bringt:

  • Zusammenfassen mehrere Anfragen
  • Verbesserte und weitergehende Möglichkeiten zur Datenkompression
  • binär kodierte Übertragung von Inhalten
  • vom Server gestartete Datenübertragung (push)
  • Verwendung von SSL/HTTPS

Vorraussetzungen für den Einsatz von HTTP/2 sind sowohl ein kompatibler Webserver (z.B. Nginx) als auch ein passender Browser. Für Nutzer ist es einfacher: die meisten Browser unterstützten HTTP/2 bereits, sodass die Vorteile genutzt werden können, sobald die Webseite entsprechenden Support bietet.

Boost-for-Websites.de verwendet natürlich bereits das neue Protokoll.

NGINX

NGINX

Jede Webseite muss von einem Webserver aufgeliefert werden - Nginx ist dabei eine Alternative zum bekannteren Server der Apache Foundation. Nginx wird stark weiterentwickelt und erhält ca. einmal die Woche updates. Dafür gab es relativ früh Support für HTTP/2.

NGINX Kompilieren und Installieren (Debian / Ubuntu)

Um Nginx auf einer aktuellen Debian-Installation zu verwenden, sollte man nicht auf die zum Teil veraltenen Pakete der Distribution setzen, sondern Nginx selbst kompilieren. Dafür sind nur wenige Schritte nötig:

Build-Essentials installieren

1
2
apt-get install build-essential
apt-get install libpcre3 libpcre3-dev libpcrecpp0 libssl-dev zlib1g-dev

Nginx installieren

Da in diesem Setup die selben Einstellungen verwendet werden, wie in der Standard-Debian-Umgebung, ist es das einfachste, zuerst einmal Nginx über die Paket-Verwaltung zu installieren. Dadurch werden alle Verzeichnisse, Start-Scripte, Abhängigkeiten etc. installiert:

1
sudo apt-get install nginx

Nginx herunterladen

1
2
3
mkdir nginx_temp && cd nginx_temp
wget http://nginx.org/download/nginx-1.9.15.tar.gz
tar xvfz nginx-1.9.15.tar.gz && cd nginx-1.9.15

Nginx konfigurieren

1
./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_v2_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-http_auth_request_module --with-mail --with-mail_ssl_module --with-file-aio --with-cc-opt='-g -O2 -fstack-protector --param=ssp-buffer-size=4 -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-z,relro -Wl,--as-needed' --with-ipv6

Nginx kann mittels verschiedener Mobule erweitert werden, z.B. mittels ngx_pagespeed. Dafür muss für das jeweilige Module die Nginx-Konfiguration erweitertet werden: --add-module=/pfad/zum/module.

PAGESPEED

PAGESPEED

Google ist ein großer Verfechter schneller Websites. Dadurch ist der Optimierungs-Grad auch für das Ranking in der wahrscheinlich beliebtesten Suchmaschine wichtig. Um es den Webseiten-Betreibern einfacher zu machen, bietet Google mittels der Pagespeed Insights Website einen simplen Weg, die eigene Webseite zu überprüfen.

PREFETCH & PRECONNECT

DNS-Anfragen sind gerade beim Einbinden externer Scripte durchaus ein Faktor, der sich auf die Performance auswirken kann. Mittels „Prefetch“ und „Preconnect“ kann man diese nötigen Anfragen bereits direkt nach dem Laden des Headers ausführen, sodass später, wenn die entsprechenden Scripte wie Jquery benötigt werden kein DNS-Request mehr nötig ist. Hier lassen sich die letzten Millisekunden an Ladezeit herausholen.

  1. DNS-Prefetch:
    Wie der Name sagt, wird so die DNS-Auflösung für den externen Host vorab aufgelöst.
    1
    2
    3
    <head>
        <link rel="dns-prefetch" href="//ajax.googleapis.com">
    </head>
    
  2. Preconnect:
    Preconnect löst nicht nur den Domain-Namen zur IP-Adresse auf, sondern stellt auch bereits eine Verbindung her. Damit wird auch bereits der SSL-Handshake ausgeführt, sodass später direkt Daten übertragen werden können.
    1
    2
    3
    <head>
        <link rel="preconnect" href="https://ajax.googleapis.com">
    </head>
    

ASYNC CSS LOADING

Das Google Pagespeed-Tool beschwert sich oft über blockierendes CSS - da man die Optik einer Seite nicht zu spartanisch gestalten will (z.B. mit FontAwesome). Doch auch dafür gibt es eine Lösung: ein kleines Javascript, welches direkt inline im HEAD verwendet werden kann und welches bestimmtes CSS „onload“ geladen wird.

CDN

Content Delivery Network (CDN)

Eine Content Delivery Network oder kurz CDN dient dazu, Inhalte geographisch dichter an den Nutzer zu bringen. Dadurch werden Latenzen vermieden und Webseiten können schneller geladen werden. Dies ist vor allem bei internationalen Projekten wichtig. Der bisherige Vorteil, dass das Laden von Inhalten von verschiedenen Servern parallel schneller ist, ist mit HTTP/2 hinfällig.

Wichtig ist ein CDN nach wie vor, wenn man Video-Dateien oder größere Downloads anbieten will. Hier kann man auch auf bekannte Anbieter zurückgreifen wie zum Beispiel:

Für Einsteiger ist Cloudflare am leichtesten zu konfigurieren. Hier wird ein kostenloser Plan angeboten, mit dem man vor allem die eigene Webseite vor zu vielen Zugriffen schützen kann. Praktisch besonders dann, wenn man ein eher günstiges Hosting verwendet und nur einzelne Lastspitzen abfangen will.

DNS-Server auf CDN verteilen

DNS-Server sind ein wesentlicher bestandteil der Internet-Infrastruktur: jede Domain muss zu ihrer IP-Adresse (egal ob IPv4 oder IPv6) aufgelöst werden. Hier kann je nach Hoster auch zeit verloren gehen, meist reagieren DNS-Server innerhalb von ~100ms. Auch hier gibt es Dienste, die deutlich bessere Werte ermöglichen und diese zudem Weltweit verteilen können - nachdem der Google Bot aus den USA heraus agiert, kann dies einen minimalen Vorteil bringen. Folgende Anbieter bieten DNS-Server zur Verwendung mit der eigenen Domain an (gegen Geld):

PHP

PHP

Viele Webseiten verwenden PHP zur dynamischen Erstellung von Inhalten. Es gibt zwar Alternativen (boost-for-websites.de verwendet z.B. Jekyll), für Wordpress und die meisten Shop-Systeme ist PHP jedoch eine Grundvoraussetzung.

Gerade mit der aktuellen Version PHP 7.x hat die Ausführungsgeschwindigkeit deutlich zugelegt. Hier werden fast die Werte von HHVM erreicht, bei der PHP-Scripte nicht zur Laufzeit ausgeführt werden, sondern bereits vorher kompiliert werden und dann nur noch aufgerufen werden. HHVM ist eine Technik, die unter anderem von Facebook entwickelt wurde (und eingesetzt wird).

Hoster mit PHP7-Support (Auswahl)

COMMENTS

COMMENTS

Kontakt

Wer mich kontaktieren will, kann entweder das klassische Medium E-Mail nutzen mit der Adresse

info [@] falkjeromin.de

Natürlich stehen auch die gängigen Kontaktwege über Social-Media-Kanäle: Facebook, Twitter, Google+ und Xing!