March 2022 Summaries

Paul Scanlon discusses the drawbacks of using Google Fonts in Gatsby sites, emphasizing the impact on web performance due to additional HTTP requests required to fetch fonts from Google's servers, which can negatively affect the Largest Contentful Paint (LCP) metric. He suggests a more efficient alternative by loading font files locally, which reduces external requests and improves overall performance metrics as shown by Lighthouse reports. The process involves uninstalling the gatsby-plugin-google-fonts, adding font files to the static directory, and using the @font-face CSS rule with the rel="preload" attribute to prioritize font loading, ultimately demonstrating that a more manual approach can yield significant performance benefits for web developers.

Lennart Jörgens discusses the integration of TypeScript in Gatsby, highlighting the ability to use TypeScript for gatsby-config and gatsby-node files since GatsbyConf 2022, enhancing the developer experience with type safety and improved IDE support. The post offers a step-by-step guide on setting up a new Gatsby project using TypeScript, including initializing the project via CLI, configuring gatsby-config.ts and gatsby-node.ts, and creating custom nodes. It emphasizes type safety through the use of TypeScript types like GatsbyNode and PageProps and explores styling with vanilla-extract, a CSS-in-TypeScript solution that ensures type-safe CSS writing. The article encourages users to explore further resources like the How-To Guide on TypeScript in Gatsby and a real-world example project, gatsby-starter-tmdb, for more comprehensive learning.

Vint.co, founded by Nick King and Patrick Sanders in 2019, aims to make wine investing accessible by securitizing collections of fine wine and rare spirits. The platform, which emerged from King's interest in alternative assets, employs Gatsby as its web framework and Contentful as its content management system, chosen for their robust developer experiences and plugin ecosystems. Patrick Sanders, who led the development of the Vint website, highlights the benefits of using Gatsby, such as GraphQL for data-sourcing, image optimization, and static site generation with client-side rehydration, while Contentful was selected for its ease of integration. The platform has achieved significant growth, with $1.5 million in gross investment volume and notable investor growth, while also receiving positive feedback for its user-friendly setup process. Vint enables fractional investments in wine and spirits starting at $50, breaking traditional barriers associated with wine investing.

Paul Scanlon's article provides a detailed guide on transitioning from Google's Universal Analytics to Google Analytics 4 (GA4) for Gatsby sites, and how to leverage Partytown to enhance site performance. The first part explains the process of setting up a GA4 property and replacing the deprecated Universal Analytics with the gatsby-plugin-google-gtag. The second part introduces Partytown, a library that offloads third-party scripts from the main thread to a web worker, thus improving load times and overall site performance. By using Partytown, developers can ensure that critical application scripts execute without delay, leading to a faster and more responsive website. The article also highlights the current beta status of Partytown and hints at future integrations with Gatsby, while providing practical implementation advice and links to demonstration repos.

Donut, a 500,000-reader daily newsletter aimed at Gen Z, recently transitioned from WordPress to Gatsby to enhance performance and SEO. The move was driven by co-founder Matt McDonald's desire for a modern technical stack that could support their ambition to become a content machine. Gatsby's platform allows Donut to optimize SEO, such as using pagination over infinite scroll and improving load times by altering design elements, like switching to CSS gradients for backgrounds. The website's main conversion tool is a full-screen quiz that recommends newsletters based on user responses, effectively increasing engagement through gamification. Gatsby's component-based static queries improve code quality by co-locating queries with components, avoiding the violation of separation of concerns. Additionally, Donut uses Gatsby Functions to power a personalized ambassador program, encouraging subscribers to promote the newsletter through a point-based referral system. McDonald expressed satisfaction with Gatsby's features, highlighting its positive impact on their operations.

The Gatsby Best of 2021 Agency Awards, launched to honor outstanding work by web agencies using the Gatsby framework, recognized excellence in five categories: Best eCommerce Site, Best Content Site, Best Charity/Non-Profit Site, Best Site Design, and Agency of the Year. Attach Digital's work on the Willow and Cole website won Best eCommerce Site, while Mediacurrent's development of Pennsylvania State University's news site earned the Best Content Site accolade. Eric Howey Web Development was awarded Best Charity/Non-Profit Site for the BC Alliance for Monitoring Mental Health Equity site, and the collaboration between Woolly Mammoth and Focus Lab on LaunchDarkly received the Best Site Design award. Webstacks was named Agency of the Year due to its impressive portfolio of Gatsby-powered sites. Winners received a $1000 donation to a nonprofit of their choice, alongside custom digital logos, physical award plaques, Gatsby swag, and promotional recognition. The awards were judged by key Gatsby figures like co-founders Kyle Mathews and Sam Bhagwat, with winners and finalists notified by March 9, 2022, to arrange prize fulfillment.

