Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf: improve css render performance #1476

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+78 −14
Open

perf: improve css render performance #1476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7beebd9
perf: improve css render performance v1
BioPhoton Jan 11, 2024
207066f
Apply suggestions from code review
BioPhoton Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ const { footerLinks } = useNavigation()

<template>
<UFooter
class="content-visibility contain-content"
style="contain-intrinsic-size: auto 100px"
:ui="{
bottom: { wrapper: 'border-t border-gray-200 dark:border-gray-800', container: '!py-6' },
top: { wrapper: 'border-t border-gray-200 dark:border-gray-800', container: 'py-8 lg:py-12' }
Expand Down
2 changes: 1 addition & 1 deletion components/AppHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ defineProps<{
</script>

<template>
<UHeader :links="links">
<UHeader :links="links" class="contain-layout">
<template #logo>
<Logo class="block w-auto h-6" @click.right.prevent="$router.push('/design-kit')" />
</template>
Expand Down
2 changes: 1 addition & 1 deletion pages/blog/[slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function copyLink () {
variant="ghost"
class="-my-1.5 -mx-2.5"
>
<UAvatar :src="author.avatarUrl" :alt="author.name" />
<UAvatar loading="lazy" :src="author.avatarUrl" :alt="author.name" />

<div class="text-left">
<p class="font-medium">
Expand Down
1 change: 1 addition & 0 deletions pages/blog/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ await fetchList()
:key="subIndex"
:src="author.avatarUrl"
:alt="author.name"
loading="lazy"
class="lg:hover:scale-110 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
>
<NuxtLink v-if="author.link" :to="author.link" target="_blank" class="focus:outline-none" tabindex="-1">
Expand Down
2 changes: 1 addition & 1 deletion pages/enterprise/jobs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ await fetchList()
}"
>
<template #icon>
<UAvatar :src="job.organization.avatar" size="lg" />
<UAvatar loading="lazy" :src="job.organization.avatar" size="lg" />
</template>

<template #footer>
Expand Down
4 changes: 2 additions & 2 deletions pages/enterprise/sponsors.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@ defineOgImage({
:to="sponsor.sponsorUrl"
target="_blank"
>
<UAvatar :src="sponsor.sponsorLogo" :alt="sponsor.sponsorName" class="mx-auto mt-4" size="2xl" />
<UAvatar loading="lazy" :src="sponsor.sponsorLogo" :alt="sponsor.sponsorName" class="mx-auto mt-4" size="2xl" />
<h3 class="mt-6 font-semibold leading-7 tracking-tight text-gray-900 dark:text-white mb-2">
{{ sponsor.sponsorName }}
</h3>
</UButton>
</div>
<div v-else class="flex flex-wrap gap-8 ml-12">
<NuxtLink v-for="(sponsor, index) in value" :key="index" :to="sponsor.sponsorUrl" target="_blank" class="inline-flex">
<UAvatar :src="sponsor.sponsorLogo" :alt="sponsor.sponsorName" size="lg" />
<UAvatar loading="lazy" :src="sponsor.sponsorLogo" :alt="sponsor.sponsorName" size="lg" />
</NuxtLink>
</div>
</div>
Expand Down
37 changes: 36 additions & 1 deletion pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,41 @@ useSeoMeta({
twitterImage: joinURL(site.url, '/new-social.jpg')
})
</script>

<style>
.content-visibility-auto {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would probably be nice to define these Tailwind utils "globally" 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes! where can i put them??

I'm a beginner vue coder just so u be humble with my ugly code :D

content-visibility: auto;
contain:layout;
}
.contain-intrinsic-size-200 {
contain-intrinsic-size: 200px;
}
.contain-intrinsic-size-500 {
contain-intrinsic-size: 200px;
}
.contain-intrinsic-size-800 {
contain-intrinsic-size: 200px;
}
Comment on lines +27 to +32
Copy link

@DraftProducts DraftProducts Jan 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that correct ?

Suggested change
.contain-intrinsic-size-500 {
contain-intrinsic-size: 200px;
}
.contain-intrinsic-size-800 {
contain-intrinsic-size: 200px;
}
.contain-intrinsic-size-500 {
contain-intrinsic-size: 500px;
}
.contain-intrinsic-size-800 {
contain-intrinsic-size: 800px;
}


.contain-layout{
contain:layout;
}
.contain-content{
contain:content;
}
.contain-strict{
contain:strict;
}

img, svg, span[class^="i-ph"] {
contain:content;
}

span[class^="i-ph"] {
content-visibility: auto;
contain-intrinsic-size: 20px;
}

</style>
<template>
<div v-if="page">
<ULandingHero :ui="{ base: 'relative z-[1]' }" class="dark:bg-gradient-to-b from-gray-950 to-gray-900">
Expand Down Expand Up @@ -78,6 +112,7 @@ useSeoMeta({
:key="index"
:slot="section.slot"
:class="section.class"
class="content-visibility contain-intrinsic-size-500"
:align="section.align"
:links="section.links"
>
Expand Down
3 changes: 2 additions & 1 deletion pages/modules/[slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ defineOgImage({
:icon="moduleIcon(module.category)"
:alt="module.name"
size="lg"
loading="lazy"
:ui="{ rounded: 'rounded-lg' }"
class="-m-[4px]"
/>
Expand Down Expand Up @@ -139,7 +140,7 @@ defineOgImage({

<div v-for="(maintainer, index) in module.maintainers" :key="maintainer.github" class="flex items-center gap-3">
<NuxtLink :to="`https://github.com/${maintainer.github}`" target="_blank" class="flex items-center gap-1.5 hover:text-primary">
<UAvatar :src="`https://ipx.nuxt.com/f_auto,s_20x20/gh_avatar/${maintainer.github}`" :srcset="`https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/${maintainer.github} 2x`" :alt="maintainer.github" size="2xs" />
<UAvatar loading="lazy" :src="`https://ipx.nuxt.com/f_auto,s_20x20/gh_avatar/${maintainer.github}`" :srcset="`https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/${maintainer.github} 2x`" :alt="maintainer.github" size="2xs" />
<span class="text-sm font-medium">{{ maintainer.github }}</span>
</NuxtLink>

Expand Down
39 changes: 32 additions & 7 deletions pages/modules/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,29 @@ defineShortcuts({

const { copy } = useCopyToClipboard()
</script>
<style>
#module-categories {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose these could be moved to tailwind-equivalents

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you give me more info what this means I'll do it right now

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usually global classes are added as a plugin in Tailwind. As a matter of fact, the docs feature an example using content-visibility here: https://tailwindcss.com/docs/plugins#prefix-and-important (and !important, which is not relevant for your use case).

But, bear in mind that I'm an outsider, don't take this comment as actual advice of what to do since the Nuxt team could have a different answer. 👍🏽😉🤗

contain: content;
content-visibility: auto;
height: 643px;
contain-intrinsic-size: 643px;
}

.module-card {
contain: content;
content-visibility: auto;
}

@media screen and (max-width: 992px) {
.module-card {
contain-intrinsic-size: auto 200px;
}
}

.module-card {
contain-intrinsic-size: auto 238px;
}
</style>

<template>
<UContainer>
Expand All @@ -53,22 +76,22 @@ const { copy } = useCopyToClipboard()
<UPageGrid :ui="{ wrapper: 'grid-cols-2 sm:grid-cols-2 xl:grid-cols-2 gap-4' }">
<UPageCard to="https://image.nuxt.com/?utm_source=nuxt_website&utm_medium=modules" target="_blank" description="Plug-and-play image optimization.">
<template #title>
Nuxt Image <UIcon name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
Nuxt Image <UIcon loading="lazy" name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
</template>
</UPageCard>
<UPageCard to="https://content.nuxt.com/?utm_source=nuxt_website&utm_medium=modules" target="_blank" title="Nuxt Content" description="Git-based CMS with Markdown support.">
<template #title>
Nuxt Content <UIcon name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
Nuxt Content <UIcon loading="lazy" name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
</template>
</UPageCard>
<UPageCard to="https://devtools.nuxt.com/?utm_source=nuxt_website&utm_medium=modules" target="_blank" description="Visual tools that help you to know your app.">
<template #title>
Nuxt DevTools <UIcon name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
Nuxt DevTools <UIcon loading="lazy" name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
</template>
</UPageCard>
<UPageCard to="https://ui.nuxt.com/?utm_source=nuxt_website&utm_medium=modules" target="_blank" description="Fully styled and customizable components.">
<template #title>
Nuxt UI <UIcon name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
Nuxt UI <UIcon loading="lazy" name="i-ph-medal-duotone" class="h-4 w-4 text-primary pointer-events-none" />
</template>
</UPageCard>
</UPageGrid>
Expand All @@ -77,7 +100,7 @@ const { copy } = useCopyToClipboard()

<UPage id="smooth" class="pt-20 -mt-20">
<template #left>
<UAside>
<UAside id="module-categories">
<UNavigationTree :links="[{ label: 'Categories', disabled: true, children: categories }]" />

<template #bottom>
Expand Down Expand Up @@ -137,11 +160,13 @@ const { copy } = useCopyToClipboard()
:key="index"
:to="`/modules/${module.name}`"
:title="module.name"
class="flex flex-col"
class="module-card flex flex-col"
:ui="{ body: { base: 'flex-1' }, footer: { base: 'bg-gray-100/50 dark:bg-gray-800/50' } }"
>
<template #icon>
<UAvatar :src="moduleImage(module.icon)" :icon="moduleIcon(module.category)" :alt="module.name" size="lg" :ui="{ rounded: 'rounded-lg' }" />
<UAvatar
loading="lazy"
:src="moduleImage(module.icon)" :icon="moduleIcon(module.category)" :alt="module.name" size="lg" :ui="{ rounded: 'rounded-lg' }" />
</template>

<template #title>
Expand Down