How Astro Made My Site 100x Faster

Aug 15, 2023

How Astro Made My Site 100x Faster

I rebuilt my site in Astro so you don’t have to. Let’s look at Astro Versus Next.js

Join this channel to get access to perks:
/ @james-perkins

Want to support the channel? Click below
https://www.buymeacoffee.com/jamesper…

Follow me on:
📃 Website/Blog: https://jamesperkins.dev
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-per…
👉 Github: https://github.com/perkinsjr
👉 Discord : https://discord.gg/dqYP9Mc

00:00 - Introduction
00:11 - Why Astro
00:40 - What is Astro?
01:10 - Before and After
02:54 - NextJS Vs Astro - ZERO Javascript
04:43 - Turning off javascript
06:44 - Lets look at the Astro Code
09:00 - Pagination / GetStaticPaths
10:37 - How the blog works
12:01 - How categories work
12:43 - Negatives
13:42 - Conclusion

Thumbnail by @t3dotgg

Content

0.19 -> For the last few weeks, I rebuilt my site with Astro

4.642 -> so you don't have to.

9.39 -> What's up everybody? Welcome back to the channel and welcome to this

12.744 -> video. In this video, we're going to be talking about astro.

17.01 -> If you've been subscribed to this channel for a while, I am a huge

20.736 -> fanboy of Next Learn X. I absolutely

24.492 -> love what they're doing with the web, but recently I've been digging

28.178 -> around with Astro. Now I've done some videos in the past with

31.68 -> Astro because I think it's an interesting product, but maybe

35.472 -> you've never seen astro before. So what is

39.384 -> Astro? Astro is a meta framework allowing

43.454 -> to use other kinds of libraries or frameworks

47.846 -> behind the scenes. So for example, if you are a View developer,

51.914 -> you can use that, or a Spelt developer, or a React developer,

55.838 -> or if you just like playing HTML. So I spent about

59.736 -> two weeks changing my website from plain old

63.6 -> NextJS to Astro. So let's talk

67.32 -> about the advantages and disadvantages of using Astro.

70.958 -> If it has been a long time since you've been to my website, here is

74.364 -> what it currently looks like. And this is the NextJS version.

78.47 -> As you can see, I have a little section up here talking about what I

81.504 -> do. Then we have some featured videos from the channel and

85.464 -> then finally some featured articles. You can go to the blog and

89.388 -> check out videos and articles and things I've

92.966 -> written. And then you can sign up for newsletters and you

96.516 -> can contact me. It's a basic simple neck

100.334 -> JS application. So now if we look at the new

104.316 -> website that I built with Astro, which you can look at at

107.784 -> James Perkins Dev, you can see this is what it looks like. There's a

111.576 -> picture of me at the top. And then down here we have

115.332 -> three latest posts. And then you can go to the

118.704 -> blog and you can look at all the different articles.

122.186 -> And what you'll notice is this one has Pagination. So I'll click Next.

126.408 -> Now go to the Next page, click Next and go to the Next page.

130.296 -> And then I can go back and look at this one. And everything just works

133.8 -> out of the box on top of that categories

137.186 -> is a bit different. Now I've cut it down. Right now it's

140.474 -> down to seven, and we may add one more to make

143.964 -> it eight. But it's just a simple clickable categories.

147.99 -> And then the old version, I had a list and then

151.728 -> each one of these lists had a little description. So we'll probably add this

154.692 -> back in the future. So now you've looked

158.22 -> at what the websites look like. They're fairly similar in nature.

161.654 -> Let's talk about a few advantages of running Astro

165.53 -> versus NextJS. So to begin with, the biggest

169.298 -> feature is I'm running zero JavaScript on

173.652 -> my Astro site versus my Next JS

177.182 -> site, where I'm running a bunch of different JavaScript

181.358 -> because NextJS ships JavaScript. So let's look at that out

185.376 -> of the box. So if you've never done this before, if you hit F Twelve

189.57 -> and you hit Control Shift P or Command Shift

193.754 -> P, if you're on Mac, you can open this command center

197.376 -> and one of the ones that you want to look for in the Show section

201.386 -> is one called Show Coverage. Now Show Coverage right

205.392 -> here is a draw that comes down here and it will show

208.764 -> you all of the JavaScript CSS that runs on any

212.388 -> website. So here we have coverage open already.

216.75 -> So I'm going to ahead and click the record button and then I'm going

220.308 -> to go ahead and refresh the next page.

223.95 -> And as you can see here, I've highlighted it,

227.232 -> but let's switch the type out. We have one

231.3 -> plausible JavaScript which also runs on astro. So technically

235.85 -> I have one JavaScript file and then we have all of these different

239.436 -> JS. We've got things like SSG, middleware build

243.66 -> manifest we got chunks from webpack index

247.37 -> page frameworks main there's a load of JavaScript

251.762 -> and you can look over here in this section

255.69 -> and you can see there's a lot of unused percentages of

258.912 -> this JavaScript but it's still included because it's bundled up when you build

