Best Practices Analysis
The Best Practices analysis evaluates a websiteโs adherence to web standards and guidelines, focusing on areas like performance, security, and maintainability.
Key Findings
- Large Inline SVGs: Flags SVG files larger than 5120 bytes, which can negatively impact loading times. Especially when they are on several pages, it is better to move these SVGs to an extra file and thus make better use of the browsing cache.
- Invalid Inline SVGs: Detects and reports improperly formatted SVGs that may not render correctly. In some cases (e.g. unclosed tags) they can cause various hidden problems - although the browser can solve many of these problems by itself, it can, for example, cause part of the content that follows the inline SVG to be hidden.
- Duplicate Inline SVGs: Identifies instances where identical SVGs are used multiple times, recommending consolidation to reduce file size. And of course, ideally move SVG to a dedicated file.
- DOM Depth: Alerts when the DOM tree exceeds 30 levels, which can slow down rendering.
- Heading Structure: Analyzes the logical structure of HTML headings, ensuring proper hierarchical order. And of course, ideally move to a dedicated file
- Non-clickable Phone Numbers: Ensures that phone numbers are clickable, improving user experience on mobile devices. Forcing the visitor to copy a number from the website and thus call it up is not nice ;)
- Title & Description Uniqueness: Evaluates the uniqueness of title and description tags to prevent SEO issues. Each page should ideally have a unique title and description. And that, for example, in the case of pages with pagination (the page number should also be in the title and description)
- Brotli Support: Checks if the server supports Brotli compression, which can significantly reduce file sizes for HTML, JS, CSS.
- WebP & AVIF Support: Verifies the presence of modern image formats like WebP and AVIF, which offer better compression than JPEG or PNG.
๐กFurther development ideas
In the future, we would like to implement further analyzes in the area of best practices. A few of your ideas:
- Resource Minification: Implement checks for minified CSS and JS files to enhance loading speed.
- Media Type Optimization: Incorporate analysis for modern formats (e.g., AVIF) across content types like images and videos.
- Lazy Loading: Analyze the usage of lazy loading for images and videos to optimize page rendering.
- Font Optimization: Evaluate the performance and usage of web fonts, recommending improvements like font-display strategies or subset fonts.
- Preload and Prefetch: Analyze the usage of resource hints (e.g.,
preload
,prefetch
) to enhance performance. - HTTP/2 or HTTP/3 Adoption: Check for the use of modern protocols to reduce latency and improve resource loading efficiency.