GASによるWebアプリの処理を高速化したい

実現したいこと

ここに実現したいことを箇条書きで書いてください。

スタンドアロン型のGASでデプロイしたウェブアプリの処理を高速化したい

前提

・Drive内に保存されてる画像をブラウザに表示するウェブアプリです。
・該当のファイル数は3000~4000、今後も増える見込み
・ユーザーに何かしらの操作を求めたくない（URL踏めば画像一覧できるようにしたい）

発生している問題・エラーメッセージ

エラーは出ないですが、表示まで時間がかかるためどうにか高速化したいです。

該当のソースコード

Javascript
function doGet(e) {
  var folderId = 'DriveｰID'; // ドライブのIDを指定
  var folder = DriveApp.getFolderById(folderId);
  var files = getAllFiles(folder);
  files.sort(function(a, b) {
    return a.getDateCreated() < b.getDateCreated() ? 1 : -1;  // 新しい順にソート
  });
  var template = HtmlService.createTemplateFromFile('imageTable');
  template.data = files;
  return template.evaluate();
}

function getAllFiles(folder) {
  var files = [];
  var allFiles = DriveApp.searchFiles('mimeType contains "image/"');
  while (allFiles.hasNext()) {
    var file = allFiles.next();
    var parents = file.getParents();
    while(parents.hasNext()) {
      var parent = parents.next();
      if (parent.getId() === folder.getId()) {
        files.push(file);
        break;
      }
    }
  }
  var folders = folder.getFolders();
  while (folders.hasNext()) {
    var subfolder = folders.next();
    if (subfolder.getName().indexOf('hoge') === -1) {  // 特定のテキストを含むフォルダを部分一致で除外
      files = files.concat(getAllFiles(subfolder));
    }
  }
  return files;
}

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .image-item {
      margin: 1px;
      width: 100%;
      max-width: 300px; /* 画像の長辺を300ピクセルに変更 */
      word-wrap: break-word; /* 文字がテーブルからはみ出さないようにする */
    }
    .image-item img {
      width: 100%;
      height: auto;
      max-width: 300px; /* 画像の長辺を300ピクセルに変更 */
    }
  </style>
</head>
<body>
  <div class="image-container">
    <? for (var i = 0; i < data.length; i++) { ?>
      <div class="image-item">
        <img src="https://lh3.google.com/u/0/d/<?= data[i].getId() ?>" alt="Image"><br>
        <a href="<?= data[i].getUrl() ?>"><?= data[i].getUrl() ?></a><br>
        <?= data[i].getParents().next().getParents().next().getParents().next().getName() + '-' + data[i].getParents().next().getParents().next().getName() + '-' + data[i].getParents().next().getName() ?>
      </div>
    <? } ?>
  </div>
</body>
</html>

試したこと

フォルダ名を取得して表示する処理が重たいのだろうと思ったのですが、ユーザーの要望でどこに格納されてるファイルなのかテキストで表示してほしいとのことで、他に手段ないか調べたのですが、お手上げでしてご助力いただけますと幸いです。
そこの処理に限らず全体を通して表示までの時間を高速化する方法がありましたら、ご教示いただきたいです。

補足情報（FW/ツールのバージョンなど）

私が本業エンジニアではないため、chatGPTやリファレンスなどを読み込み作ったスクリプトなので、本職の方からするとツッコミどころが多いかもしれませんが、お目こぼしいただけますと幸いです。

行動規範の内容に同意します

回答1件

例えば、次のようにすると少し速くなるかもしれません。

JavaScript
1function getAllFiles(folder) {
2  var files = [];
3  var allFiles = folder.searchFiles('mimeType contains "image/"'); // ★修正
4  while (allFiles.hasNext()) {
5    files.push(allFiles.next()); // ★修正
6  }
7  var folders = folder.getFolders();
8  while (folders.hasNext()) {
9    var subfolder = folders.next();
10    if (subfolder.getName().indexOf('hoge') === -1) {  // 特定のテキストを含むフォルダを部分一致で除外
11      files = files.concat(getAllFiles(subfolder));
12    }
13  }
14  return files;
15}