Web Performance Bootcamp: Mastering Speed Techniques

Explore Chrome core web vitals metrics, including LCP, INP, CLS, and TTFB, and learn thresholds to optimize time to interactive and user experience.

Learn to measure core web vitals using Chrome DevTools, Lighthouse, and PageSpeed Insights, diagnosing render-blocking resources and optimizing scripts for faster page loads.

Identify critical resources—HTML, CSS, JavaScript, images, and fonts—and how they shape the above-the-fold content. Apply techniques to minimize size, reduce quantity, and prioritize loading to improve perceived performance.

Optimize JavaScript by minifying with terser, bundling with Webpack, and compressing with gzip; load scripts with async or defer. Enhance performance with DOM caching, document fragments, and event delegation.

Minimize CSS with tools like Webpack and Vite, and analyze styles with Marker Tool, CSS Stats, and Project Kohls.com to boost web performance by reducing size, rules, and selector complexity.

Master image optimization by choosing vector or raster wisely, serving responsive images with srcset and picture tags, using webp or avif, compressing assets, and enabling lazy loading to boost LCP.

Master lazy loading to defer non-critical resources like images until visible, boosting initial load times and perceived performance, with preloading to fetch upcoming images.

Apply small frontend performance tweaks, such as limiting iframes, using preload, bundling CSS, compressing assets, enabling caching, limiting cookies, and selectively using GraphQL to reduce data and requests.

Explore how progressive web apps boost web performance through service workers, app shell architecture, lazy loading, and preloading, delivering faster loads and offline capabilities.

Learn to lower Chrome core web vitals by running a Lighthouse baseline and applying fixes like enabling text compression, content encoding checks, image sizing, and removing render-blocking resources.

Analyze and optimize web performance using the Chrome DevTools Performance tab to simulate CPU and network conditions, identify main-thread bottlenecks, and apply rendering and scripting optimizations.

Explore factors that cause server side bottlenecks and slow server response times. See how poorly optimized database queries, slow external services, and inadequate resources impact performance.

Explore database optimization techniques to boost performance, reduce query times, and scale your web app while lowering resource use and infrastructure costs.

Use indexes to speed data retrieval, analyze queries with explain, and leverage materialized views, partitioning, and retrieving only necessary columns to boost MySQL performance.

Explore how query execution plans translate SQL queries into step-by-step operations, use indexes to reduce cost and rows, and interpret diagrams to optimize MySQL and other dbms performance.

Explore NoSQL optimization across key-value and document models, using embedding vs normalization, indexing, materialized views, and sharding, then profile queries, implement caching, and leverage batch operations.

Implement asynchronous requests and message queuing to keep checkout fast when third party services slow, using connection pooling, caching, and graceful timeouts with fallback payment gateways.

Master caching theory and practical implementations with Memcached and Redis to speed up web applications, store frequently accessed data, and ensure freshness via cache invalidation in front-end and back-end caching.

Increase backend performance by using microservices: independently developed services, horizontal scaling, tailored tech stacks, and loose coupling, with service meshes, caching, asynchronous communication, and proactive monitoring.

Explore algorithm complexity, time complexity, and big O notation, with constant, linear, and quadratic time through first-element access, search, and bubble sort for scalable web back ends.

Learn to profile a Node.js Express web API using Clinic Doctor to identify hot spots, optimize endpoints, and analyze CPU and memory usage.

Analyze time complexity to identify bottlenecks and apply lower big O, such as log N or N, while using the right data types, simple code, memoization, and parallelization.

Explore hardware scaling to boost cpu, memory, and storage, including raid configurations, vertical versus horizontal approaches, and auto scaling with load balancers for cloud and on-prem environments.

Explore the web network stack from physical to application, learn how each layer enables data transmission, and identify performance factors like latency, bandwidth, and round-trip time.

Explore the main network protocols, including TCP, UDP, and IP routing and DNS resolution, and see how the three-way handshake, flow control, congestion management, and latency shape web performance.

Explore http as an application layer protocol over the tcp/ip stack, handling stateless request–response cycles with methods like get, post, put, delete, headers, and status codes.

Reduce http requests by bundling assets and minifying files, enable compression, upgrade to http/2 or http/3, and use direct urls to lower latency and improve user experience.

Explore how http cache headers such as cache-control, expires, etag, last-modified, and vary influence browser and proxy caching. See how to configure Apache and nginx for efficient resource caching.

Explore how single threaded versus multi threaded web servers impact performance and how load balancing distributes requests across cores and multiple servers to boost scalability, availability, and latency optimization.

Boost DNS latency performance by choosing a global, high-performance provider, enabling DNS prefetching and anycast routing, and optimizing TTL, caching, and monitoring.

Learn how a content delivery network reduces latency by caching assets on global edge servers. DNS directs requests to the nearest edge server to speed up loading times.

Plan a performance intervention by defining metrics, including web vitals (page load, interactivity, visual stability) and runtime measures like largest contentful paint, interaction to next paint, and cumulative layout shift.

Automate core web vitals collection with the web vitals npm package to capture LCP, CLS, FID, FCP, and TTFB, and log results for frontend and backend dashboards.

Monitor database metrics such as queries per second, throughput, query execution time, latency, connection counts, storage usage, and cpu, memory, disk, and network utilization to identify bottlenecks and optimize performance.

Explore popular monitoring tools for apps, infrastructure, and services, including Prometheus for time series data and alerting, and Grafana, Datadog, New Relic, Elasticsearch, and Kibana for visualization.

Track performance metrics through notifications to gain real-time awareness of critical events and anomalies, enabling proactive incident management and rapid, downtime-minimizing responses. Notify stakeholders and accelerate mean time to resolve.

Set up a Prometheus and Grafana monitoring stack for a Vue.js frontend and a Node.js backend, collecting web vitals metrics such as LCP, FID, and CLS.

Set up a Docker Compose based observability stack with Grafana, Prometheus, and Alertmanager to collect web vitals metrics (fig, lcp, cls) and alert via Telegram.

Persuade your company that web performance matters by presenting tangible, numbers-driven arguments tied to metrics like 20 hours saved monthly and higher conversion rates.

Access attachments and resources to deepen your web performance journey, and contact the instructor with any questions. Embrace lifelong learning, keep exploring, and provide honest feedback to improve future courses.