What measures can you take to make your website load faster? An overview:
Technical:
- Dynamically design the file size of images:
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 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:
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 purpose. - 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:
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:
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:
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 these "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 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". 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. However, tidying up at this point requires good knowledge of visitor behaviour 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 therefore 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 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.
