How is this Website so fast!?

About this Video

• Video Title: How is this Website so fast!?
• Channel: Wes Bos
• Speakers: Wes Bos
• Duration: 00:13:39

Introduction

This video analyzes the McMaster-Carr website, known for its speed, to identify the technical strategies contributing to its performance. The speaker investigates various optimization techniques employed by the website's engineers.

Key Takeaways

• Server-Side Rendering: The website server renders HTML directly, avoiding JavaScript frameworks for faster initial load times.
• Prefetching and Caching: Aggressive prefetching of HTML on hover and caching via CDN (using Squid cache) and service workers minimize load times for subsequent page views. The service worker caches HTML in the browser for near-instantaneous reloading.
• Preloading Assets: The site uses <link rel="preload"> and <link rel="prefetch"> to prioritize loading of critical assets (like fonts and logos) before parsing HTML, preventing rendering delays.
• Critical CSS: Critical CSS is inlined within <style> tags, ensuring the browser has the necessary styling information immediately, avoiding render-blocking issues.
• Optimized Images: The site uses fixed-size images and image sprites to reduce download times and prevent layout shifts. Image sprites combine multiple images into a single file, minimizing HTTP requests.
• JavaScript Optimization: The website uses dependency injection, loading only the necessary JavaScript for each page, rather than loading all JavaScript across all pages. Uses older libraries like YUI and jQuery.