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 (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 then of course choose a graphic that also has considerably fewer kilobytes, so that the website then loads faster overall on the smartphone. The implementation looks a bit cryptic at first in HTML, but in the meantime there are many editors with which you can select and test different images conveniently via an interface (also the Page Builder in our RundUmsorgt Package ). All technical details on the topic of Responsive Images can be found on the website ResponsiveImages.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:
Often, extensive CSS and script files are loaded in the header of HTML pages that are not needed at this point but delay the rendering of the page ("render blocking resources"). If possible, include such resources further down in the HTML, allow scripts to be executed with a delay (e.g. through 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 afterwards 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 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:
In addition, you can provide HTML, CSS and script files minified 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 included individually into one file. The same applies to style sheets. If there are few style sheets, it may be worthwhile to include them "inline", i.e. without any external file at all. However, this should be tried out 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 during a long lifetime of a website more and more sections are added. But often you may be tempted to put new information directly on your front page first. But the old information is also important, so that over the years more and more is placed on a single page, the website becomes cluttered. Tidying up at this point, however, requires a good knowledge of visitor behaviour on your website, because if you simply tidy up radically, it can happen that well-run "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, today's latest technical gimmicks in web design will be obsolete again in a year 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.
