Skip to content
Get help on SlackWatch Sanity demo

Best practices for reducing page size and optimizing assets in Next.js

6 replies
Last updated: Aug 6, 2022
Any best practices on reducing page size? Got a notification list from Ahrefs that one of my pages was about 50,000 bytes (https://www.redshirtsports.xyz/2022-socon-media-day ). Granted it is a lot of text but I feel like text shouldn't be too much to send down? I’m surprised Next js didn’t complain that it was too big.
Aug 4, 2022, 4:52 AM
It would be good to know what exactly is heavy on the page (I don’t have time to open it and check it just now, sorry). Is it the markup? This could be caused by the amount of data that is returned by Next.js 
getStaticProps
for that page. Is it the images? This could be because they’re not optimized. Or perhaps even something else?
Aug 4, 2022, 7:13 AM
loads really fast for me, lighthouse gives it a 67 on performance. Maybe try lazy hydration on the text further down on the page?
Aug 5, 2022, 10:49 PM
Odd that it gave a 67 on performance, this is what I get in an incognito window for Mobile and Desktop
Aug 5, 2022, 10:51 PM
But yeah I need to figure out how to get better at PortableText... This is what I currently have
import Image from 'next/image'
import createImageUrlBuilder from '@sanity/image-url'
import { PortableText as PortableTextComponent } from '@portabletext/react'
import { getImageDimensions } from '@sanity/asset-utils'
import { sanityConfig } from '@lib/config'

export const imageBuilder = createImageUrlBuilder(sanityConfig)
export const urlForImage = (source) => imageBuilder.image(source).auto('format').fit('min')

const ImageComponent = ({ value, isInline }) => {
  const { width, height } = getImageDimensions(value)
  return (
    <Image
      src={urlForImage(value).fit('min').auto('format').url()}
      alt={value.alt || ' '}
      width={width}
      height={height}
      layout="responsive"
      sizes="50vw"
    />
  )
}
const myPortableTextComponents = {
  types: {
    image: ImageComponent,
  },
}

export const PortableText = (props) => (
  <PortableTextComponent components={myPortableTextComponents} {...props} />
)
so not sure how I would be able to do lazy hydration on text further down the page
Aug 5, 2022, 10:54 PM
Unless your portable text is absolutely huge, you shouldn’t lazy-load text content. It would also be bad for accessibility and SEO as well. This is very very very unlikely to have any significant performance benefit compared to optimizing assets like fonts, images and icons.
Aug 6, 2022, 7:20 AM
My icons come from https://heroicons.com and I don't think I have any custom fonts (at least not in current production)
Aug 6, 2022, 4:41 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in