Replies: 2 comments 8 replies
-
|
Typically Page Speed will penalize you for using CDNs. It’s probably because each request to the CDN requires additional HTTP roundtrips and network handshakes. Your example will incur 5 separate requests to unpkg.com. If you were to bundle those scripts up into a single JS file you would probably see your Page Speed score go up b/c you’re reducing the number of requests required to load your webpage. However, in reality your webpage may actually end up being slower. It’s something you’ll have to test yourself to find out. Judging page speed is complicated and Page Speed scores aren’t always perfect. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @imacrayon! Very helpful. Will try bundling this morning. Any favorite tools for bundling multiple CDN scripts? Should I bundle the Alpine scripts with my JQuery script? |
Beta Was this translation helpful? Give feedback.
-
|
I will note as well that the AlpineJS v3.10.5 script (below) is not recognized as good JS by my VSCode. Not sure what to do about that. |
Beta Was this translation helpful? Give feedback.
-
|
They should be deferred in the head, but above all else they should be bundled and hosted at your same origin. furthermore, recent unpkg went down for nearly a day and every site using alpine from it wouldn't function. If you must use unpkg, you should add a link preconnect in the head or even in the headers for the document request itself to get the browser to negotiate tls with unpkg as early as possible. Also, this may not have too much to do with how alpine is loaded but how much you have alpine doing when it starts. If you have an x-data on the body, this can have quite a bit of processing overhead. You should attempt to have all components be as close to the things that actually use them as possible. As small as possible while handling the tasks you have. |
Beta Was this translation helpful? Give feedback.
-
|
Well, you shouldn't be using jQuery 😆 But normal js dev tools like esbuild or vite can do it all fine. Install them with npm, import them, and have the bundler smoosh them together into one file you provide in your static files alongside the html and such. |
Beta Was this translation helpful? Give feedback.
-
|
Not my choice to be using jQuery 😆 Got it! Thank you @ekwoka!!! |
Beta Was this translation helpful? Give feedback.
-
|
Follow up question @ekwoka and @imacrayon: The minified JS AND the unminified JS from the AlpineJS 3.10.5 CDN both have errors, according to my javascript validator. This is making it difficult to bundle or even to include as raw JS in my script tag. Any suggestions or ideas as to how the browser is interpreting it as valid JS/thoughts for what to do next? |
Beta Was this translation helpful? Give feedback.
-
|
Never mind, I think the problem was related to Django template tags. |
Beta Was this translation helpful? Give feedback.
-
|
well, you don't need to use the cdn. Just use npm. |
Beta Was this translation helpful? Give feedback.
-
AlpineJS is decreasing my page speed (https://pagespeed.web.dev) from 95 to ~75-80. Is there anything I can do?
I've tried deferring the scripts and placing them in
<head>, but the effect is not much different than simply placing them at the end of<body>.I've also tried placing the JS inline but that doesn't speed anything up.
Other ideas? Is there anything else I can here do to defer Alpine?
Beta Was this translation helpful? Give feedback.
All reactions