Saving new Image media entity takes a long time on sites with many Image Styles

Created on 23 September 2024, about 2 months ago

Problem/Motivation

On a site with over 250 image styles that are using Crop API via Focal Point, saving a new image media entity could take 15 to 25 seconds. I disabled `flush_derivative_images` per the README for decoupled sites and this reduced the time to 4 seconds.

Steps to reproduce

  1. Install Focal Point / Crop API
  2. Create 250+ image styles that all use the Focal Point transformation
  3. Create a new Image media entity
  4. On save of that event, use a stopwatch to track how long it takes to get the success message that the image entity was created.

Proposed resolution

Update postSave so that image_path_flush is only called when updating an existing Image media entity and not when creating a new one. While this won't save on performance during updates, it will at least save on performance during the create workflow and updates are far less frequent than creations.

Remaining tasks

User interface changes

n/a

API changes

Data model changes

n/a

✨ Feature request
Status

Active

Version

2.4

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @capellic
  • πŸ‡«πŸ‡·France DrDam

    As a note, I think it's necessary to question the need to have 250 different image styles in the project, just for the issue of storage space consumption (green-it / eco-design / cost / greenwashing...).

    Did you use sort of CDN or S3-like storage services ? In this case, the disabling of the flush_derivative_images, in settings are the way to fix the issue.

    In crop entity perspective, there is way to detect if the newly created crop is created from a "new uploaded image" or because someone change the ImageStyle configuration to adding crop in it (and a derivative image already exist for the source and must be flushed).

  • πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas

    Thanks @drdam,

    Did you use sort of CDN or S3-like storage services ? In this case, the disabling of the flush_derivative_images, in settings are the way to fix the issue.

    We are hosting on Pantheon which sits behind the Fastly CDN. Sounds like disabling flush_derivative_images is recommended with this setup?

    In crop entity perspective, there is way to detect if the newly created crop is created from a "new uploaded image" or because someone change the ImageStyle configuration to adding crop in it (and a derivative image already exist for the source and must be flushed).

    I've read this a couple of times and I think that you are missing the word "no" in the above sentence, that "... there is no way to detect...". Can you clarify?

    As a note, I think it's necessary to question the need to have 250 different image styles in the project, just for the issue of storage space consumption (green-it / eco-design / cost / greenwashing...).

    It's actually half that but point well taken. I dream of the day we can set one Image Style and Fastly's IO product will use field data to determine the optimal responsive image set.

  • πŸ‡«πŸ‡·France DrDam

    We are hosting on Pantheon which sits behind the Fastly CDN. Sounds like disabling flush_derivative_images is recommended with this setup?

    that's what I would recommend. The "derivative cache" are supported by the CDN, so no need to "force drupal" to handle it.

    I've read this a couple of times and I think that you are missing the word "no" in the above sentence, that "... there is no way to detect...". Can you clarify ?

    You are right, I fix my message. There is no way

  • πŸ‡ΊπŸ‡ΈUnited States capellic Austin, Texas

    Thanks @drdam, I appreciate the assistance.

    that's what I would recommend. The "derivative cache" are supported by the CDN, so no need to "force drupal" to handle it.

    I just tested this and it doesn't appear to be working for me as you describe.

    1. Created a new node with a new image media entity.
      1. Uploaded a panoramic image so its easy to recognize when changing the focal point for the 4:3 use case.
      2. Defined the focal point on the far left of the panoramic image
    2. Saved the node, viewed the node, looks fine.
    3. Update the media entity to define a cropping focal point to the far right.
    4. Refreshed the page/node that the media entity appears on, no change to the cropping of the image, it appears that the stored in Fastly CDN has not been purged to then grab the updates version.
Production build 0.71.5 2024