Boost Your Website Performance - Practical for Developers

Clone the course repository, explore its structure, and move the starter files to a final directory. Load the sample pages with live server and aim to fix the performance.

Simulate slow networks such as slow 3G on desktop and mobile, refresh with cache disabled, and observe first-load timing to measure objective website performance rather than subjective judgments.

Use the Lighthouse tool in Chrome to objectively measure web page performance across mobile and desktop, compare scores under different network speeds, and learn about the five Web Vitals.

Learn how Google web vitals metrics drive Lighthouse scores, including FCP, Speed Index, LCP, TBBT, and CLS, and how color codes indicate mobile and desktop performance.

Measure web performance with lighthouse and vitals like fcp, lcp, tbt, and cls, then follow top diagnostic suggestions to reduce lcp by fixing rendering block resources and css.

Use page speed insight to check performance score and web vitals; deploy on the cloud with Vercel, import from GitHub, and host assets remotely.

Show how Lighthouse tests appear fast when HTML, JavaScript, and CSS load from disk. Explain that real performance requires hosting your app and using PageSpeed Insights to measure client-server timing.

Switch from lighthouse to page speed insights and explain LCP phases, identifying the largest image as the render and the durations: first byte, low delay, image load, and render delay.

Explore how the browser loads resources with web page test to visualize the rendering pipeline and resource order from html to css to javascript, images, and fonts, relating to lcp.

Understand how remote fonts slow page rendering by causing cross-domain requests to the hosting and font server, and learn to improve performance by hosting fonts on the same server.

Self-host the mulish font from Google fonts, download the ttf file, configure and deploy the font family on your site, and observe improved page speed and lcp.

Improve your page speed by localizing the hero image and all Unsplash images in a local images directory, reducing LCP and testing with PageSpeed Insights and WebPageTest.

Switch the hero from a div background to an img element to signal image loading. This boosts performance and seo by treating the hero as a true image.

Apply responsive images using srcset and sizes to optimize the hero image across devices, reducing PageSpeed Insights scores and saving mobile data, with a tool to automate averaging results.

Crop the hero image to two sizes with the sharp image processing package, configure srcset and sizes, and verify a 100 performance score on page speed insights.

Explore practical image and font optimizations to improve core web vitals and lcp, using webp over avi, employing srcset, and testing desktop and mobile performance toward 100.

Explore practical web performance optimization using PageSpeed Insights and WebPageTest to raise a sample page's score, while applying a hands-on git workflow and testing under slow networks.

Analyze page performance using WebPageTest to identify issues like huge LCP on mobile, total blocking time, and cumulative layout shift, and compare desktop versus mobile behavior.

Render blocking resources load at the start of the page load and block other resources until processed, with JavaScript and CSS as primary examples.

Analyze 4xx responses in WebPageTest, identify missing resources like CSS and icons, create the assets directory and add files, push changes, and verify fixes that eliminate 400/404 errors.

Explore total blocking time and how long tasks block the main thread, using the Chrome DevTools performance tab to identify and remove a blocking CPU function for faster LCP.

Convert jpg images to WebP using sharp to reduce file sizes, boost LCP, and leverage Next.js image optimization, as PageSpeed Insights shows faster loading after the conversion.

Learn to apply lazy loading only to images outside the viewport, keep hero images with high fetch priority, and test with page speed insights to improve LCP.

Learn to optimize images with responsive srcset and sizes, crop to multiple sizes using sharp, preserve aspect ratio, and improve lcp for a dog image.

Switch to production JavaScript packages to reduce payload size and improve LCP, by minifying files, removing comments and spaces, and using production CDN links for React, ReactDOM, and jQuery.

Identify and remove unused css and js with the chrome coverage tab to reduce render blocking, test with web page test, and commit changes.

Move the render-blocking jQuery from the head to the end of the body to unblock rendering, improve LCP and core web vitals, and keep scripts loaded only where used.

Learn to reduce cumulative layout shift by reserving image space with the CSS aspect-ratio property, ensuring predictable layout and improving core web vitals like CLS and LCP.

Demonstrates reducing cumulative layout shift by using a fixed aspect ratio for dynamic content and placeholders, then validates zero cumulative layout shift with page speed insights on mobile.

Explore performance core metrics like fcp, lcp, and tbt, note accessibility and seo issues, and plan an advanced exercise for image loading plus next section improvements.

Optimize faster load times, stable layout, and better UI while aiming for top Google search rankings by diagnosing and fixing performance, SEO, and accessibility issues through a guided workflow.

Improve accessibility by adding alt attributes and lang attributes to images and pages, verify results with lighthouse, and push to production to achieve a 100 accessibility score.

Improve website performance and seo by fixing html and best practices. Explore how hosting on cloud vs production affects performance scores, aiming for a consistent 100.

Explore evaluating and improving website performance by analyzing page speed insights, addressing performance issues, and boosting mobile accessibility and SEO for developers.

Analyze web vitals to identify LCP as the main bottleneck and fix it by optimizing images with srcset, sizes, and linked images, possibly using WebP format and PageSpeed insights.

convert jpgs to WebP using the image processing tool to cut image sizes and improve performance, then update references and deploy to Vercel for next-gen format serving.

Analyze render blocking resources and optimize by delivering critical JavaScript and deferring non-critical files, including Google Fonts. Use WebPageTest on mobile 3G to observe render blocking and the large LCP.

Learn to remove render blocking resources by self-hosting fonts locally, replacing online fonts, testing network requests, and noting that woff2 is preferable to ttf for font delivery.

Explore how to implement srcset for responsive images, crop assets to preserve aspect ratio, and serve appropriately sized versions to match on-page width, reducing bandwidth and improving performance.

Learn to serve responsive images by converting assets to webp and creating 1x and 2x logo variants with srcset, then run the dev script and commit the updates.

Boost the performance score by optimizing the hero image: preload the header image or switch to an img element, and reduce mobile hero size to speed up lcp.

Focus on accessibility and SEO to push your score toward 100, making it easier for Google to index your web page; try solving issues yourself first to reinforce learning.

Improve accessibility by analyzing and adjusting foreground and background contrast to achieve a perfect score of 100, using color zilla and lighthouse, and fix heading hierarchy.

Improve seo by achieving a score of 100 through legible font sizes and proper seo checks, then deploy updates with git, noting lighthouse local and speed insights are not needed.

See a real-world, multi-page website clone and learn to use page speed insights to assess performance, address score variability across runs, and tackle common high-performance challenges on real sites.

Clone a Next.js client server app, install dependencies, build for production, and deploy with vercel while examining web performance and server-side rendering implications.

Automate website performance testing with PageSpeed insight API, collecting samples from 18 pages across two runs, using environment variables, CI/CD pipeline, and generating page-level and overall statistics.

Obtain an api key by following the readme, set up the dot env local file, and run npm run dev to verify the api automation workflow works.

Toggle database saving to true, configure database name and uri, and save results to the database; filter today's samples by url containing continued to compare performance from 88 to 91.

Learn how purgeCss reduces the bootstrap mean.css file size by removing unused styles, shrinking from 228 kB to about 15 kB in production.

Explore how bundlers like Webpack, Rollup, Parcel, and Turbo Pack combine and minify css and js. See production builds bundle, remove comments and empty lines, and reduce transfer size.

Boost your website performance by measuring with PageSpeed Insights on production, optimizing resources like HTML, CSS, JavaScript, fonts, and images, and using critical rendering path to achieve faster page loads.