What measures can you take to make your website load faster? An overview:
Technical:
- Dynamically design the file size of images:
Verwenden Sie so genannte Responsive Bilder (Responsive Images). Mit dieser Technik sagen Sie dem Browser: “Hey, wenn Du eine kleine Auflösung hast, dann nimm das kleine Bild, wenn Du einen größeren Bildschirm hast, dann nimm das größere Bild”. Bei kleineren Bildschirmen kann man dann natürlich eine Grafik wählen, die auch wesentlich weniger Kilobyte hat, so dass die Website dann insgesamt schneller geladen wird auf dem Smartphone. Die Umsetzung sieht zunächst etwas kryptisch aus im HTML, aber inzwischen gibt es viele Editoren, mit denen man verschiedene Bilder bequem über eine Oberfläche auswählen und testen kann (auch der Page Builder in unserem RundUmsorgt Package ). All technical details on the topic of Responsive Images can be found on the website https://developer.mozilla.org. - Image format:
When large image files are necessary, it is worth taking some care in selecting the file format as well as the highest possible degree of compression, taking into account visible losses in quality. Depending on the motif, particularly small files can be saved when using the relatively new format WebP which, however, requires some additional effort in terms of integration in a way that is suitable for all browsers.
The correct image format and degree of compression always depend on the motif and must ultimately be determined by trial and error. This blog entry has already explained this in more detail. - Optimise the order in which resources are loaded and interpreted:
Oft werden im Kopfbereich von HTML-Seiten umfangreiche CSS- und Skriptdateien nachgeladen, die zu diesem Zeitpunkt noch gar nicht benötigt werden, aber das Rendern der Seite verzögern (“render blocking resources”). Binden Sie derartige Ressourcen nach Möglichkeit weiter unten im HTML ein, lassen Sie Skripte verzögert ausführen (z.B. durch defer-Attribute), notieren Sie wichtige CSS-Vorgaben inline und laden den Rest später, so dass möglichst schnell sichtbare Inhalte gerendert werden können. Selbst Webfonts können im Nachhinein geladen werden und dann die bereits gerenderten Schriften ersetzen. Hierzu dient die CSS-Angabe “font-display: swap;” für den entsprechenden font-face-Eintrag. - Compressed transmission:
For all text-based resources (HTML, CSS, scripts), you should set a compressed transfer on the server side. For Apache servers, a suitable procedure such as GZIP is usually activated by suitable entries in the .htaccess file. If other web server software such as NginX is running instead or in addition, similar specifications are necessary at a different point. - Minified style sheets and script files:
Zusätzlich können Sie HTML-, CSS- und Skriptdateien durch Löschung aller nur der menschlichen Lesbarkeit dienender Eigenschaften wie etwa Zeilenumbrüche zusätzlich verkleinert (“minified”) bereitstellen. - Set cache defaults:
For each type of resource that is loaded from the server when the page is called up (HTML, CSS, JScript, graphics), the cache lifetime should be defined. Without a cache policy, clients reload each resource from the server with every call. If, on the other hand, a longer cache life, such as 30 days or 1 year, is specified for mostly constant resources, the client first uses the local cache, which saves loading time on balance. The cache defaults are typically set by entries in the .htaccess file of Apache web servers. Here, too, alternative procedures must be chosen if the server software differs. - Lazy-Loading:
Lazy loading means that elements are only loaded when they enter the visible area of the browser, not before. Of course, this saves a lot of time, especially on pages that include many images such as photo galleries. Lazy loading is currently implemented with JavaScript (yes, this also requires embedding 😉 ). - Summary of requests:
Fassen Sie viele externe Anfragen (Requests) zusammen, z.B. fassen Sie viele einzelne Javascript Dateien, die einzeln eingebunden werden zu einer Datei zusammen. Das gleiche gilt für Stylesheets. Bei wenig Style-Angaben lohnt es sich eventuell, diese “inline”, d.h. ganz ohne externe Datei einzubinden. Dies sollte man aber im Einzelfall ausprobieren. - Clean HTML:
Write good HTML if the website is created manually. Clean, simple HTML will make your page load faster. Of course, you have to weigh usability here, e.g. page builders in WordPress always have some overhead, so need more HTML elements to control each element better. On the other hand, you have built your website in hours instead of weeks and can spend the rest of the time on performance 🙂
Content:
- Keep the images or other media used on the homepage to a minimum. It is tempting to put as much as possible on the homepage. But this not only overloads your readers, it also means that a lot of kilobytes have to be loaded from the server to the browser. Of course, the less ballast, the faster.
- “Frontpage Hygiene”. Es ist normal und gut, dass während einer langen Lebenszeit einer Website immer mehr Bereiche hinzukommen. Aber oftmals sind Sie vielleicht auch hier versucht, neue Infos erstmal direkt auf Ihrer Startseite zu platzieren. Aber auch die alten Informationen sind ja wichtig, so dass sich im Laufe der Jahre mehr und mehr auf einer einzigen Seite befindet, die Website wird überladen. Aufräumen erfordert an dieser Stelle allerdings gute Kenntnisse über das Besucherverhalten auf Ihrer Website, denn wenn Sie einfach radikal aufräumen kann es passieren, dass gut laufende “Call To Actions” nicht mehr verfügbar sind und Sie somit den Besucherstrom beeinträchtigen.
- Vermeiden Sie zu viele “goldene Henkel” und Spielereien, gerade auf der Homepage. Ich weiß, man will “beeindrucken”. Aber versuchen Sie, sich auf Ihre Essenz, auf das Wesentliche zu konzentrieren. Außerdem sind die neuesten technischen Spielereien im Web-Design von heute in spätestens einem Jahr wieder hinfällig und wirken dann altbacken.
- If you can represent an element just as well with text and CSS instead of as an
resource, then you should make the effort, it is worth it.
