Speed optimization techniques

Speed optimization techniques are strategies to enhance website performance, ensuring quicker load times and improved user experience, crucial for retaining visitors and boosting SEO rankings.

Webflow Optimization Case Study №1

Tip: When optimizing website speed, it's crucial to watch out for excessive use of gradients. We encountered this challenge during our work with RelayPay, where their website initially had an abundance of gradients.

Outcome: Through careful optimization and redesign, we streamlined the usage of gradients, ensuring the website not only looked visually appealing but also performed optimally. This led to a significant improvement in site speed and overall user experience.

1) Compressing images and media

Images can heavily influence a website's load time. By compressing images, you reduce file size without compromising quality, ensuring faster page loads.

Tools like TinyPNG, ImageOptim, Squoosh, or Webflow's built-in image optimization can help significantly reduce image sizes without perceptible quality loss. For example, a high-quality product image initially at 5MB can be compressed to below 1MB, saving precious load time.

Tip from our Webflow developer:

Striking the right balance between image quality and file size is essential, especially when dealing with a large number of images. Optimizing your images yourself can help maintain a visually appealing website without sacrificing loading speed.

Step-by-step guide on compressing images and media

1. Assess your current media

Scan your website for all media elements, including images, videos, and other multimedia. Identify which media files are the largest and potentially causing slowdowns using tools like GTmetrix or Google’s PageSpeed Insights.

2. Choose the right image format

JPEG. Best for photographs with gradients.

PNG. Ideal for images with transparency and graphics.

SVG. Perfect for vector-based images, such as icons and logos.

WebP. A modern format that provides superior compression for images. In 2022, Webflow finally started supporting it and added an automatic conversion tool.

3. Image compression tools

TinyPNG. An online tool ideal for compressing JPEG and PNG images without losing quality.

ImageOptim (Mac) or FileOptimizer (Windows). Desktop applications that optimize images by removing excess metadata.

4. Implement lazy loading

Enable lazy loading for images below the initial screen view. Webflow now defaults to lazy loading for new images, but avoid lazy loading images visible on the first screen to prevent delays.

5. Avoid using images as backgrounds

Never use images as backgrounds for elements, as they can't be optimized for loading efficiency. Instead, use the tag with the "object-fit" property for better performance.

6. Use SVGs for vector graphics

Opt for SVGs for vector images and icons whenever possible, as they are lightweight and offer versatility for animations.

7. Embed small SVGs directly

For small SVGs, embed the code directly into the page using the "HTML Embed" element to reduce additional client requests.

Note: Be cautious with large SVGs and avoid embedding them this way to prevent longer initial page loads and issues with DOM size.

2) Optimizing background videos

Background videos can be bandwidth-intensive. They can provide a dynamic feel but need careful handling.

Use short, looped clips without audio, and ensure they are compressed. Another technique is using a placeholder image or lazy loading until the user interacts.

You can also use an oldie-but-goodie HandBrake or another video compressor to reduce file sizes. Providing multiple formats (e.g., MP4 and WebM) ensures broader compatibility across browsers.

Step-by-step guide on optimizing background videos

1. Determine necessity

Before adding a background video, ask: "Is this video necessary for user experience or storytelling?" If not, consider high-quality images or dynamic graphics.

2. Trim and edit

Keep your background videos short, ideally between 10-20 seconds. Use video editing software like Adobe Premiere Pro or DaVinci Resolve to trim any excess footage and ensure the video is loop-friendly.

3. Select the right format

Use MP4 with the H.264 codec for broad compatibility and good compression. Consider WebM as a secondary format for browsers that support it, as it often offers better compression than MP4.

4. Compress the video

Use a tool to compress the video. This reduces file size without substantial quality loss. Set a constant bitrate that is appropriate for the content of the video. For most background videos, 1,000 - 2,500 kbps should suffice.

5. Limit resolution

A 4K video as a background is overkill and will be heavy. Aim for 1080p or even 720p, depending on the visual complexity and importance of the video.

6. Mute and remove audio

Background videos shouldn't have audio. Removing the audio track can decrease the file size and prevent unintended noise on your website.

3) Utilizing Webflow's own CDN

A CDN (Content Delivery Network) stores copies of your site on multiple servers worldwide.

Webflow's integrated CDN (SSL CDN) ensures your content is delivered from the closest server to your visitor, reducing latency and accelerating load times.

This reduces the content's travel distance, slashing load times. Businesses like Deliveroo have utilized CDN solutions effectively to quickly serve global customers.

Step-by-step guide on utilizing Webflow's CDN

1. Choose the right plan

Ensure you’re on a Webflow plan that supports CDN. All paid hosting plans (Basic, CMS, Business) automatically include CDN hosting.

2. Set up your custom domain

If you're using a custom domain, make sure it's properly connected to Webflow to leverage the CDN.

3. Upload assets directly to Webflow

Use Webflow's assets panel for your site's assets (images, documents, fonts, etc.). This ensures they are served via the CDN. Avoid linking to external assets if you want to take advantage of the CDN speed.

4. Optimize your assets

Before uploading, compress and optimize images, videos, and other assets. Even though Webflow’s CDN will make loading faster, starting with a smaller file size ensures the best performance.

5. Use Webflow's responsive image feature

When you upload images to Webflow, it automatically generates responsive variants. This ensures the right-sized image is delivered to various devices via the CDN.

6. Publish your site

After setting everything up, make sure you publish your site to the custom domain to take full advantage of the CDN. Webflow automatically handles the distribution of your assets across the CDN's servers worldwide.

7. Check the performance

Use tools like Google’s PageSpeed Insights, GTmetrix, or Pingdom to see the load time improvements after your assets are served via the CDN.

