Wie können Sie die Web-Performance-Optimierung nutzen?

The real trick is to understand that none of these tools will give you a real image. These tools use supercomputers to analyze your (and thousands of others) website, and then simulate the result so it will look like a performance on a regular user device. The information provided in the report is not 100% accurate and real. For example, the same web page accessed from an M2 Max Mac or 2003. PC laptop will have different performances. Also, internet connection plays a large role, as well as physical location (distance from server). HOWEVER, the data in a report made by any of these tools CAN be useful to get a general understanding of your website's performance and improve the pits. The most accurate report is made by Google Search Console.

Lets say your website is our dance floor, just like you wouldn't eat a huge meal before a dance off, make sure your website isn't stuffed with big files. Shrink those photos and videos so they're like light snacks instead of heavy meals! Test your website with tools like Lighthouse to see where it's slow and where it can dance better. Like a rehearsal to find the sloppy moves! Make sure your website looks good on any device, just like a dancer has to look good from every angle. Look at fast websites and see how they do it. It's like watching the dance champions and learning their secret moves.

* Avoid using oversized images that are larger than necessary for the display area. * Employ responsive image techniques using the "srcset" attribute in HTML to deliver different image sizes based on the user's device and screen size. * Select the appropriate image format based on the content and use case. For example, JPEG is great for photographs, while PNG is suitable for images with transparency. * Use modern image formats like WebP for browsers that support it, as they often provide better compression without compromising quality.

Larger image (or any other file, like PDF, SVG, MP3...) takes more time to download to your device and load the page. Make sure to use images that have appropriate size (width x height in pixels), to use proper format (webp, jpg, png, gif) depending on the image itself and it's use, and finally co compress the image (numerous of free online and local tools for this). Also, make sure you load important images first (above the fold), and "lazy load" images not in the viewport. Using a CDN to serve files is also a good practice. Note: after each file optimization, do your homework and test the website, as you want to make sure everything loads and looks fine.

When adding videos to a web page, implement lazy loading for all video content, including YouTube or Vimeo, by using a placeholder image. This strategy postpones the loading of video files until user interaction signals intent to view, at which point a click on the image triggers the loading of the video content. Adopting this method across all video elements conserves data usage and accelerates initial page load times by reducing the number of HTTP requests made during the page's first load. This is beneficial for mobile and limited-bandwidth users, ensuring the site remains efficient and responsive.

Similarly to reducing the image size (compressing it), minifying code reduces the code size, which improves the page loading time. Combining multiple code files into one will reduce the number of HTTP requests (which also increases the speed), BUT this can introduce new problems with code not loading correctly or in the right order. Numerous on-site or server-side tools will make this easier for you, BUT MAKE SURE you test your website (in an incognito window, another device, or browser) after each optimization step.

Combining CSS or JS files can cut down on HTTP requests, boosting speed by needing fewer connections to the server. However, it can backfire by increasing the size of files that browsers have to download, slowing down the site for users with slow connections. A single large file may also delay the web page's interactivity since the browser takes longer to process it. Also, combining everything into one file means users might download unnecessary code for the pages they visit, which is inefficient compared to downloading only needed scripts. The smartest move is to try out different ways of combining your files to see what works best without slowing things down.

Believe it or not, if a website server is physically far from you, it takes more time for the information to travel from the server to your device. CDN is a network of servers around the globe that serve a copy of your website to visitors so that a visitor will get a connection to the closest server, hence the shortest load time. Another benefit of the CDN is that your original website server will have less load, as the CDN network takes it, so your server will run faster and/or unencumbered. The third major benefit is, that if your main server goes down (maintenance, bug, breakage...), CDN will still serve your website undisturbed. However, some functions will be limited (submitting a form, logging it to the admin side, etc).

Websites often have common elements across pages, such as headers, footers, and certain styles. Browser caching smartly stores these recurring components, allowing them to be reused on subsequent pages without needing to be reloaded from the server each time. This not only noticeably improves website load times but also enhances the user experience.

Browser caching stores webpages locally to speed up load times, but can cause users to see old content due to: 1. If set to expire too far in the future or not at all, browsers may not seek new content in a timely manner. 2. Browsers might skip checking if cached content is up-to-date, leading to old content being displayed. 3. Frequently changing or user-specific content might be cached incorrectly, causing outdated information to appear. This can especially be a problem for e-commerce websites. 4. The user's cache may not recognize content updates due to misconfigurations or network problems. When setting up browser caching ensure that you test it thoroughly.

To improve your website's loading speed, wait to load third-party scripts like Google Analytics or HubSpot until after the entire page has loaded. This approach lets your site display its essential content first, which can keep users from leaving due to slow load times. Although this might lead to a slight drop in the number of recorded visitors, the remaining data will reflect a more accurate count of engaged users. Quick loading is key to a good user experience and more meaningful engagement metrics. Prioritize fast access to content over tracking for the best balance of speed and data integrity. As always remember to test your implementation thoroughly.

Web server architecture is critical for Web performance optimization. If you have a slow server with high TTFB load times, none of the above optimizations will matter. I have seen websites that get good GTmetrix or PageSpeed scores but load times are still slow. I usually see this with websites hosted on cheap commercial hosts. In addition, many external scripts such as analytics or marketing scripts bring performance scores down, especiallywith Google Pagespeed, consider hosting them locally.