262.62 -> your project. So if we flip over

266.196 -> now to our new one and we hit F twelve and

270.612 -> we hit Run here and I refresh,

274.17 -> you'll see there's no JavaScript. It's set from

277.536 -> the plausible for my analytics and just one CSS

281.318 -> bundle. So for this performance is

284.868 -> amazing. Sure you could use things like Suspense to

288.456 -> minimize the amount of JavaScript that runs on First Insight, but still you're

292.406 -> running that JavaScript later. So we can actually test this

296.352 -> in theory. So if I do Control Shift P and do

299.832 -> JavaScript and hit the disable button,

303.408 -> JavaScript is now disabled on this site. So if I hit enter immediately

307.55 -> these break which are my videos and

311.076 -> we can continue on. So let's go ahead and click on

314.484 -> a link. This video is broken and

318.504 -> for the most part the code is all working here.

322.89 -> Let's see if anything else is broken. The search functionality

326.942 -> is now broken, so things start to break on the site, which is fine.

331.05 -> I expect that most people are running JavaScript so it's not really a big

334.344 -> deal, but it is something to be aware of. But if we

337.656 -> do the same on my new site, we Control Shift P

341.136 -> and we type voice JavaScript in and right now

344.424 -> it's still disabled. So if I enable it or

348.684 -> disable it just to make sure we refresh.

353.55 -> So it's disabled now on this site. We can kind

357.264 -> of close this out. Now we can start navigating around.

360.996 -> So everything here works fine. And obviously I don't

364.334 -> have the video previews, but they are coming and they don't

367.706 -> require any JavaScript so they should just work. We click here,

371.724 -> everything works. The contact page will of course work

377.79 -> because we're not using any JavaScript, we're using Netlify

381.482 -> forms. So that works as expected. The categories

385.466 -> works, everything just works as expected.

388.73 -> Because of course we're not shipping any JavaScript. Sure, my analytics

393.002 -> aren't working, but that really isn't a big deal to me. If it

396.204 -> works, it works. If it doesn't work, customers got JavaScript disabled,

399.878 -> that's fine as well. So at this point, I guess you're

403.334 -> probably bored of listening to me talk about my website. So why don't we look

406.704 -> at the Astro code now, and you can see how very similar it

410.352 -> is to the way that you work with NextJS, using things like

414.024 -> Get static paths to generate pages, as well

417.384 -> as some of the other things like using components, et cetera.

421.286 -> And you'll see that this site runs with zero react code.

425.1 -> It's all written in plain old HTML, so it's really

429.6 -> easy to follow. So I'm using Get Pod to display this

433.068 -> because I just thought it would be easier than having to pull out my MacBook

436.442 -> and hook it all up. So it may look a bit different than what you're

439.214 -> used to. So let's start with our pages.

442.742 -> So James, I have to folders and

446.544 -> then just two regular index pages. So this index page is

450.264 -> the HTML that shows on the screen of

454.08 -> the first page when you go to Jamesperkins dev,

458.67 -> it's a real simple div. And this is all being powered by tailwind,

462.638 -> which is not my choice, but we can

465.984 -> get into that at the end when I do a conclusion.

469.23 -> So here we just have a basic HTML page. Nothing really exciting

473.246 -> here. What you may notice is that they have these three dashes

477.302 -> here and then things are happening inside and that's

480.986 -> how Astro works. So inside of here is where all your JavaScript

484.598 -> can be computed and used and whatever else you might

488.304 -> need, data fetching, et cetera, et cetera. And then you use

492.24 -> these anywhere you like. So this top three here is using

495.828 -> that to power this section here. And I'm just using top three

499.236 -> as a property. And that is just showing the last three latest posts.

503.378 -> Now let's talk about a bit more complicated pages. So let's talk

506.832 -> about the post. As you can see, this is powered by Markdown.

510.446 -> Nothing has really changed there. I believe if you have a blog that

514.536 -> you can just run it all from Markdown, what's the point in running a heavy

518.738 -> CMS when Markdown works great,

521.85 -> and especially as Astro has built in

525.144 -> Markdown support, so there's nothing for you to do.

528.81 -> So you'll see here, this page with a spreader you're

532.274 -> used to that with NextJS when you do a slug or whatever.

536.31 -> And inside of here is where we're running Get static pass to generate

539.954 -> all these pages. So inside of here, you'll notice this

543.48 -> section right here looks exactly the same as what you'd

547.046 -> expect from NextJS. I'm just grabbing all of

550.356 -> the Markdown files, I'm sorting those Markdown files by date,

554.496 -> and then I'm returning them with a page so

557.94 -> Astro has built in page Andy. So instead of having to

561.324 -> implement your own Pagination, you can use page eight,

564.48 -> tell it what page size you want to the maximum amount of data returned

568.754 -> per page. And then you can use that with

572.244 -> a page in A. So what I'm doing here is saying I'm

575.954 -> returning this page in this page props here. So everything

580.26 -> in here gets returned in this props. Then I use this