4) Reducing custom code

While custom code offers flexibility, excessive or poorly written scripts can bog down a site. Audit and refine your custom code. Remove any unused scripts, ensure efficient execution, and always prioritize native Webflow functionalities over custom solutions when possible.

Sites like GitHub or CodePen often showcase lightweight solutions to common problems. Always compare the speed impact of custom solutions against native Webflow tools. By trimming excessive JavaScript or CSS, you ensure streamlined performance.

Tip from our Webflow developer:

"If possible, avoid adding custom code altogether. If it is still necessary to add it, then use pure JavaScript (i.e., without using a large number of third-party libraries). This keeps your codebase lean and offers better control, ensuring long-term efficiency and reliability."

Step-by-step guide on reducing custom code

1. Audit your current custom code

Identify all the custom code snippets present on your website. This includes inline scripts, linked external scripts, and embedded widgets. Use browser developer tools, or extensions like BuiltWith, to help inspect and locate custom scripts.

2. Prioritize essential vs. non-essential code

Determine the purpose of each custom code snippet. Is it vital for functionality, design, or analytics? Remove any code that no longer serves a purpose, e.g., scripts from old plugins or tools you no longer use.

3. Look for native alternatives

Platforms like Webflow often roll out updates. Check if the platform now offers a native solution for what you initially achieved using custom code. Transition to these native solutions wherever possible, as they're usually more optimized and better integrated with the platform.

4. Optimize and minify your code

If you have custom JavaScript, CSS, or HTML that's verbose, consider minifying it using tools like UglifyJS for JavaScript or CSSNano for CSS. Ensure you keep original, non-minified versions stored safely for future editing.

5. Consolidate multiple scripts

If there are multiple custom scripts serving similar purposes, consider consolidating them into a single script to reduce server requests. This is especially useful for custom CSS stylesheets.

5) Effective asset management

Keep your project's assets tidy. Unlink and delete any unused assets from Webflow's asset manager.

This not only speeds up the designer interface but ensures that the published site only loads necessary files, enhancing speed.

Tools like Asset CleanUp for WordPress sites exemplify the importance of organized asset management.

Step-by-step guide on effective asset management

1. Organize your assets

Categorize assets based on type (images, videos, fonts, documents, etc.). Create specific folders or directories for each category, e.g., 'Blog Images', 'Product Videos', 'E-books', etc.

2. Name conventionally

Adopt a consistent naming convention. For instance, use descriptive names like 'homepage-header.jpg' rather than 'image1.jpg'. Avoid special characters and spaces in file names to ensure compatibility across platforms.

3. Optimize image assets

Use tools like TinyPNG or ImageOptim to compress images without sacrificing quality. Convert images to modern formats like WebP where supported.

4. Version control

Especially important for larger teams or sites, use versioning systems (like Git) to track asset changes, making it easier to revert or understand updates.

5. Centralize asset hosting

Whenever possible, use a single platform or location for asset hosting to avoid scattered resources and make management easier. Consider cloud storage solutions like Amazon S3 or Cloudinary, especially for larger assets or for scalability.

6) Backlinking and Webflow

Backlinks are external sites linking to yours. Quality backlinks can improve your site's credibility and SEO ranking.

However, ensure linked content, especially media from external sources, is optimized. Webflow users should be wary of embedding heavy external media.

Limit embeds, ensure they’re necessary, and always compress and optimize content you control.

Step-by-step guide on backlinking and Webflow

1. Prepare your Webflow site

Ensure your Webflow site's pages are optimized with relevant content, metadata, and appropriate keywords. Use Webflow’s SEO settings to set page titles, meta descriptions, and Open Graph settings.

2. Create high-quality content

Design and develop content that others will naturally want to link to, such as informative articles, infographics, and engaging videos.

3. Identify potential backlink opportunities

Research competitors' backlinks. Look for industry-specific directories, forums, or blogs where your site or content could be mentioned.

4. Guest blogging

Offer to write articles for reputable blogs or publications in your niche. Include a link back to your Webflow site in your bio or within the content where relevant.

5. Use social media

Share your content on all your social media channels. Encourage others to do the same. This can lead to natural backlinks. Webflow's Open Graph settings can be utilized to optimize how your content appears when shared on platforms like Facebook.

7) Prioritizing above-the-fold content

Above-the-fold content is what users see first, without scrolling. By optimizing and prioritizing this content, your site can display vital information quickly, even if other elements take longer to load. Lazy load below-the-fold assets, ensuring a smoother and more efficient user experience.

Step-by-step guide on prioritizing above-the-fold content

1. Identify above-the-fold content

Understand what content users see first when they visit your website. This may vary based on device type (desktop, tablet, mobile) and screen resolutions. Tools like Google's PageSpeed Insights can help pinpoint above-the-fold content.

2. Prioritize critical CSS

Identify and inline the CSS necessary to style above-the-fold content. This means the essential CSS loads directly within the HTML document. Defer or asynchronously load non-critical CSS that isn’t required for the initial view.

3. Defer JavaScript

JavaScript can block the DOM from being built. Defer scripts that aren't necessary for rendering above-the-fold content. Use the defer or async attribute in script tags to ensure they don’t block rendering.

4. Optimize images

Compress above-the-fold images and use modern formats like WebP. Consider using the lazy-loading attribute to delay the loading of images that aren’t immediately visible.

5. Limit above-the-fold elements

Reduce the number of elements that must be loaded above the fold. This means fewer HTTP requests and a faster render time. Avoid large sliders or carousels, which can slow down the initial load time.

6. Minimize server requests

Limit the number of resources (CSS, JS, images) that need to be fetched before displaying the above-the-fold content. Combine CSS or JS files where possible.