How to Optimize Your Website's Loading Times

Who doesn't know the feeling: You Google a topic, open a website hoping to find the information you need, and the content and images load very slowly. According to a study by Akamai Technologies, 57% of searchers wait only three seconds or less before leaving the homepage. The average loading time for websites is about 8 seconds. This refers to the time it takes for all scripts, images, and plug-ins to load. It's no longer a secret that Google factors loading times into its search algorithm.

Image 1: An overview of loading time information. Created with www.pagespeed.com

Achieve a big impact with small adjustments and reduce loading times

Here are a few small tips that can have a big impact on your site's performance:

Utilize caching: Pages that rarely change can be cached by the visitor's browser, known as caching. Almost all CMS systems like WordPress and Typo3 offer this function in the site settings. Specifically selected pages can be cached. If this is not the case, settings can be made in the .htaccess file.Stylesheets: As few extra CSS files as possible should be included. It is advantageous to have all the code in a single stylesheet. This also reduces loading times, as caching plays a significant role here. Stylesheets should generally be implemented in the website's header. A regular check of which CSS snippets or entire CSS files are no longer needed and can be deleted is also helpful. Directly setting formats, known as inline styles, creates unnecessary data load. The icing on the cake for website optimization would be the removal of unnecessary spaces and comments, as well as 'minifying' (minimizing characters).Example Adiv.menu {

background: black;

height: 15px;

width:240px;

}

Example B

div.menu {background: #000; height: 15px; width:240px;}The difference between Example A and B is that all spaces have been removed. Line breaks are also special characters and have been removed. The background attribute has been compacted using a hex code. In general, a W3C valid source code, proper nesting of HTML elements, and overall lean source code should be the main goals of optimization.Js, HTML, and other plugins: Scripts like JavaScript or plugins are typically included in the website's footer unless needed at the beginning of the HTML source code. It's also wise to avoid embedding entire libraries. This implementation isn't always easy when new code fragments need to be added later.

Image 2: Describes the 'content breakdown' and provides all files as a percentage.

Handling images and videos: Graphics and images are a (central) data load due to their file size and can significantly reduce loading times. Many popular graphics programs already offer special optimized storage for integration into websites. Ideally, you should use images in the JPEG format, as they provide the highest compression rate. It should be ensured that elements are not frequently loaded from external sites. Images should not be scaled via the source code at all. Tip! With the jQuery Plugin Lazyload, image loading can be delayed until they are in the viewport, i.e., visible only when scrolling. WordPress offers a plugin for LazyLoad which is easy to install and configure. Adjusting images via the source code requires PC performance and does not allow the page to load faster. Basically, the same applies to videos. However, there are already many tools where videos, e.g., YouTube, are embedded on the website. Due to the integration, no optimization is possible.Additional tools in CM systems: If a 'Content Management System' (CMS) is behind the site, the number of plugins or extensions should be well-considered. Often, plugins offer features that can also be implemented in the template with your functions without any issues. Every seemingly small module needs loading time and storage when building the website. The list of plugins should always be kept tidy.

Other possible causes of long loading times

Strictly speaking, the following reasons are also responsible for a slowly building website:

Where is the web server located?: Do you have a cheap but slow hosting package from one of the big providers? Or is the website running on its server? The best solution is a fast and powerful server, where technical optimization (technical SEO) of the server can significantly reduce loading time.Browser architecture: The browser is an indicator of the performance of a website. Browsers use different rendering engines, which have different strengths and weaknesses and thus take different times to render a web page. You can learn more about the specific strengths and weaknesses of the popular browsers in the next article of our series.

What we can do for you

Would you like to improve your website's performance and reduce the bounce rate? We are happy to support you in optimizing your files, stylesheets, and content management systems to optimize your website's loading times.

Contact us!