What measures can you take to make your website load faster? An overview:
Technical:
- Make the file size of images dynamic:
Use so-called responsive images. With this technique, you tell the browser: "Hey, if you have a small resolution, then take the small image, if you have a larger screen, then take the larger image". For smaller screens, you can of course choose a graphic that has significantly fewer kilobytes, so that the website loads faster overall on the smartphone. The implementation looks a little cryptic in HTML at first, but there are now many editors that allow you to conveniently select and test different images via an interface (including the Page Builder in our RundUmsorgt package ). All technical details about Responsive Images can be found on the website https://developer.mozilla.org. - Picture format:
If large image files are required, it is worth taking some care when selecting the file format and the highest possible degree of compression, taking into account any visible loss of quality. Depending on the motif, particularly small files can be compressed using the relatively new 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 subject and must ultimately be determined by trial and error. This has already been explained in more detail in this blog entry. - Optimize the order in which resources are loaded and interpreted:
Extensive CSS and script files are often loaded in the header area of HTML pages, which are not yet required at this point, but delay the rendering of the page ("render blocking resources"). If possible, include such resources further down in the HTML, have scripts executed with a delay (e.g. using defer attributes), note important CSS specifications inline and load the rest later so that visible content can be rendered as quickly as possible. Even web fonts can be loaded later and then replace the already rendered fonts. The CSS specification "font-display: swap;" for the corresponding font-face entry is used for this. - Compressed transmission:
For all text-based resources (HTML, CSS, scripts), you should set compressed transmission on the server side. For Apache servers, a suitable procedure such as GZIP is usually activated by making the appropriate entries in the .htaccess file. If other web server software such as NginX is running instead or in addition, similar settings are required elsewhere. - Minified stylesheets and script files:
You can also make HTML, CSS and script files available in a "minified" form by deleting all properties that only serve human readability, such as line breaks. - Set cache defaults:
The cache lifetime should be defined for each type of resource that is loaded from the server when the page is called up (HTML, CSS, JScript, graphics). Without a cache policy, clients reload each resource from the server each time they call it up. If, on the other hand, a longer cache runtime such as 30 days or 1 year is specified for resources that usually remain the same, the client first uses the local cache, which ultimately saves loading time. The cache specifications are typically set via entries in the .htaccess file of Apache web servers. Alternative procedures should also be selected here if the server software is different. - Lazy loading:
Lazy Loading bedeutet, dass Elemente erst dann geladen werden, wenn sie in den sichtbaren Bereich des Browsers gelangen, vorher nicht. Das spart natürlich massig, besonders auf Seiten, die viele Bilder wie z.B. Fotogalerien einbinden. Lazy Loading implementiert man zurzeit mit JavaScript (Ja, auch das erfordert wieder das Einbinden ;-) ) - Summary of requests:
Combine many external requests, e.g. combine many individual JavaScript files that are integrated individually into one file. The same applies to style sheets. If there are few style specifications, it may be worth integrating them "inline", i.e. completely without an external file. However, this should be tested on a case-by-case basis. - Clean HTML:
Schreiben Sie gutes HTML, wenn die Website manuell erstellt wird. Sauberes, einfaches HTML sorgt dafür, dass Ihre Seite schneller geladen werden kann. Natürlich muss man hier die Nutzbarkeit abwägen, so haben z.B. Pagebuilder in WordPress immer einen gewissen Overhead, also benötigen mehr HTML-Elemente, damit sich die einzelnen Elemente besser steuern lassen. Auf der anderen Seite haben Sie Ihre Website in Stunden aufgebaut statt in Wochen und können sich die restliche Zeit mit der Performance beschäftigen :-)
Content:
- Keep the images or other media used on the homepage to a minimum. The temptation is great to pack as much as possible onto the homepage. However, this not only overloads your readership, but 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". It is normal and good that more and more areas are added during the long life of a website. However, you may often be tempted to place new information directly on your homepage. But the old information is also important, so that over the years more and more is placed on a single page and the website becomes overloaded. Tidying up at this point, however, requires good knowledge of visitor behavior on your website, because if you simply tidy up radically, it can happen that well-running "Call To Actions" are no longer available and you thus impair the flow of visitors.
- Avoid too many "golden handles" and gimmicks, especially on the homepage. I know you want to "impress". But try to concentrate on your essence, on the essentials. Besides, the latest technical gimmicks in today's web design will be obsolete in a year's time at the latest and will then look old-fashioned.
- If you can display an element just as well with text and CSS instead of as an
resource, then you should make the effort, it's worth it.
