Aurelia, PageSpeed and Web Vitals

1

Hi,

as most of you know, Google recently introduced web vitals which will be used (if not already) for ranking pages. I have a website which is based on Aurelia (https://im-a-puzzle.com). I always struggled with PageSpeed, now I also ranking very badly in Web Vitals.

Now here follows my questions:

  1. I currently use the Aurelia bundler. Do you believe the page will load faster with webpack?
  2. Is there anyway to load Aurelia pages faster?
  3. I still use bluebird, fetch and Intl polyfills. I took them out and got some bad feedbacks from users still using Safari 9 or Android 5. Is there anyway to load the polyfills only for old browsers? For instance bluebird is set as a prefetch. Must it really be like this?

Thanks in advance,

2

Just a question or two.
I see around 5MB being loaded and taking about 5 seconds, and it not showing finished on a refresh for 17ish seconds with hotjar failing to load.

Could you use lazy loading/break those into smaller pieces so that your initial load is significantly smaller till some action is taken?

My first thought would be the only way to make it faster is to make it smaller, at least on first load.

3

Hi Airboss,

Thanks for the insights. A deferred the loading of Hotjar (it starts 15 seconds after the page started loading) so that it doesn’t influence the loading time.

Yes, maybe I have to break it into modules. But I don’t think it will help much. Most of the weight is in the vendor bundle.

I would really like to optimize the use of the polyfills as they penalize the good users that keep their system up-to-date.

Do anybody know if there is a way to load the polyfills only if needed? I tried using polyfill.io, but it had too problems:

  1. The modules were not recognized by require
  2. As it wasn’t triggered by aurelia, there was potentially a race condition.

Rgds,

1 Like
4

bluebird has some known performance issue with Aurelia, our cli skeleton has replaced it with promise-polyfill.

Alternatively, you can remove all your local polyfills, use https://polyfill.io/v3/ to customise a polyfill. The polyfill.io is smart, it will deliver empty file to latest browser which needs no polyfill.

Update: I see you mentioned polyfill.io, you probably load it the wrong way. Don’t load the script in your code, load the script tag in your index.html head section, like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise.prototype.finally%2CPromise%2CIntl%2Cfetch"></script>
  </head>
2 Likes
5

Hi huo, thanks. This looks promising. But in any case I’m still penalizing the good users and adding another blocking script. What I would like to do is:

if (!window.fetch || !window.promise || !window.Intl) {
// load the polyfill using document.createElement
}

I tried that, but sometimes (not all the time, I think it depends on browser cache status) I got the require error on Safari 9 “mismatched anonymous define() modules”.

Do you Any way to workaround it using polyfill.io?

Best regards,

1 Like
6

polyfill.io does the browser check for you.

When you load in code, those polyfills were loaded after requirejs, they are now in AMD environment, some polyfills may complain depending on their implementation. I am not exactly sure how the js will behave when you use document.createElement to create script tag and inject into html head.

It’s better to load polyfills before vendor-bundle, like the script tag in html head.
The prepend you defined in vendor-bundle does similar thing: load those prepend files before requirejs.

1 Like
7

Thanks for the input. I’ll try to write myself a prepend that load polyfills if needed. The problem is how to test this all…

1 Like