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 means that elements are only loaded when they reach the visible area of the browser, not before. This of course 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:
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:
Write good HTML if the website is created manually. Clean, simple HTML ensures that your page loads faster. Of course, you have to weigh up the usability here, e.g. page builders in WordPress always have a certain overhead, so require more HTML elements so that the individual elements can be better controlled. On the other hand, you can build your website in hours instead of weeks and spend the rest of the time on performance 🙂
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.