Skip to content

Files

Latest commit

 

History

History
46 lines (30 loc) · 2.28 KB

015-travel-blog-optimization.md

File metadata and controls

46 lines (30 loc) · 2.28 KB

Project: Optimizing a Travel Blog for Performance

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.

Project Specifications

1. Setup the Blog

  • 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.

2. Optimization Techniques

  • 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.

3. Performance Analysis

  • 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.

4. Feedback and Iteration

  • 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.