Gatsby Cloud has introduced Image CDN, a new service in public beta for Contentful and WordPress users that enhances page performance through edge network image optimization. This service aims to improve the speed of content-rich sites by handling image processing away from the build step, which traditionally slowed down development. Image CDN significantly reduces build times, as demonstrated on gatsbyjs.com, where build times dropped from 40 minutes to 11 minutes, a reduction of over 70%. Additionally, sites using Image CDN experience a 300ms improvement in page load times, which positively impacts SEO and user experience by boosting their Core Web Vitals scores. While currently free for paid Gatsby Cloud users during the beta phase, further details on pricing and platform limits will be released ahead of its full rollout.

Arisa Fukuzaki, a Developer Relations Engineer at Storyblok, shares insights on enhancing the developer experience with the Storyblok CMS and Gatsby Framework. She highlights the advantages of using a headless CMS, such as improved security, development flexibility, and scalability. At GatsbyConf 2022, Fukuzaki discusses how Gatsby developers can optimize their use of Storyblok, emphasizing the benefits of Gatsby's page rendering modes, including Static Site Generation, Deferred Static Generation, and Server-Side Rendering. Storyblok offers a visual editor and a Gatsby source plug-in to enhance the development process, while ongoing improvements to their SDK aim to streamline integration. The combination of Gatsby and Storyblok provides a robust platform for building fast and flexible Jamstack websites, with resources like tutorials, case studies, and workshops available to support developers in making the most of this integration.

Kontent.ai, a headless CMS platform designed for enterprises, offers developers the flexibility to create digital experiences for any channel through an API-driven approach that integrates with existing tech stacks. It facilitates easy and quick integration with Gatsby, a popular framework known for its simplicity and developer-friendly setup. Kontent.ai provides Content as a Service (CaaS) with a user-friendly editing interface and collaboration features, making content management accessible without technical expertise. The platform supports advanced Gatsby features like Deferred Static Generation (DSG) and Server-Side Rendering (SSR), enhancing multilingual support and site performance. Additionally, its new GraphQL API facilitates faster content delivery, while experimental features allow for optimized site rebuilds. At GatsbyConf 2022, Kontent.ai demonstrated these capabilities, highlighting how they simplify multilingual site development and improve build and hosting performance.

GatsbyConf 2022 introduced several new features and updates to enhance the Gatsby Cloud experience. Among the highlights are the public beta launch of Image CDN, which optimizes image delivery, and Incremental Deploys, which speeds up content updates without requiring additional configuration. The conference also announced support for TypeScript, enabling easier integration of new JavaScript features, and introduced CMS Homepage Starters to facilitate quick project initiation with popular CMS platforms like WordPress and Contentful. Enterprises can now benefit from features such as On-Premises GitHub support and private IP addresses, enhancing security and governance. Additionally, new capabilities like geo and language-based redirects, reverse proxy setups, and configurable trailing slashes aim to improve site management and SEO. The event also celebrated the inaugural Gatsby Best of 2021 Agency Awards, recognizing outstanding work by Gatsby partner agencies.

Marketing and engineering teams have traditionally operated in silos, with little interaction due to their differing focuses and skill sets, but integrating these departments is essential for an organization's success. The collaboration between marketing and engineering can enhance a company's speed-to-market and product awareness, as engineers play a critical role in demand generation through their technical capabilities. To bridge this divide, organizations need to redefine roles within a headless CMS strategy, create a marketer-friendly blueprint for seamless adoption, and ensure early cross-functional involvement to prevent project roadblocks. Smaller and larger companies may require different approaches to fostering collaboration, such as regular meetings or shared objectives, and having the right tech stack is crucial for continuous improvement. The importance of this integration, along with strategies to achieve it, will be discussed in detail at GatsbyConf, where Webstacks' representatives will explore how marketing and engineering can unite to develop scalable internet solutions.

Gatsby Cloud has introduced Incremental Deploys for Preview, significantly enhancing the speed of Preview build performance by deploying only the routes and pages that have been updated rather than the entire site. This new feature, announced at GatsbyConf 2022, reduces deploy times dramatically, exemplified by a reduction from 30 seconds to about 1 second for large sites like gatsbyjs.com. Additionally, Gatsby Cloud has launched Content Sync and Preview Status Indicator to improve the user experience for content editors, although these features do not directly affect build performance. Best practices for optimizing Preview performance include avoiding filtering for "published" content in queries, which ensures draft content is included in Previews, and querying for data directly from the page template where it will be used to prevent unnecessary data updates that could disrupt incremental builds. Preview is vital for content editors to visualize their content before it goes live, akin to developers’ use of unit or smoke tests.