Glossary of important terms

‍

Here is a glossary of important terms related to site speed performance, including both metrics for measuring site speed and techniques for improving it:

Site Speed Performance Metrics

• LCP (Largest Contentful Paint): Measures the time taken for the largest content element visible in the viewport to become fully rendered. It's a key metric for understanding perceived load speed.
• TTFB (Time To First Byte): The time it takes for a user's browser to receive the first byte of page content from the server. It's an indicator of the server and network speed.
• CrUX (Chrome User Experience Report): A public dataset of site performance metrics from real-world Chrome users. It includes metrics like LCP and is used by Google for understanding a site’s performance.
• Core Web Vitals: A set of metrics that Google considers important for user experience, including LCP, First Input Delay (FID), and Cumulative Layout Shift (CLS).
• CLS (Cumulative Layout Shift): Measures the sum total of all individual layout shift scores for every unexpected layout shift during the lifespan of the page.
• INP (Interaction to Next Paint): Measures the responsiveness of a page when a user first interacts with it, such as clicking a link or tapping a button.
• FID (First Input Delay): The time from when a user first interacts with a page to the time when the browser is able to begin processing event handlers in response to that interaction.

Techniques to Improve Site Speed

• Caching: Storing copies of files or data in a temporary storage location (cache) for quick access. Caching reduces the amount of data transferred and processing needed on future requests.
• Inlining Critical CSS: Placing the CSS needed to render the above-the-fold content of a page directly into the HTML document to speed up its rendering.
• Image Optimization: Techniques like compression, resizing, and proper format selection to reduce image file sizes without significantly impacting visual quality.
• Script Prioritization: Loading essential scripts first and deferring others to ensure important content is loaded quickly.
• Preloading Key Resources: Instructing the browser to begin downloading important resources (like LCP images) early in the page load process.
• Use of CDN (Content Delivery Network): Distributing content across multiple geographically dispersed servers to reduce latency and improve load times for users far from the server.
• Edge Optimization: Implementing performance strategies at the network edge (closest to the user), using technologies like Cloudflare Workers.
• Self-Hosting Critical Assets: Hosting key resources on your own servers instead of relying on third-party services to reduce dependencies and potential delays.
• Embedding Aspect Ratio Data for Images: Including information about an image's aspect ratio to help the browser allocate space for it before the image is fully loaded, thus reducing layout shifts.
• Concatenation of Inline Styles: Combining multiple CSS or JavaScript files into single files to reduce the number of HTTP requests needed for loading a page.
• Predictive Prefetching: Anticipating and loading resources a user might need next, based on their current activity and common user pathways.
• Defer or Async Attributes for Scripts: Using these attributes to control when JavaScript files are executed, either after the document has been parsed (defer) or as soon as the script is available (async).

These terms and techniques are integral to understanding and improving site speed performance, and they form the foundation of Fudge’s approach to optimizing website performance​​​​.

‍