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

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more