Web/app performance and scalability

[stefanhopman1]

https://pagespeed.web.dev/analysis/https-domits-com/zxbsy4vu5l?form_factor=mobile

Web/app performance and scalability In the beginning the platform should be able to sell 10k - 1M accommodations per year and 0,019 - 1,9 per minute. The average face value is $XXX.

[Timmhart]

Idea Robert: Loading time of Domits should be not this bad. Goal perhaps should be below 2 seconds? Currently, with 19.2 MB resources to be downloaded, the finish is in 14.54 s if you're on a random wifi connection. I see images again are annoyingly big. Proposed approach: when saving an image, save 3 different image avatars: 1 for mobile (very small 100kB), 1 for home page (small 200kB) and one for detail page (can be medium in size 500kB). This is the quickest win for user experience. Monitoring this could be done via a recurring check by the quality/compliance manager - or automated!

[Timmhart]

PageSpeed bot APP 1:46 PM The average PageSpeed score for https://www.domits.com is:

• Mobile: 43.7
• Desktop: 56.3 Opportunities for improvement (mobile):
• Reduce unused CSS: Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
• Eliminate render-blocking resources: Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn how to eliminate render-blocking resources.
• Properly size images: Serve images that are appropriately-sized to save cellular data and improve load time. Learn how to size images.
• Ensure text remains visible during webfont load: Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.
• Efficiently encode images: Optimized images load faster and consume less cellular data. Learn how to efficiently encode images.
• Serve static assets with an efficient cache policy: A long cache lifetime can speed up repeat visits to your page. Learn more about efficient cache policies.
• Image elements do not have explicit width and height: Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions
• Enable text compression: Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more about text compression.
• Avoid serving legacy JavaScript to modern browsers: Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn how to use modern JavaScript
• Serve images in next-gen formats: Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats.
• Speed Index: Speed Index shows how quickly the contents of a page are visibly populated. Learn more about the Speed Index metric.
• Preload Largest Contentful Paint image: If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. Learn more about preloading LCP elements.
• Max Potential First Input Delay: The maximum potential First Input Delay that your users could experience is the duration of the longest task. Learn more about the Maximum Potential First Input Delay metric. 1:46
• Reduce JavaScript execution time: Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time.
• Time to Interactive: Time to Interactive is the amount of time it takes for the page to become fully interactive. Learn more about the Time to Interactive metric.
• Largest Contentful Paint element: This is the largest contentful element painted within the viewport. Learn more about the Largest Contentful Paint element
• Minimize main-thread work: Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work
• Reduce unused JavaScript: Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.
• Avoid enormous network payloads: Large network payloads cost users real money and are highly correlated with long load times. Learn how to reduce payload sizes.
• Largest Contentful Paint: Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more about the Largest Contentful Paint metric
• Total Blocking Time: Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more about the Total Blocking Time metric.
• Serve static assets with an efficient cache policy: A long cache lifetime can speed up repeat visits to your page. Learn more about efficient cache policies.
• Time to Interactive: Time to Interactive is the amount of time it takes for the page to become fully interactive. Learn more about the Time to Interactive metric.
• Largest Contentful Paint element: This is the largest contentful element painted within the viewport. Learn more about the Largest Contentful Paint element
• Enable text compression: Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more about text compression.
• Ensure text remains visible during webfont load: Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.
• Reduce the impact of third-party code: Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. Learn how to minimize third-party impact. 1:46
• Properly size images: Serve images that are appropriately-sized to save cellular data and improve load time. Learn how to size images.
• Speed Index: Speed Index shows how quickly the contents of a page are visibly populated. Learn more about the Speed Index metric.
• Minimize main-thread work: Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work
• Largest Contentful Paint: Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more about the Largest Contentful Paint metric
• Efficiently encode images: Optimized images load faster and consume less cellular data. Learn how to efficiently encode images.
• Preload Largest Contentful Paint image: If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. Learn more about preloading LCP elements.
• Image elements do not have explicit width and height: Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions
• Reduce unused CSS: Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
• Avoid serving legacy JavaScript to modern browsers: Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn how to use modern JavaScript
• Avoid enormous network payloads: Large network payloads cost users real money and are highly correlated with long load times. Learn how to reduce payload sizes.
• Serve images in next-gen formats: Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats.
• Eliminate render-blocking resources: Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn how to eliminate render-blocking resources.
• First Contentful Paint: First Contentful Paint marks the time at which the first text or image is painted. Learn more about the First Contentful Paint metric.
• Max Potential First Input Delay: The maximum potential First Input Delay that your users could experience is the duration of the longest task. Learn more about the Maximum Potential First Input Delay metric. 1:46
• Total Blocking Time: Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more about the Total Blocking Time metric.
• Reduce unused JavaScript: Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.
• Reduce JavaScript execution time: Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time.
• Preload Largest Contentful Paint image: If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. Learn more about preloading LCP elements.
• Reduce unused JavaScript: Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.
• Ensure text remains visible during webfont load: Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.
• Minimize main-thread work: Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work
• Efficiently encode images: Optimized images load faster and consume less cellular data. Learn how to efficiently encode images.
• Avoid serving legacy JavaScript to modern browsers: Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. Learn how to use modern JavaScript
• Image elements do not have explicit width and height: Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions
• Reduce unused CSS: Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
• Total Blocking Time: Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more about the Total Blocking Time metric.
• Serve static assets with an efficient cache policy: A long cache lifetime can speed up repeat visits to your page. Learn more about efficient cache policies.
• Properly size images: Serve images that are appropriately-sized to save cellular data and improve load time. Learn how to size images. 1:46
• Max Potential First Input Delay: The maximum potential First Input Delay that your users could experience is the duration of the longest task. Learn more about the Maximum Potential First Input Delay metric.
• Largest Contentful Paint: Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more about the Largest Contentful Paint metric
• Eliminate render-blocking resources: Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.