Tools to Measure Performance
Before you start optimizing your site, it is essential to know where you are and where you can go. Tools like Lighthouse and PageSpeed Insights help diagnose bottlenecks and indicate good practices. A valuable tip is to test your site in an incognito tab, without active extensions — this ensures that nothing interferes with the measurement and better simulates the real user experience.
Structure
The way you structure the site directly impacts performance. In Framer, for example, following good practices for layers and conscious use of Div and Sections makes a big difference. A well-structured site loads faster, is easier to maintain, and performs better on different devices.
Videos
Videos are inherently heavy elements — and when poorly optimized, they can degrade your site's performance. Use tools like HandBrake or FFmpeg to compress files and, whenever possible, host them on platforms like YouTube or Vimeo. Framer, for example, displays videos always in original resolution, which can be a problem on slow networks.
Another important tip: videos on loop and without controls should be silent and lightweight, so they do not consume bandwidth unnecessarily. And remember: each video should have a cover (thumbnail), which also contributes to SEO.
Images
Images are one of the main factors in slowdowns on poorly optimized sites. Therefore, prefer modern formats like WebP and AVIF, which offer high quality with reduced sizes. Avoid uploading images larger than necessary and, if possible, control the size by device. For logos and icons, use SVG whenever possible — they are lightweight, vectorial, and scale well.
Text Styles
SEO and performance go hand in hand. Avoid using multiple H1s on the same page. Configure all heading levels (H1 to H6) and paragraph styles correctly. This helps not only with site loading but also with scanability and indexing by Google.
Accessibility Tags
A site's performance is also linked to its semantic structure. Use tags like section, header, footer, and main correctly. Additionally, use attributes like aria-label for buttons, contributing to accessibility and making your HTML cleaner and more understandable.
Codes
Less is more. Avoid excessive use of embedded codes (embed) and third-party scripts that are not really necessary. Each line of code you add can represent milliseconds more in loading — and this accumulates quickly.
Animations
Animations bring life to the design, but should be used sparingly. Overdoing interactions can compromise performance, especially on older devices. Avoid animating many elements right at the top of the page and use effects that only appear when the user scrolls down, such as those based on scroll. Tools like Appear effects can be your allies if used properly.
Components
The repetition of elements in the project is inevitable, which is precisely why componentizing is so important. Use reusable components whenever possible — they reduce the final size of the site, help with organization, and improve loading time.
Fonts
Choose your fonts carefully. Prefer those from Google Fonts, which are already optimized for the web. Try to stick between weights like Light and Extra Bold to avoid loading too many files. And make sure that your tool (like Framer) is using font-display: swap, to avoid that famous white flash before the text appears.
Site Settings
Before publishing, review the basic metatags: title, description, favicon, and social sharing image. Besides improving visibility on social networks, this information helps the site rank better in search engines.
External Embeds and iFrames
Add external content, such as HubSpot forms or 3D graphs with Spline, carefully. Although useful, these resources are often loaded asynchronously and can impair the loading time of the main page.
Shadows and Blurs
Shadows and blurs give depth to the design, but they can become performance villains. Use them sparingly and, whenever possible, keep blur values below 10. This avoids stuttering during scrolls and animations, especially on less powerful devices.