Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Images blocking rendering

See original GitHub issue

I have found another issue when testing these components some more. Each <Image> <Transformation> component is blocking the rendering of whole app.

Each image add about 120-300ms when testing. This means that having around 16 images on a single page adds between 3-5 seconds of page loading.

I can’t find the exact cause but from a quick look it seems to be related to calculating the imagesize and URL.

screen shot 2017-05-25 at 14 41 07

And this happens every time the components are loaded.

For example if I have 16 images on start page

Start page (+5sec blocked loading) -> Click on subpage (loads fast no images) -> Click back to start page (16 images already downloaded but page freezes for 5 sec anyway).

This makes cloudinary-react unusable at the moment.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:5
  • Comments:33 (10 by maintainers)

github_iconTop GitHub Comments

tockercommented, Jun 6, 2019

@slackday @wallawe @edwardsilhol @jimmiebtlr @angrytoad @nryoung Version 1.1.1 was published today. It should fix the problem.

I’d appreciate your feedback!

nryoungcommented, Jun 5, 2018

@strausr I unfortunately couldn’t replicate it exactly in the example app, but in a real application with tons of DOM elements the transformations slow down significantly, eg. ~500ms per transformation.

Besides this being the normal creation time for on-the-fly transformations, you will notice even in the example app it blocks rendering of any of the DOM elements until the all of the transformations are complete. This shouldn’t block rendering of non transformation elements.

Read more comments on GitHub >

github_iconTop Results From Across the Web

9 tricks to eliminate render blocking resources
By reducing render blocking resources, you can shorten the critical rendering path and reduce page load times, thus improving UX and SEO.
Read more >
How To Eliminate Render Blocking Resources
Images are not render blocking. They can delay metrics like the Largest Contentful Paint, but the rest of the page will still render...
Read more >
Lighthouse: Eliminate render-blocking resources
Render -blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen.
Read more >
How To Eliminate Render-Blocking Resources
Discovering critical render-blocking resources and repairing them can significantly boost your SEO. Read on to learn how.
Read more >
How to Eliminate Render-Blocking Resources | WP Buffs
This guide will walk you through how to eliminate render-blocking resources and why doing so will help your website.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found