Optimizing Site Performance with Lighthouse

1. Running Your First Lighthouse Audit

The first step in optimization is measurement. You can't improve what you don't measure. For this, we'll use Google Lighthouse, an open-source, automated tool for auditing the quality of web pages.

Lighthouse analyzes your page and generates a report on several categories, but we will focus on Performance. It simulates how your page loads on a mid-range mobile device with a throttled network connection, giving you a realistic picture of user experience.

To see how it works, let's watch a short video that walks through the process.

Your Turn: Run the Audit

Now, let's run an audit on the Framer site you published in the last lesson. It's crucial to do this in an environment free from interference.

1. Open a new Incognito Window in Chrome. This prevents your browser extensions from affecting the performance results.
2. Navigate to your live Framer subdomain (e.g., yourproject.framer.website).
3. Open Developer Tools by right-clicking anywhere on the page and selecting Inspect (or using the shortcut Cmd+Option+I on your Mac).
4. Click the Lighthouse tab at the top. You might need to click the >> arrows to find it.
5. Configure the audit:
   • Mode: Keep it on Navigation (Default).
   • Device: Select Mobile. Mobile performance is typically the bigger challenge and what Google prioritizes.
   • Categories: Check only Performance.
6. Click the "Analyze page load" button and wait for the report to generate.

You will now see your performance score, a number from 0 to 100, with a corresponding color:

• 90-100 (Green): Good. Your site is performing well.
• 50-89 (Orange): Needs Improvement. There are clear opportunities to enhance speed.
• 0-49 (Red): Poor. Your site has significant performance issues.

Don't be discouraged if your score isn't in the green zone yet. Framer sites are fast by default, but our custom content and design choices always leave room for optimization. Our goal now is to understand why you got that score.

2. Deconstructing the Performance Report

The number is just a summary. The real value of Lighthouse is in the details it provides. The score is calculated from a weighted average of several metrics, but we'll focus on the three most important ones: the Core Web Vitals.

Here’s a quick summary of the Core Web Vitals:

• Largest Contentful Paint (LCP): Measures loading performance. It's the time it takes for the largest image or text block in the viewport to become visible. A slow LCP is often caused by large, unoptimized images.
• Total Blocking Time (TBT): Measures interactivity. It's the total time the page was blocked, preventing the user from clicking, scrolling, or typing. High TBT is usually caused by heavy JavaScript execution, including complex animations.
• Cumulative Layout Shift (CLS): Measures visual stability. It quantifies how much unexpected layout shift occurs as the page loads (e.g., text moving as an image loads in). High CLS is often due to images without defined dimensions or fonts loading late.

Your Lighthouse report also contains two helpful sections below the metrics:

• Opportunities: Specific, actionable suggestions to improve your page load speed (e.g., "Properly size images").
• Diagnostics: Additional information about how your page adheres to web development best practices.

3. Implementing Framer-Specific Optimizations

Now for the practical part: improving your score. Since you're using Framer, many low-level optimizations are handled for you. Our focus is on the choices you control as a designer. The following video is an excellent, Framer-focused guide to optimization.

Based on the video and best practices, here is your optimization checklist.

✅ 1. Re-evaluate Your Images (Biggest Impact)

Images are the most common cause of slow sites. While Framer automatically converts images to modern formats like WebP, it can't fix an image that was excessively large to begin with.

• Rule: Resize and compress images before you upload them to Framer.
• Resize: An image rarely needs to be wider than 2000px, even for a full-width background. For smaller cards or sections, 800-1200px is often sufficient. Resize them in Photoshop or another editor first.
• Compress: Use a free tool to losslessly compress your images after resizing.
  • TinyPNG: A simple web-based tool for PNG and JPEG files.
  • ImageOptim: A free Mac app that is excellent for this. You can drag and drop your images to compress them.

✅ 2. Be Selective with Animations and Effects

Framer makes it easy to add beautiful animations, blurs, and shadows. However, these effects are computationally expensive for the browser to render and can significantly increase your TBT.

• Rule: Use effects for emphasis, not decoration.
• Audit Your Animations: Do you have multiple elements animating on screen at the same time? Consider staggering them or simplifying the effects.
• Audit Your Effects: Glassmorphism (blurry backgrounds) and complex drop shadows look great but can hurt performance, especially on mobile. Use them sparingly on key elements.

✅ 3. Flatten Your Layer Structure (DOM Reduction)

Given your computer science background, you can think of the Document Object Model (DOM) as the tree-like data structure that represents your webpage. A simpler, "flatter" tree is faster for the browser to process. In Framer, every stack (or group) you create adds another level of nesting to this tree.

• Rule: Avoid excessive nesting of stacks.
• Audit Your Layers: Open your Layers panel in Framer. Do you have sections with stacks inside of stacks inside of stacks? See if you can achieve the same layout with fewer nested containers. A clean layer panel often leads to a faster site.

✅ 4. Optimize Video and Third-Party Embeds

Video files are massive. If you've used any, ensure they are optimized.

• Rule: Embed from a third party unless a short, silent, looping video is essential for the design.
• Embed vs. Host: For longer videos, embed them from YouTube or Vimeo. This offloads the heavy lifting to their servers.
• Compress: If you must host a video directly in Framer (e.g., for a background), make sure it is a highly compressed MP4 file, as short as possible, and at the lowest resolution that still looks good.

Activity (15-20 minutes)

1. Open your Framer project.
2. Go through the checklist above and identify at least one optimization to make in each category that applies to your site.
   • Find your largest image, optimize it using ImageOptim or TinyPNG, and re-upload it.
   • Find a section with a complex animation or heavy use of blur, and simplify it.
   • Examine your layers panel for a deeply nested section and try to rebuild it more efficiently.
3. Publish your changes to update your live site.
4. Open a new Incognito window and run the Lighthouse audit again.
5. Compare your new score to your old one. You should see a tangible improvement!

Conclusion

Congratulations on completing your website performance audit! You've moved beyond just being a designer and have acted as a performance engineer, a crucial skill for creating professional web experiences.

Key Takeaways:

• Google Lighthouse is the industry-standard tool for measuring site performance, accessibility, and more.
• The Core Web Vitals (LCP, TBT, CLS) are the most critical metrics for measuring real-world user experience.
• The most effective optimizations you can make in Framer are optimizing images before upload, being selective with animations and effects, and maintaining a clean, flat layer hierarchy to reduce DOM complexity.
• Performance optimization is an iterative process of measuring, fixing, and re-measuring.

Preview of the Next Lesson:
With your web hub now designed, published, and optimized, it's time to shift our focus to what you'll feature on it. In our next module, "Product Design I: Wallpapers & Posters," we will begin creating your first digital products. You'll learn to design a geometric desktop wallpaper in Figma and a typographic wallpaper in Photoshop, applying your design principles to a tangible, marketable asset.