OnPage-SEO: Technical optimization for a faster website

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.

Minify HTML, CSS, and JavaScript

Minifying is about compressing and slimming the code by converting it to a more compact form and removing unneeded characters. This results in smaller sized files, which furthermore leads to a smaller amount of requests and a faster loading time. This makes it easier for search engines to capture the entire site quickly and efficiently and users get delivered the desired content in less time. The minification is usually taken over directly by the CMS or, for example, can be implemented in Wordpress using W3 Total Cache or WP-Rocket. For manual minification we recommend HTMLMinifier (HTML), CSSNano (CSS) and UglifyJS (JavaScript). With the Google-introduced PageSpeed ​​API, the optimization can be done more easily.

Combine CSS and JavaScript

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.

Minimize requests

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.

Caching

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.

Lazy Loading

Lazy Loading is a technique widely used and applied in software development to load and display content - usually images and videos - only when they are visible to the user. In concrete terms, this means for a website that the content is loaded asynchronously as soon as it is in the viewport of the browser. Thus, images and videos do not have to be fully loaded when the page is accessed, which reduces loading time and increases performance. Lazy Loading can be implemented via JavaScript or with the already mentioned plugin WP-Rocket - we recommend the JavaScript option, because you can better control and customize the technique.

GZIP Compression

All modern browsers support the transmission of the necessary assets for operating the website or web app, such as HTML, CSS and JavaScript files as well as graphics and images in compressed form via gzip. Activation of gzip is done again via the Apache module mod_deflate and setting the appropriate commands in the .htaccess file. Nginx servers have their own configuration or command sets. Many CMS support GZIP compression from scratch, in other cases, already mentioned plugins like WP-Rocket help.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;

Scale images

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.

Enable Keep-Alive

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.