[ci] yarn format
This commit is contained in:
FredKSchott
GitHub Actions
parent
e002755309
commit
054e79acd7
1 changed files with 20 additions and 26 deletions
|
|
@ -3,7 +3,7 @@ layout: ~/layouts/Main.astro
|
|||
title: Comparing Astro
|
||||
---
|
||||
|
||||
We often get asked the question, "How does Astro compare to my favorite site builder, ________?" This guide was written to help answer that question for several popular site builders and Astro alternatives.
|
||||
We often get asked the question, "How does Astro compare to my favorite site builder, **\_\_\_\_**?" This guide was written to help answer that question for several popular site builders and Astro alternatives.
|
||||
|
||||
If you don't see your favorite site builder listed here, [ask us in Discord.](https://astro.build/chat)
|
||||
|
||||
|
|
@ -27,14 +27,13 @@ Docusaurus doesn't support partial hydration, and instead has the user load and
|
|||
|
||||
#### Case Study: Building a Documentation Website
|
||||
|
||||
[docusaurus.io/docs](https://docusaurus.io/docs) is the official Docusaurus documentation website, built with Docusaurus. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a ***rough, real-world*** comparison between the two site builders.
|
||||
[docusaurus.io/docs](https://docusaurus.io/docs) is the official Docusaurus documentation website, built with Docusaurus. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a **_rough, real-world_** comparison between the two site builders.
|
||||
|
||||
- **Docusaurus performance score**: 26 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocusaurus.io%2Fdocs)
|
||||
- **Astro performance score**: 94 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
|
||||
|
||||
One big reason behind this performance difference is Astro's smaller JavaScript payload: [docusaurus.io/docs](https://docusaurus.io/docs) loads **238kb** of JavaScript on first load while [docs.astro.build](https://docs.astro.build) only loads **9.3kb** (96% less JavaScript, overall).
|
||||
|
||||
|
||||
## Eleventy vs. Astro
|
||||
|
||||
[Eleventy](https://www.11ty.dev/) is a popular static site builder, powered by Node.js.
|
||||
|
|
@ -67,7 +66,6 @@ By contrast, Astro automatically builds your client-side JavaScript & CSS for yo
|
|||
|
||||
Hugo uses a custom [templating language](https://gohugo.io/templates/introduction/) to render your website. Astro lets you create pages using your favorite UI component libraries (React, Preact, Vue, Svelte, and others) or a built-in component syntax that is similar to HTML/JSX. Hugo does not support using modern UI components for HTML templating.
|
||||
|
||||
|
||||
#### Comparing Hugo vs. Astro Performance
|
||||
|
||||
Conceptually, Hugo is aligned with Astro's "minimal client-side JavaScript" approach to web development. Hugo and Astro both offer similar, zero-JavaScript-by-default performance baselines.
|
||||
|
|
@ -88,8 +86,6 @@ Jekyll achieves this by pushing you to avoid JavaScript entirely. Jekyll sites a
|
|||
|
||||
By contrast, Astro automatically builds your client-side JavaScript for you. Astro only sends the bare minimum amount of JavaScript to the browser, minified, bundled and optimized for production. While it is possible to achieve this yourself in Jekyll, with Astro this is built in by default.
|
||||
|
||||
|
||||
|
||||
## SvelteKit vs. Astro
|
||||
|
||||
[SvelteKit](https://kit.svelte.dev/) is a popular website & application framework for Svelte.
|
||||
|
|
@ -108,14 +104,13 @@ SvelteKit doesn't support partial hydration, and instead has the user load and r
|
|||
|
||||
#### Case Study: Building a Documentation Website
|
||||
|
||||
[kit.svelte.dev](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) is the official SvelteKit documentation website, built with SvelteKit. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a ***rough, real-world*** comparison between the two site builders for this common use-case.
|
||||
[kit.svelte.dev](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) is the official SvelteKit documentation website, built with SvelteKit. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a **_rough, real-world_** comparison between the two site builders for this common use-case.
|
||||
|
||||
One notable difference between the two sites being tested: SvelteKit's documentation is served as a single page while Astro's is broken up into multiple pages. This larger content payload should have a slight negative impact on performance that is not related to the tool itself.
|
||||
|
||||
- **SvelteKit performance score**: 92 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fkit.svelte.dev%2Fdocs)
|
||||
- **Astro performance score**: 94 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
|
||||
|
||||
|
||||
SvelteKit performed comparably to Astro in this test.
|
||||
|
||||
## Next.js vs. Astro
|
||||
|
|
@ -138,14 +133,13 @@ Next.js has great built-in image optimizations, which could make Next.js a bette
|
|||
|
||||
#### Case Study: Building a Documentation Website
|
||||
|
||||
[nextjs.org/docs](https://nextjs.org/docs/getting-started) is the official Next.js documentation website, built with Next.js. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a ***rough, real-world*** comparison between the two site builders for this common use-case.
|
||||
[nextjs.org/docs](https://nextjs.org/docs/getting-started) is the official Next.js documentation website, built with Next.js. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a **_rough, real-world_** comparison between the two site builders for this common use-case.
|
||||
|
||||
- **Next.js performance score**: 59 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnextjs.org%2Fdocs%2Fgetting-started)
|
||||
- **Astro performance score**: 94 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
|
||||
|
||||
One big reason behind this performance difference is Astro's smaller JavaScript payload: [nextjs.org/docs](https://nextjs.org/docs/getting-started) loads **463kb** of JavaScript on first load while [docs.astro.build](https://docs.astro.build) only loads **9.3kb** (98% less JavaScript, overall).
|
||||
|
||||
|
||||
## Nuxt vs. Astro
|
||||
|
||||
[Nuxt](https://nextjs.org/) is a popular website & application framework for Vue. It is similar to Next.js.
|
||||
|
|
@ -166,7 +160,7 @@ Nuxt has great built-in image optimizations, which could make Nuxt a better choi
|
|||
|
||||
#### Case Study: Building a Documentation Website
|
||||
|
||||
[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) is the official Nuxt documentation website, built with Nuxt. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a ***rough, real-world*** comparison between the two site builders for this common use-case.
|
||||
[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) is the official Nuxt documentation website, built with Nuxt. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a **_rough, real-world_** comparison between the two site builders for this common use-case.
|
||||
|
||||
- **Nuxt performance score**: 48 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnuxtjs.org%2Fdocs%2F2.x%2Fget-started%2Finstallation)
|
||||
- **Astro performance score**: 94 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
|
||||
|
|
@ -187,7 +181,7 @@ VuePress doesn't support partial hydration, and instead has the user load and re
|
|||
|
||||
#### Case Study: Building a Documentation Website
|
||||
|
||||
[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) is the official VuePress documentation website, built with VuePress. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a ***rough, real-world*** comparison between the two site builders for this common use-case.
|
||||
[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) is the official VuePress documentation website, built with VuePress. The website offers a similar enough design and featureset to compare against the official Astro documentation website. This gives us a **_rough, real-world_** comparison between the two site builders for this common use-case.
|
||||
|
||||
- **Vuepress performance score**: 63 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fvuepress.vuejs.org%2Fguide%2F)
|
||||
- **Astro performance score**: 94 out of 100 [(full audit)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
|
||||
|
|
|
|||
Loading…
Reference in a new issue