CSS Content Visibility: Increase rendering performance
Increasing rendering performance through the use of CSS The rendering performance of a website plays a decisive role in the conversion of HTML code into
53% of users leave a website if it takes longer than 3 seconds to load.
Analysis and advice on Google PageSpeed, loading times and Core Web Vitals.
A well-known study has determined that a website that is just one second slower corresponds to a drop in the conversion rate of a whopping 7%. A fast website is therefore essential for successful lead generation and online sales.
Google officially confirmed back in 2010 that the PageSpeed Score is an important ranking factor. The top ranking pages often have a particularly short server response time. Since June 2021, Core Web Vitals have also been evaluated in the Google ranking.
A fast loading time results in a low bounce rate and satisfied users who return and make repeat purchases. A comprehensive and effective performance optimization can significantly reduce the bounce rate.
A short loading time is an important prerequisite for a good user experience (UX). UX signals are considered an important ranking factor by Google. Due to the steadily increasing use of smartphones in mobile networks, as little data as possible should be transmitted to ensure good performance.
External services
Tracking, live chats, integration of external ratings, Google Maps maps, CRM forms and many other third-party services often ensure that websites become slower and slower during operation. In most cases, new services are continuously integrated without paying attention to the loading time, the UX and the Google PageSpeed Score of the individual websites.
Uncompressed media
In particular, images in old and uncompressed image formats, which have also not been adapted for different screen resolutions, are a frequent cause of performance problems. Modern image formats such as WebP or AVIF combine very high compression rates with very good image quality.
Non-optimized script resources
JavaScript and CSS files are often not compressed and summarized. A lot of websites have a variety of such resources. By combining and compressing such files, the requests can often be reduced enormously, which in turn leads to a significantly lower overall loading time and a better user experience.
Old PHP and HTTP version
Especially websites that have been online for many years often use an outdated PHP version (< PHP 8) or an old HTTP protocol (HTTP/1.1). By updating this technical server infrastructure, a significant improvement in performance can be achieved for site visitors.
Missing or poorly configured website caching
If all pages of a website are always generated dynamically when the user calls up the page, then the loading time is considerably longer than if all pages are already preloaded as a static HTML version on the server. A well-configured cache ensures a short server response time (TTFB / Time To First Byte).
Missing text compression
Text-based resources (e.g. web documents) should be provided in compressed form in order to minimize the total number of bytes. This is often not the case for all resources. Brotli is the most efficient. GZIP should be used as a fallback for Brotli. GZIP is supported by all common browsers. Text compression is activated in the configuration of the web server.
01
Comprehensive measurement of website loading times, derivation and prioritization of optimization measures.
02
Specification of the measures and entry of tickets in the ticket system for the implementing developers.
03
Implementation of the necessary optimizations by the developers and acceptance of the implementation.
04
Continuous monitoring and reporting of the loading time and, if necessary, re-optimization of the website.
Increasing rendering performance through the use of CSS The rendering performance of a website plays a decisive role in the conversion of HTML code into
What is web performance monitoring? Web performance monitoring measures and monitors the performance of a website. Monitoring helps to identify line problems and solve these
What is the Largest Contentful Paint (LCP)? The LCP is a key figure of the three Core Web Vital Metrics. All metrics evaluate the user
What is Cumulative Layout Shift (CLS)? A low Cumulative Layout Shift (CLS) is crucial for a positive user experience. The CLS key figure refers to
Optimization of Google PageSpeed, Core Web Vitals and loading times for a higher conversion rate: Why a fast loading time is essential for customer loyalty
Update 03/2024 This article was updated in March 2024 after the INP metric became part of the Core Web Vitals and replaced the FID metric.
A good
mobile
score is achieved from a value of 90/100.
How complex it is to optimize loading times to achieve such a good score depends on many factors, for example: Server hardware, number and media format of the page elements (texts, images, videos), number of externally integrated scripts and much more. The Core Web Vital user data from the Google CrUX dataset is much more important than optimizing the score.
The Google PageSpeed Score is often mistakenly equated with the loading time. However, this is measured in seconds and must also be taken into account when optimizing performance. A high Google PageSpeed Score does not necessarily always correlate with a short loading time.
There are many optimization measures for improving website performance, Google PageSpeed Score and Core Web Vitals, all of which contribute to both short loading times and a better user experience with the respective website.
The following list is only an excerpt of potential improvements:
Web pages should be fully loaded in less than 3 seconds to be considered a good loading time. If a page takes more than 5 seconds to load, this inevitably leads to an increased bounce rate and a poor user experience. This then results in a slump in sales and poor lead rates.
The Google PageSpeed Score is not a ranking factor, but the Core Web Vitals (LCP, FID, CLS) are. Google measures the Core Web Vitals (CWV) by users of the Chrome browser. This
field data determined by Google
are important for the SEO ranking. The CWV of the last 28 days are included in the page experience as a ranking factor in the Google ranking. In addition to the CWV, mobile-friendliness, security and the correct handling of dialog fields are also important.
In addition, a short loading time increases user satisfaction, ensures more sales and fewer bounces. The optimization of Google PageSpeed, Web Vitals and loading times is therefore a very important topic both for a good user experience (UX) and for search engine optimization (SEO).
A consultation on load time optimization always begins with an initial, non-binding initial discussion. This allows, for example, the project goals, the timeline for improving speed and the roles in the project to be clarified.
The next step is a comprehensive audit for each page template/page type in order to identify all potential for speeding up the pages. The findings from the audit are then usually presented to the technical manager and the development team. Through the joint exchange, initial questions about the feasibility of the measures can be clarified straight away.
Some potential improvements require detailed specification. This is usually either incorporated into an (SEO) concept or the specification is made directly within tickets for agile implementation by the web developers.
The ticket system (often Atlassian Jira, Redmine, etc.) can then be used by the developers to ask questions before or during implementation. The web performance specialist can also confirm the successful implementation of the individual tickets via the system.
To ensure that performance does not deteriorate again after the initial optimization, it is always advisable to use a web performance monitoring system.
Page performance should be monitored using a Real User Monitoring (RUM) tool, as this allows individual user sessions to be recorded in real time. These are then stored anonymously in sessions so that data protection regulations are complied with and users cannot be traced. Personal data is not collected with this type of tracking.
Google collects real user data via the Chrome browser to evaluate the loading speed. The metrics LCP (Largest Contentful Paint), FID (First Input Delay) and CLS (Cumulative Layout Shift) are recorded. However, this data is stored in aggregated form, which is why the individual user experience can no longer be evaluated (e.g. a single access from a distant country and a mobile data network).
The data is publicly accessible to everyone, but is delivered with a delay of 28 days. The user experience can be viewed, for example, in the Google PageSpeed Insights field data report, can be accessed via a Google API and can also be viewed in the Google Search Console. In order to retrieve this information for your own website, you need a certain number of hits. Otherwise, either no data or only data for the domain origin (usually the start page) is available.
So if you only rely on the Chrome User Experience Report (CrUX) in your own monitoring, you can only react very late to a poor user experience. Nevertheless, CrUX data is important because it has an impact on ranking success.
Individual queries and evaluation of the laboratory data (synthetic measurements) from Google PageSpeed Insights do not represent meaningful monitoring of the loading time. These are user simulations, which is why this type of measurement is useful for staging instances and during the optimization of loading times, but not during operation.
Optimizing website load times can be a challenge due to various complex issues:
1. browser compatibility: Different browsers interpret and render websites differently, which can lead to inconsistent loading times. Optimization must target a wide range of browsers and devices to ensure a consistent user experience.
2. dynamic content: Websites with dynamic content that is frequently updated can cause difficulties with load time optimization. The complexity of database queries, content management systems and server-side scripts can affect loading times.
3. third-party resources: The integration of third-party scripts for analytics, advertising, social media widgets, etc. can have a negative impact on loading times, as they can generate additional HTTP requests and increase page render time.
4. resource transfer: The transfer of resources such as images, CSS, JavaScript and fonts from servers to user devices can take different amounts of time depending on network speed, latency and bandwidth, which affects loading times.
5 Server configuration and hosting infrastructure: The performance of the server on which a website is hosted, as well as the configuration of server software and caching mechanisms, can have an impact on loading times. An inefficient server configuration or an overloaded hosting infrastructure can lead to slow loading times.
6 Mobile devices and network conditions: Optimizing loading times for mobile devices is a particular challenge, as they often have slower network connections and less computing power than desktop computers. Mobile websites need to be specially optimized to load quickly and provide a good user experience.
Tackling these complex issues requires a comprehensive understanding of web technologies, careful planning and implementation of optimization strategies, and regular monitoring and adjustment to ensure the best possible performance.
Various industries can struggle with slow websites, especially those that rely heavily on online commerce or the provision of digital services. Some industries that may frequently face slow websites are:
1. e-commerce: Online stores and e-commerce websites, especially those with extensive product catalogs and many images, can suffer from slow loading times, resulting in a poor shopping experience and deterring potential customers.
2. news and media: Websites of news agencies, online magazines and media companies need to deliver content in real time, which can lead to a large amount of dynamic content that can affect loading times, especially with heavy traffic.
3. travel and tourism: Websites of tour operators, hotels, airlines and other tourism companies often have to provide large amounts of information and images, which can lead to slow loading times, especially if they are not properly optimized.
4. healthcare and online services: Hospital, medical practice and online healthcare websites often need to provide sensitive information and services in real time, which can result in slow load times if they do not have sufficient server capacity or optimization.
5. financial services: Websites of banks, insurance companies and other financial institutions must ensure that sensitive transactions and financial information are loaded quickly and securely in order to gain and maintain the trust of users.
In these industries, it is crucial that websites load quickly and reliably to increase user satisfaction, improve conversion rates and boost customer confidence. Optimizing loading times is therefore an important priority for companies in these sectors.
Yes, a fast website loading time is also important for websites in the public sector. Websites in the public domain are often used to provide information and services to the public, and a fast load time is crucial to ensure that users can access this information quickly. Here are some reasons why a fast loading time is also important for public websites:
1. accessibility and inclusion: A fast loading time contributes to accessibility and inclusion as it ensures that people with slow internet connections or older devices can use the website without any problems.
2. accessibility of government services: Government websites often provide important services and information for citizens, such as applying for IDs, filing taxes or searching for public health information. A fast loading time enables users to access these services quickly and efficiently.
3. transparency and citizen participation: Public websites often serve to promote transparency and inform citizens about government actions, policy decisions and public affairs. A fast loading time ensures that this information can be disseminated quickly and effectively, which can encourage citizen participation.
4. trust and credibility: A fast website loading time helps to strengthen the trust and credibility of a government organization or public institution. Slow loading times can give the impression that the organization is not working efficiently or does not have the necessary resources to provide a modern and user-friendly website.
Overall, a fast website load time is also important for public websites to ensure that they can effectively meet the needs of citizens and provide a positive user experience.
Some factors that can have a negative impact on the loading time are:
Large file sizes: Uncompressed images, videos and other resources can slow down the loading time considerably.
Too many HTTP requests: A large number of resources that have to be loaded from different servers can lead to many HTTP requests, which affects the loading time.
Unnecessary scripts and codes: Excessive or unoptimized JavaScript and CSS files can increase the loading time.
Server problems: A slow or overloaded server can affect the response time of a website.
The goals of pagespeed optimization are:
Reducing loading time: The main goal is to minimize the time it takes for a website to fully load and be ready for use.
Improving the user experience: Fast loading times increase user satisfaction, which leads to more time spent and interaction on the website.
SEO optimization: Better rankings in the search results can be achieved by improving the loading time.
Mobile optimization: Ensure that the website also loads quickly on mobile devices to meet the needs of mobile users.
It is advisable to consider pagespeed optimization from the very beginning, especially when developing a new website. However, it is also never too late to optimize existing websites, especially if the loading times are perceived as slow or if this has an impact on conversions and the user experience. It is an ongoing process, as technologies evolve and content is updated.
The effort required to optimize website load times depends on the scope of the website to be optimized (number of sub-pages and page types), on the respective degree of optimization at the start of the project and also on the desired target status.
Before starting the detailed specification of the optimization measures, a well-documented initial measurement of the website load time, the Google PageSpeed Score and the Core Web Vitals is created.
This makes it easy to carry out new site measurements during the optimization process and also at the end and to show the success of the measures transparently.
It is also advisable to set up a monitoring and reporting dashboard that uses automatic alerts to provide information on the change status of the most important KPIs.
In addition to synthetic tests, performance monitoring should also measure the end user experience using Real User Monitoring (RUM). A RUM tool measures the real user experience with the website, which can lead to a direct improvement in the conversion rate.
Regardless of the content management system (CMS) used, performance optimization can be carried out for all websites. These can be, for example, the popular CMS WordPress, Drupal, Adobe Experience Manager, Joomla, Craft or TYPO3, as well as the leading eCommerce systems such as WooCommerce, Shopify or Magento.
Very few CMSs are already so fast by default that the loading time could not be shortened further.
Consulting and optimization within a project often take place in agile Scrum teams. Ticket systems such as Atlassian Jira (also in conjunction with Confluence), Redmine, Mantis or Bugzilla are usually used.
I am also happy to train the implementing development team using practical examples to optimize the website in question. Such coaching can be carried out both remotely and on-site in the DACH region.
The typical contact persons in companies and agencies are chief technical officers (CTO), product managers, marketing managers and marketing managers, search engine optimizers and web developers (especially front-end developers).