April 2021 Summaries

Moneygeek, a company focused on enhancing financial literacy through educational content and interactive calculators, prepared for Google's mid-2021 Core Web Vitals search update by optimizing their website performance using the Gatsby framework and Strapi CMS. With a strong emphasis on user experience and search engine optimization, the company sought the help of the Gatsby Concierge service to address performance issues and improve page speed scores, particularly for mobile users. The service provided specific recommendations, such as reducing the use of custom fonts and removing unnecessary libraries, which helped Moneygeek achieve significant improvements in their Core Web Vitals metrics. These changes resulted in a notable increase in their page performance scores, ensuring that over 80% of their pages met Google's standards for mobile optimization by the update's rollout, ultimately strengthening their competitive edge in attracting high-intent, targeted users without incurring variable customer acquisition costs.

Gatsby sites are renowned for their speed, and efforts to enhance the Gatsbyjs.com homepage focused on improving its Lighthouse score, a well-known performance metric by Google, which aggregates scores from web vitals. The team identified Time to Interactive (TTI) and Total Blocking Time (TBT) as key areas for improvement and conducted various experiments, such as optimizing font loading, reducing excess code, and disabling offscreen animations. These efforts resulted in a score increase of 22.8 points. Although some experiments, like using the content-visibility CSS property, didn't yield the desired results, the process led to valuable insights and improvements that could benefit the wider Gatsby ecosystem. The team aims to incorporate these lessons into Gatsby's core framework, exploring further enhancements like deferred script initialization and better code bundling, particularly following the upgrade to webpack 5, which significantly reduced the homepage's load size. While acknowledging room for improvement, particularly for mobile users, the team is committed to making Gatsby sites even faster and more efficient, with plans to help other Gatsby sites achieve similar performance gains.

StriVectin improved the performance of its Gatsby-powered e-commerce site by working with Elevar to streamline the handling of third-party scripts, which are often necessary but can significantly impact site speed. By transitioning from Magento to Shopify, Elevar focused on perceived performance rather than just raw load times, employing tools like Google's Lighthouse for continual monitoring and Google Tag Manager to manage script loading. They optimized performance by evaluating the necessity and impact of each script, helping clients choose the best tools, deferring non-critical elements, and maximizing local caching. These measures helped balance business needs with performance, ensuring third-party scripts were integrated in a way that minimized their negative impact on site speed, while still meeting the business's functional requirements. This approach highlights the challenges and creative strategies in optimizing e-commerce platforms that rely heavily on third-party services.

The article explores the comparative benefits and drawbacks of using traditional WordPress versus Gatsby with headless WordPress for web development, particularly in terms of performance and environmental impact. The author highlights the superior image optimization capabilities of Gatsby, which result in smaller file sizes and more efficient data handling, thereby reducing the digital carbon footprint. While traditional WordPress sites are initially smaller and faster to load, Gatsby's use of incremental builds and global edge hosting through Gatsby Cloud significantly improves build and deployment times, making it a more sustainable option. The article underscores that while both platforms have their merits, Gatsby's ongoing innovations contribute to faster, more reliable, and environmentally friendly web experiences. The author suggests that developers consider the specific needs of their projects when choosing between the two technologies, and encourages those interested in sustainable web development to engage in further discussion on the topic.

Elevar's implementation of StriVectin's e-commerce site using Gatsby and Shopify showcases how dynamic e-commerce functionalities such as search, wish lists, and account management can be effectively achieved with strategic engineering solutions. By leveraging React's global state and context, Elevar enabled a fast, client-side experience for browsing and filtering products, reducing the need for server round-trips. Key integrations include Shopify for checkout, ReCharge for subscriptions, and Yotpo for reviews, with clever handoffs maintaining a seamless user experience despite limitations like the inability to preview discounts before checkout. Although the site does not maintain cross-device shopping sessions, it benefits from Gatsby's flexibility and speed, providing a robust platform for dynamic features and proving that a static payload on a CDN can support a full-featured online store.

StriVectin's upgrade of their e-commerce experience involved migrating from Magento to Shopify and integrating Gatsby to enhance their content capabilities. Gatsby's content mesh approach allowed for the incorporation of a headless CMS, Prismic, to manage and enrich product information beyond Shopify's standard fields. This integration enabled the inclusion of diverse content types, such as product experience management, detailed product information, and relational content like blogs. The Elevar team managed the migration of historical orders using Shopify’s tools and Excelify, while the transition from Magento to Prismic required manual content restructuring. Prismic's integration fields facilitated a seamless link between Shopify's core product data and Prismic's flexible content structures, allowing StriVectin to handle all site content within a single tool. Although Prismic lacks built-in content validation, Elevar addressed this through extensive validation during site builds. The use of Gatsby also simplified the creation of localized site versions, demonstrating the flexibility and efficiency of a headless e-commerce approach.

Paul Scanlon's blog post provides a comprehensive guide on using the new Gatsby Image Plugin with MDX for embedding images in a Gatsby project. The article explains how MDX frontmatter can store references to local and remote images, which can then be rendered using the <GatsbyImage /> component from gatsby-plugin-image. While the plugin works seamlessly in JSX, challenges arise when rendering images from MDX due to differences in how image data is processed and queried. To address this, the post outlines a method involving gatsby-node.js to process frontmatter fields and use GraphQL type inference to correctly handle image URLs as File types, enabling the use of remote images with Gatsby's data layer. This approach ensures the maintenance of fast site speeds and image optimization, complete with examples and a demo site for practical reference.

