Objective:
Optimize an existing travel blog to improve its performance by applying resource minimization techniques and performance analysis. This project will allow students to understand how to optimize media files, CSS, and JavaScript and to monitor improvements using tools like Lighthouse and WebPageTest.
- Start with a basic version of a travel blog that includes several pages and high-resolution images to simulate a media-heavy site.
- The baseline blog site includes:
- Homepage with featured images for recent posts.
- Individual post pages with high-resolution images.
- Navigation menu linking to different travel categories.
- Non-optimized CSS and JavaScript files.
-
CSS and JavaScript Minification
Use minification tools such as Terser and CSSNano to reduce the size of CSS and JavaScript files. -
Image Optimization
Convert images to modern formats like WebP to reduce file sizes without sacrificing visual quality. Also, implement lazy loading to load images only when they are needed. -
Resource Caching
Configure client-side caching for static assets, such as images, CSS, and JavaScript, to reduce load times. -
File Compression
Enable gzip or Brotli compression on the server to further reduce the file size of assets sent to the browser.
-
Lighthouse
Use Lighthouse to assess the initial performance of the blog and gather a list of optimization suggestions. Record the performance, accessibility, and SEO scores before optimization. -
WebPageTest
Test the loading speed of the blog with WebPageTest to gain insights into caching and static asset optimizations. -
Compare Results
After completing optimizations, retest with Lighthouse and WebPageTest to document performance improvements.
- Following the initial round of optimizations, analyze the Lighthouse and WebPageTest results. Based on the feedback, apply further improvements, such as reducing JavaScript execution times or eliminating render-blocking resources.