Lazy loading CSS background images for better website loading performanceArticle contains
  1. Can you lazy load background images?
  2. Set the goals for lazy loading CSS background
  3. The solution
  4. Workable example
  5. Download package
  6. Discussions
  7. Improved lazy loading for images, video, and audio
  8. How to set lazy loading images on other libraries
Collection of pictures in frame

Lazy loading CSS background images for better website loading performance

Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy" can be used in order to defer the loading of off-screen images until the image appears on the screen. Lazy loading of images improves performance by reducing initial page load time, initial page weight, initial page rendering, and system resource usage.

  1. Initial page load time – with lazy loading, the page is loaded faster because only images that are visible on the screen are loaded.
  2. Initial page weight – because images that aren’t visible won’t be downloaded. Hence, the whole page weight will be smaller.
  3. Initial page rendering – less images to render, the faster the whole page will be rendered for the user.
  4. System resource usage – this refers to less resource usage like CPU, network, etc.
Continue reading “Lazy loading CSS background images for better website loading performance”
4 simple things you should do in optimising website loading performanceArticle contains
  1. Delay loading scripts for improved performance
    1. Reduce HTTP connections and download cost
    2. Consider download and execution costs
    3. Multiple scripts in one line can still result in multiple HTTP requests
    4. Be cautious when utilizing User Traffic Analytics
  2. Concatenation for efficient script delivery
  3. Brotli compression for faster page loading
  4. Boost website performance with HTTP/2
  5. Latest update: Optimize the use of multiple SVGs
Stopwatch

4 simple things you should do in optimising website loading performance

Everyone wants their site to be loaded fast. It’s not only good from the SEO perspective but also from the user experience perspective. However, achieving fast loading website it’s that easy quite often. Some use a one-click solution to magically resolve all loading performance issues. Use that with caution as those won’t resolve all issues you may have.

Continue reading “4 simple things you should do in optimising website loading performance”
How to set the focus on element and prevent from scrollingArticle contains
  1. How can I prevent scrolling when setting focus on an element?
  2. HTML code
  3. JavaScript code
  4. How do I detect if a browser supports preventScroll option?
  5. Why is the "prevent scroll" feature not working in JavaScript?
Why was SiteLint founded?Article contains
  1. Identify limitations
  2. A new era of keeping the web app/site quality