The #100DaysOfGatsby 2021 challenge reached its conclusion on April 12th, marking the 100th day of the year and the end of this year's event. Participants, assuming the role of "Dev" at a fictional startup, progressed through a series of five challenges designed to build and enhance a Gatsby site. These tasks included creating a proof of concept using Contentful, launching a site with improved style and performance, integrating a WordPress blog, adding a Shopify swag store, and developing a Gatsby Theme for site scalability. Each challenge aimed to demonstrate Gatsby's capabilities in handling multiple data sources and customizing sites through its plugin ecosystem. Participants received support through Gatsby's GitHub Discussions forum, Discord community, and instructional videos. The challenge fostered a community of developers who shared progress and solutions, and it encouraged ongoing participation with the promise of another round starting January 1, 2022.

Elevar's experience migrating StriVectin from Magento to a Gatsby and Shopify framework underscored the advantages of using Storybook in conjunction with Gatsby to support a modular design process. By isolating UI component development with Storybook, the team could focus on creating and testing React components without being bogged down by early decisions regarding hosting and content management systems. This approach allowed them to delay significant technical decisions, enabling flexibility and reducing complexity during the project's initial phases. Despite some challenges in integrating user experiences like account management and checkout between Gatsby and Shopify, the modular strategy facilitated by Storybook allowed Elevar to efficiently prototype and iterate, eventually leading to a successful outcome that satisfied the client. The process emphasized the importance of focusing on component design and functionality first, which streamlined the transition of components into Gatsby pages and ultimately enhanced the project's quality and client satisfaction.

In his blog post, Paul Scanlon provides a comprehensive guide on integrating Gatsby with WordPress using the gatsby-source-wordpress plugin, structured as a "choose your own adventure" to accommodate different learning styles. He identifies gaps in the official documentation and offers a step-by-step approach to create a headless WordPress site with Gatsby, beginning with setting up a WordPress instance and installing the necessary plugins WPGraphQL and WPGatsby. The guide details configuring GraphQL, setting up a minimal Gatsby site, and using gatsby-node.js to create pages in Gatsby using WordPress data. Scanlon also explains how to add navigation to the Gatsby site by querying menu items from WordPress and wrapping page elements with a custom layout in gatsby-browser.js. The post emphasizes the importance of understanding the integration process to ensure a functional and navigable site, concluding with a link to a demo website and GitHub repo containing all the code discussed.

Celebrating its 75th anniversary, Fender Musical Instruments Corporation, renowned for its iconic guitars and amplifiers, is embracing digital technology to enhance its online presence and engage with users more effectively. To improve the performance of its flagship website, Fender.com, the company adopted Gatsby, a fast and efficient framework, to streamline site functionality and reduce load times. This transition led to significantly improved performance metrics, including a 63% faster first contentful paint and a 275% improvement in Lighthouse scores. The integration of Gatsby, along with the alignment of Contentful CMS and existing React components, facilitated a seamless transition that enhanced user engagement and site navigation. Fender's initiative has not only improved client experience but also boosted SEO rankings, enabling users to interact more with the site's diverse offerings, such as virtual guitar lessons and product information. As Fender continues to expand its digital footprint, Gatsby is set to play an increasingly integral role in its strategy, with plans to integrate more marketing content and applications like Fender Play into the platform.

StriVectin, a leading skincare brand, collaborated with digital agency Elevar to modernize their e-commerce platform by transitioning from Magento to Shopify with the help of Gatsby. Faced with the challenges of a legacy system, Elevar leveraged Gatsby's flexibility to quickly prototype a new site using StriVectin's existing design and data from their Magento database. By employing a GraphQL wrapper, Elevar was able to efficiently demonstrate the potential benefits of using Gatsby, such as improved performance, security, and reduced server costs. This approach not only addressed StriVectin's previous issues with site performance during high-traffic events like Black Friday but also provided a scalable solution that could be adapted for future projects. The success of the prototype showcased the advantages of a static site powered by Gatsby, ultimately leading to a smooth transition to Shopify while maintaining the ability to easily modify individual components without being locked into a single platform.

The "Voices of Gatsby" series, written by Eric Howey, explores the pressures of the tech industry, particularly the culture of rushing and its detrimental effects on productivity and personal well-being. Highlighting the paradox that slowing down can enhance both speed and decision-making, the text critiques the hustle mentality pervasive in tech and its alignment with burnout culture, which disproportionately affects underrepresented communities due to existing structural barriers. Howey shares personal and professional anecdotes, supported by research, illustrating how stress and time pressure impair cognitive functions like working memory, leading to poor decision-making and negative health outcomes. He advocates for intentional slowing down, using methods such as perspective-taking and collaboration for better decision-making and improved outcomes, drawing parallels to successful business strategies and practices in the tech sector. The piece also touches on the personal privilege Howey acknowledges as a white male in tech and emphasizes the importance of intentional, inclusive practices to foster healthier work environments.

The blog post by Paul Scanlon explores the integration of Gatsby with headless WordPress using the gatsby-source-wordpress plugin, highlighting the potential for transforming WordPress into a more flexible and developer-friendly CMS. Despite initial reservations about WordPress, Scanlon demonstrates how the combination of Gatsby and WPGraphQL enables developers to leverage WordPress as a data source while maintaining the benefits of a Gatsby site, such as improved speed and efficiency. The post details various technical implementations, including the use of Advanced Custom Fields and Custom Post Types to create dynamic, interactive content that can be queried and displayed in innovative ways with Gatsby. Scanlon also addresses challenges encountered, such as the proper querying of media files, and offers solutions for incorporating Gutenberg CSS into Gatsby projects to ensure consistent styling. Ultimately, the project showcases the capability of Gatsby to work harmoniously with WordPress, suggesting a promising future for headless WordPress development.