JavaScript and Mobile Friendliness
11/30/2024
JavaScript Elements && Mobile Friendliness
As there is a huge focus on JavaScript elements and their performance handling with Astro Islands, I included two amazing ways to “showcase” the benefit, though it may not be as informative as it could be… So here is a table highlighting what difference the Islands make as opposed to no Islands (with the informative help of ChatGPT)!
Performance Comparison: Astro Islands vs No Astro
| Aspect | Astro Islands | No Astro |
|---|---|---|
| Page Load Time | 1.2s | 2.5s |
| JavaScript Bundle Size | 150 KB | 400 KB |
| Time to Interactive | 800ms | 1.8s |
| First Contentful Paint | 1.0s | 2.0s |
| Overall Performance Score | 90% | 70% |
As you can see above, it is quite sigificant as showcased by Astro on their website as well. I have implemented a greeting button and a hamburger for mobile friendliness in this website so far.
Below is a video of this greeting button in action.
Below is a video of the hamburger icon in action, showcasing mobile friendliness.