OnPage-SEO: Technical optimization for a faster website
By Martin Holoubek
11. November 2019
The speed or loading time of a website plays an important role for Google in addition to a variety of other factors for the assessment of the quality of the site and the ranking in the search engine. In addition, we all want the users who visit our website to stay on the website and to inquire or buy – it should come to a conversion. We are going to present you the most important factors for a successful, technical search engine optimization and the recommended tools in this article.
Usually in combination with the minification of the individual files, the so-called pipelining is performed. During pipelining, the previously individually optimized files are combined into a single file in order to reduce the number of requests required and speed up the loading time again. Pipelining is usually done by any modern Content Management System (CMS) ex works or by installing additional plugins. If WordPress is used as a CMS, we recommend W3 Total Cache or WP-Rocket for websites and WP-Rocket only for online shops.
A website consists of several files (HTML files, CSS, JS, graphics, images, videos, fonts, icons, etc.) that are loaded when the page is opened. The more files you need to load, the more requests you need to perform, which in turn negatively affects the loading time of the page. The goal should therefore always be to keep all content as compact as possible and to load nothing that does not necessarily have to be loaded. While logos, graphics or icons can be saved as web-optimized inline SVGs (vector graphics), fonts or icon fonts can be transferred as Base64 encoded streams. Images and videos should be optimized for the web and can also be loaded via lazy loading. Also, scripts can be loaded asynchronously and thus efficiently in terms of performance and loading time.
Optimize images and videos
Non or poorly optimized images are a major cause of slow websites, as they dramatically impact loading time and the overall user experience. We use different tools to optimize graphics and images, and in some cases several tools in a row, but we can assume that you can already achieve outstanding results with a tool like ImageOptim. For video optimization we recommend HandBrake.
A distinction is made here between the regular browser caching, also known as leverage browser caching, and the extended caching, which is taken over by the respective CMS. When talking about browser caching, it is usually defined in the .htaccess file via mod_expires how long the browser should save the defined content (HTML, CSS, JS, graphics, images, etc.). If the browser cache is deleted, the assets will be reloaded when the website is reopened. With the extended Caching, which is taken over by the respective CMS directly or indirectly by additional plugins such as W3 Total Cache or WP Rocket, it is about storing the entire static content of the website in its own caching system. In addition, dynamically generated content can be stored as static objects using so-called Object Caching Modules (Memcached or Redis) or Database Caching Modules and requested much faster the next time the website is visited, as some requests and database accesses are dropped.
Another very important point in the technical optimization of the website is the scaling of the images. To avoid unnecessary download times and to save bandwidth, in addition to a solid optimization for the web, images should be scaled accordingly for the different devices or resolutions. The implementation of these settings must be done by web developers via media queries and srcsets in CSS.
Originally, when requesting a website, for the download of each file or for each request a separate TCP connection was established, which indicates directly that the loading time of the entire website was negatively affected. To solve this problem, the so-called Keep-Alive flag has been introduced, which makes it possible to download all files using a single, persistent TCP connection (henceforth also known as Persistent HTTP Connection). The keep-alive flag is activated in the Apache or nginx config files, but it should already be activated from the ground up. In addition, with Apache servers, as usual, it is possible to activate the flag via the mod_headers module in the .htaccess file.
Server and hosting
An often underestimated fact is the hosting or the server hosting the website or the online shop. Of course, there are already providers on the market who offer relatively high-performance shared hosts, which are especially optimized for WordPress sites and shops. However, when it comes to implementing technical optimizations in detail and guaranteeing high-end performance, we recommend the use of a vServer (virtual machine with guaranteed hardware) or a dedicated server (own, unshared server with high-performance hardware). By having full access to the server, there is the great advantage of being able to set and optimize all the necessary settings down to the smallest detail, offering almost unimaginable optimization possibilities and ultimate performance. As for the server management software, we swear by Plesk, which brings many performance enhancements to the game.
Of course you can do the optimization in even more detail and there are a lot of other factors that have to be kept in order to provide a high-quality and powerful website, web app or e-commerce solution, but the recommendations mentioned here are the most important, initial optimization techniques that must not be missed and with which you can start immediately. If you want to know how your website performs, then do a first check with GTmetrix. Do you need support or would you rather take care of your core business and give the performance optimization to the experts, then write us or call us directly via the contact page.
Chief Executive Officer | PIXIT Design GmbH | pixit.design
Martin Holoubek is managing director of the design agency PIXIT in Wiener Neustadt, passionate entrepreneur and designer & developer with heart and soul. He loves the union of design & technology, creating the experience of tomorrow.