584.256 -> and I map over and I show a blog page preview for

587.664 -> each one which looks like this right

592.02 -> here. And then you'll see there's 123-4567

597.144 -> eight and then there's the next button. So the way this page works here

600.936 -> is I just created some HTML. So if we go to this component

604.202 -> here in our components section, you'll see

608.196 -> I'm pulling in that property, the page, and all I'm

611.654 -> doing is saying page URL, previous or

616.308 -> pageural next. And that allows me to do this

620.688 -> at the bottom of the page, making it really easy for somebody

624.828 -> to enjoy all of my blog posts or look through them all without

628.716 -> having to build something crazy. And of course you can customize this

632.184 -> however you want, but I just did a really simple version so that's how that

636.072 -> works. So back in here, essentially we're

640.07 -> using this get static pass to do all of that and then we pass it

643.596 -> along to this preview. And what this blog post preview

647.078 -> does is just opens this post as

650.772 -> a URL. And all I'm doing for that

654.156 -> is using this blog post astrophile to

657.804 -> display it. So here are all the properties I

661.332 -> could be using. Right now. We're not using them all, but there are some changes

664.608 -> that need to happen in my code so that I can use

668.34 -> an author. And this category section I want to add and the

671.784 -> description we may use somewhere else.

674.67 -> But all I'm doing here is showing a header,

677.99 -> the title, and then I'm using this slot section here. Now what this slot

681.902 -> section does is essentially shows you this part of the

685.764 -> code and that would be the markdown that's been converted into HTML.

689.81 -> So if we go to a blog post that's a bit more complicated, it's going

692.856 -> to have links and it's going to have images and it's going to have all

695.904 -> that kind of stuff. So unlike NextJS or any

699.684 -> other kind of project that you may have done, you don't have to implement the

703.404 -> markdown passing, it just happens inside this slot, which made

707.064 -> it really easy to build upon. And I have most of

710.652 -> the code finished within the first two days. And then I just spent a

714.048 -> lot of time playing with styling. And then finally we have this section here,

717.648 -> which is a bit different way of doing kind of the same thing.

721.38 -> So what I'm doing here is I have an index which

725.532 -> holds all of the tags which you saw, all categories.

729.638 -> And every time you click on one of them. It gets passed

733.322 -> in as a property here, which then shows the

737.304 -> page. And basically this layout is the same as

740.964 -> this page layout here. All I'm

745.154 -> doing is filtering and returning only the filtered posts,

749.366 -> making it seem to the user that they have a bunch

752.846 -> of different categories and they'll show different posts based upon that. It's

756.326 -> just a really easy way to implement that. So now I've talked about how I

759.732 -> implemented my Astro site. Let's talk a few negatives.

764.126 -> Number one, I couldn't use Shackle UI, and that may just

767.604 -> be my knowledge of how astro works. I couldn't figure out how to

771.096 -> make it work the way I wanted to, so I had to resort to

774.204 -> using tailwind, which was perfectly fine except from

778.488 -> it's tailwind. And if you've been on this channel for

781.896 -> a while, you know that I don't like tailwind that much. So it's just

785.184 -> a bit of getting used to. On top of that, right now I

788.844 -> don't have my ads running because I run Carbon Ads,

792.326 -> or I did run Carbon ads on the old site, which gave me

796.044 -> a small amount of revenue, and that's because I haven't quite figured out how

799.404 -> that would work. On top of that, I had a problem with SEO

803.114 -> for a while, which in the end led me to just build my own SEO

806.33 -> package. So there's now an Astro package called Simple

810.108 -> Astro SEO that you can use and enjoy, and it

813.924 -> will essentially do all the things you need to do to rank on Google and

817.38 -> be able to share in Twitter, discord all those places, and have nice social

821.376 -> media. Overall, I think Astro is built

824.916 -> for sites. I don't think it's built for those complicated

828.326 -> applications that require SSR and SWR

831.914 -> and stuff like that. Not quite yet. I feel like

835.668 -> the island architecture behind the scenes is super awesome. And if

839.676 -> you don't know what island architecture is, it's essentially allowing you to run

843.144 -> JavaScript only in places where it's needed.

845.988 -> So if you have a big component and it doesn't actually need any JavaScript,

849.662 -> no JavaScript will be added to the bundle. But if

852.984 -> there's one or two components that you need some JavaScript to

856.296 -> make them dynamic, it will only use them when that component

860.162 -> is used, and you can specify how it's used. Is it when

863.664 -> the client is idle? Is it when the client loads? Is it when there

867.504 -> is some sort of media query? All those kinds of things can

870.636 -> be handled with Astro. Overall, I really enjoyed this experience

874.248 -> and my site is now going to be powered by Astro.

877.142 -> If you did enjoy this video, make sure to drop it a like of

880.632 -> course, tell me down in the comments below. Is there things you want to

883.896 -> learn about astro? And I will make some videos. And of

887.436 -> course, until next time, see ya.

Source: https://www.youtube.com/watch?v=cOxA3kMYtkM