Loading Optimizations

Running Chrome’s Lighthouse on an app and there are some recommendations that I think could be implemented:

Anvil Images

Mark the made-with-anvil.png as loading="lazy"
Update made-with-anvil.png to .webp to reduce size.

Use HTTP/2

Enable HTTP/2 for resource loading
in a blank app, there are 15 requests over http/1.1

  1. nvgvbg.anvil.app
  2. …css/runner-v3.min.css
  3. …css/daterangepicker.min.css
  4. …css/font-awesome.min.css
  5. …lib/jquery.min.js
  6. …lib/jquery-migrate.min.js
  7. …img/logo-35.png
  8. …img/made-with-anvil.png
  9. …lib/moment.min.js
  10. …lib/moment-timezone-with-data-10-year-range.min.js
  11. …lib/daterangepicker.min.js
  12. …lib/skulpt.min.js
  13. …lib/skulpt-stdlib.js
  14. …js/runner2.bundle.js
  15. …_/manifest.json

Preconnect

Preconnect to anvil.works

<link rel="preconnect" href="https://anvil.works">

Selectable Includes

Be able to disable the inclusion of non-essential resources

  1. daterangepicker.min.css
  2. font-awesome.min.css
  3. runner-v3.min.css

Selectable support for legacy browsers

Give the option to not transpile Baseline features in …js/runner2.bundle.js

  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Array.prototype.at
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Array.prototype.flat
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Array.prototype.includes
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Array.prototype.sort
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Array.prototype.unshift
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Object.fromEntries
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    Object.getOwnPropertyDescriptor
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    String.fromCodePoint
  • runner2.bundle.js?sha=b4e7fca81fdb:2
    String.prototype.replaceAll
4 Likes

Dang. Give the guy a job!

1 Like

Or maybe something like this