web stats

The Loop

Stay in The Loop

Subscribe to stay updated on the most important tech updates in your industry.

arrow line

If you’ve used Next.js, you’ve almost certainly used its <Image /> component, a handy way to optimize images with minimal effort required. In fact, the component is so easy to use out-of-the-box that you might not know some useful facts about its architecture and best practices for using it:

  • <Image /> consists of three parts:
    • A React component that generates the required HTML including the <img /> tag and multiple URLs for the src and srcset attributes
    • The Next Image API serves an image proxy that accepts an image URL, width, and quality; it also validates parameters, determines cache control policies, processes the image, and ultimately serves the image in a browser-supported format
    • <Image /> uses two different libraries - Sharp or Squoosh - for optimization
  • <Image /> does not crop images, despite the fact that you can pass in width, height, and fill properties; it is currently impossible to change an image’s original aspect ratio
  • When you pass in a width prop, you might notice that your image is rendered with a different actual width; this is due to the fact that Next.js uses arrays of deviceSizes and imageSizes (found in next.config.js) to resize images to the closest defined size
  • You can optimize images by using the Image API (even without using the <Image /> component itself) by calling the API’s URL
  • For example: /_next/image?url=https://x.com/test.jpg& w=640&q=75
  • It is best practice to import an image and assign that imported image to <Image />’s src attribute rather than assigning an absolute path to src; this is because accessing images by an absolute path from a public folder results in a 30-day cache policy, which can have a negative impact on your Lighthouse score

Google Search Central recently released its latest episode, detailing some updates, best practices, and guidelines for search optimization:

  • Interaction to Next Paint (INP) will become part of the Core Web Vitals metric starting in March 2024, replacing First Input Delay (FID)
  • Starting in December 2023, Google Search Console will be retiring its “Mobile Usability” report, the Mobile-Friendly Test tool, and its Mobile-Friendly Test API
  • For news sites, Google has announced SEO best practices and Search Console for news sites
  • Search Labs is available for users in the US who want to try out experimental initiatives such as Search Generative Experience (SGE), which uses AI to enhance users’ searches
  • Search Console announced a series of updates:
    • An update to the Rich Results Test allows code editing, which makes experimental fixes much faster and easier
    • Search Console Insights now supports users without Google Analytics
    • The video indexing report has been improved to provide more detail and context for resolving video-indexing issues
    • A new series of Search Console training videos has been released

The latest version of Next.js includes improvements for compiler performance and various bug fixes.

  • On Vercel's website these improvements led to 1.5% faster local server startup and 54% faster updates when making changes (HMR/React Fast Refresh)
  • Next.js achieved these results by caching and/or minimizing slow operations, optimizing expensive file system operations, and using more incremental tree-traversal during compilation
  • Along with these significant improvements, Next.js is continuing to develop and improve its new App Router:
    • Next.js’s previous Pages Router was not designed for streaming, leading to the need to create a streaming-friendly API for data fetching, asset loading, page metadata, and React’s newer primitives
    • Next.js is focusing on improving the App Router’s stability: since 13.4, they have patched a number of high-impact bugs around stability that are available in the latest patch release
    • Next.js has re-written its documentation from scratch, including refreshing almost every page of the App Router documentation

A former npm engineer wrote up an issue he sees with the npm ecosystem:

  • The author argues that the npm registry delegates validation of the integrity of package contents to npm clients rather than checking manifest data against the package
  • This results in a number of negative impacts on users:
    • Cache corruption, in which the saved software package may not align with the specified name or version in the registry of URL
    • Unacknowledged dependencies may be installed
    • Unknown scripts can be executed
    • Downgrade attacks are possible, in which a project’s version specification correspond to a susceptible version of the software package
  • As safeguards against these scenarios, npm users are encouraged to avoid or audit packages that rely on npm registry package manifests
  • You can also use a registry proxy that verifies package contents
  • 2 metrics in Google’s Core Web Vitals are directly impacted by font loading: Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS)
  • Using font-display: optional can help avoid CLS: with the default setting of font-display: auto, a page will render with the space that would be taken by the fallback font, so that when the custom font loads there is a layout shift
  • Additionally, using font-display: optional leads the browser to render the font only if it is available quickly
  • You can also optimize font-loading by self-hosting fonts on your primary domain; this can be problematic for licensing reasons, but self-hosting the loading code is an effective middle ground

Vercel’s AI SDK offers support for streaming API responses from AI models.

  • This includes React and Svelte hooks for data fetching and rendering streaming text responses
  • The SDK is Edge and Serverless ready, meaning that you can deploy an AI application that scales, streams generated response, and is cost-effective
  • Vercel’s Chat & Prompt Playground allows developers to compare various language model results, modify parameters, and generate code in Next.js, Svelte, and Node.js
  • The AI SDK embraces interoperability and includes support for OpenAI, LangChain, and Hugging Face

Stay ahead of the curve with Econify's newsletter, "The Loop." Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation, this newsletter is your go-to source for all things cutting-edge in the tech industry.

The Loop is written and edited by Hank Mason, Andrew Smith, John Kaufmann, Noah Gribbin, Victoria Lebel, Chris Breen, and Marie Stotz.

Have questions? Hit reply to this email and we'll help out!

Unsubscribe · Preferences

Published on Wed Aug 02 2023