>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #2661588. --> Reported by: [twistor](https://www.drupal.org/user/473738) Related to !7 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>To quote @deviantintegral:</p> <blockquote><p>For Drupal 7, we found that the S3 API was very slow for image styles - on the order of several seconds by the time all of the stat and write calls were done. What I ended up doing was initially serving the image style from a local temp file, and then uploading the file to S3 in a shutdown handler. We should investigate something similar here:</p> <p><a href="https://github.com/justafish/drupal_amazons3/blob/7.x-2.x/amazons3.module#L101">https://github.com/justafish/drupal_amazons3/blob/7.x-2.x/amazons3.module#L101</a></p></blockquote> <p>Setting <code>'cache' =&gt; TRUE</code> should help for some of this, but image styles are indeed still slow to generate.</p> <p>The original issue came up in the flysystem_s3 issue queue, <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/flysystem_s3/-/work_items/2528630" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/flysystem_s3/-/work_items/2528630</a></span>. It was later also reported in the flysystem_gcs issue queue, <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/flysystem_gcs/-/work_items/3285371" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/flysystem_gcs/-/work_items/3285371</a></span>.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>Taken from <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/flysystem_gcs/-/work_items/3285371" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/flysystem_gcs/-/work_items/3285371</a></span>:</p> <blockquote><p> 1. set one image field to have multiple values and GCS as storage. Also, for faster testing, you can disable the required alt field.<br> 2. set an image style or responsive image style for displaying the image field value.<br> 3. upload at least 10 images. (this is the first place where the slowdowns occur)<br> 4. click save.</p> <p>After clicking save the user is redirected to the canonical node page, so the image styles are generated (probably). The user has to wait until every image is generated to get a response from the server. This takes more than 30 seconds sometimes. If a site has responsive image styles, then this process will run even longer because of the multiple image styles for multiple breakpoints. Also, if someone generates jpg and webp variants (with imageapi_optimize_webp), then again this needed time multiplies until infinity. </p></blockquote> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Don't wait until the remote upload is complete before sending the generated image derivative to the client:</p> <ol> <li> If an non-existent image derivative is requested (any path starting with <code>styles/</code>), a temporary URL is generated to a Flysystem Drupal route. This URL is returned to the browser instead of the direct image URL.</li> <li> The browser requests this URL to get the image.</li> <li> A check is done to make sure the source image exists. If it doesn't, a 404 is returned and no further action is taken</li> <li> If in the meantime the image derivative was created (should be rare), redirect to the remote adapter URL.</li> <li> If the image still doesn't exist, generate the derivative and store it locally in a temporary folder. The temporary file is now sent to the browser without having to go through the remote adapter. Once the response is sent and the image is displayed in the browser, Drupal will copy the temporary image to the remote adapter.</li> <li> If the image is requested again and the temporary file still exists, that file is returned, which saves us a trip to the remote adapter.</li> <li> Once the temporary file is copied to the remote adapter, that URL will be sent to the browser instead of the Flysystem Drupal route.</li> </ol> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Review the proposed implementation</li> <li>Write tests</li> <li>Update the documentation</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>None.</p> <h3 id="summary-api-changes">API changes</h3> <p>None.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None.</p> <h3 id="summary-release-notes">Release notes snippet</h3> <p>None.</p>