Cloudinary Blog

Advanced Techniques You Can Use Now to Improve Your Site’s Performance

 Top Transformations You Can Use to Improve Site Performance Now

Everyone wants a great website. Few know what it takes.

Building engaging websites and apps are often primary goals for developers and marketers. The key to increasing your site’s performance is making your content relevant and engaging, and your website fast and fun to use.

However, with serving dynamic content comes a challenge—speed. Many see their site slow down as they add more features and functionality. Fonts, JavaScript, CSS, and HTML are significant factors, but images and videos contribute the most to bloating, accounting for 75% of page content.

Recently, resident image optimization expert and Senior Solutions Engineer here at Cloudinary, Simon Tetelbaum, presented at our How to Optimize for Page Load Speed webinar, where he discussed how best to optimize the images and videos on your site to enhance performance.

Webinar
How to Optimize for Page Load Speed

Challenges discussed were:

  • Measuring content to build and maintain a cutting-edge site
  • Adapting media for responsive delivery across different devices
  • Handling multiple image types across various browsers

When it comes to speed, you need to be able to measure the content on your site and find out how it affects your page load time. Simon recommended a few leading-edge tools you can start using today. The best part? They’re all free.

  • Speed Curve: monitors the front-end performance and build of your site to show the most impactful areas. Compares your site to others and shows areas of improvement.
  • Webpagetest.org: run a website speed test and break down how your site content is loading. Includes detailed optimization recommendations.
  • Google Lighthouse: an open-source, automated tool for improving the quality of your web pages.

Adapting media for responsive delivery across different devices is another challenge Simon discussed. For instance, automatically delivering a reduced image size to a user on mobile versus a user viewing from a laptop can drastically improve the mobile user experience. One, if not the most, effective approach is to use SrcSets. SrcSets allow you to leverage multiple images and size attributes to help the browser determine which image(s) to request.

Services like Cloudinary help make this process easier. Cloudinary uses advanced techniques to automate optimization and responsive imagery.

  • f_auto: automatically converts delivered images to WebP and JPEG-XR on supported browsers to save bandwidth and optimize delivery time.
  • q_auto: automatically calculates the optimal quality for images. In other words, it finds the smallest possible file size that won’t affect perceptual quality.
  • g_auto: automatically decides which part of the image to keep and which to crop or remove.
  • w_auto: deliver the largest or highest-resolution images only to those users whose device resolution or browser size requires it.
  • dpr_auto: the ratio between physical pixels and logical pixels. Use the dpr parameter to set the DPR value of the delivered image.

See it in action!

To Sum It All Up

Many factors influence your site performance. Format, compression, and automatic responsiveness are what will most meaningfully impact your page speed.

So, how’s your site stacking up? Are you delivering content to your potential customers in optimal formats? If not sign up free with Cloudinary today. You’ll find out what optimized performance can do for your website—and your business.


Further Reading on Image Optimization

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more