Rebuilding our tech stack for the new Facebook.com

Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features. Each of these new features an…

Meta logo
Meta
•
Ashley Watkins
•19 min read•intermediate•
--
•View Original
CometGraphQLHTMLJavaScriptPHPReact

Overview

The article discusses the comprehensive redesign of Facebook.com, focusing on the challenges faced with the existing tech stack and the strategies employed to improve performance and user experience. Key technologies like React and Relay were utilized to create a more interactive, client-driven web application.

What You'll Learn

1

How to reduce CSS size by 80% using atomic CSS techniques

2

Why code-splitting is essential for improving JavaScript performance in web apps

3

How to implement data preloading strategies to enhance user experience

Prerequisites & Requirements

  • Understanding of CSS and JavaScript performance optimization techniques
  • Familiarity with React and GraphQL(optional)

Key Questions Answered

How did Facebook reduce CSS on their homepage by 80%?
Facebook achieved an 80% reduction in CSS by implementing atomic CSS, which allows for a smaller, more efficient stylesheet that only includes the styles necessary for the initial render. This approach minimizes unused CSS and improves maintainability by colocating styles with components.
What strategies did Facebook use for code-splitting in their new tech stack?
Facebook introduced a three-tier code-splitting strategy to optimize JavaScript loading. Tier 1 includes essential layout code for the initial display, Tier 2 contains all above-the-fold content, and Tier 3 includes non-essential code that can load after the initial render, improving time to first paint.
Why is modernizing data-fetching important for web applications?
Modernizing data-fetching allows for faster and more efficient data retrieval. By using GraphQL and Relay, Facebook can preload data during the initial server request, stream data to the client, and defer non-essential data, enhancing the overall user experience and reducing load times.

Key Statistics & Figures

Reduction in homepage CSS
80%
Achieved through the implementation of atomic CSS.
CSS size on old site
400 KB compressed
2 MB uncompressed

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used for building user interfaces in the new Facebook.com.
Data-fetching
Relay
A GraphQL client used to manage data-fetching for the application.
Data-fetching
Graphql
Standardized data-fetching across the new site.

Key Actionable Insights

1
Implement atomic CSS to significantly reduce the size of your stylesheets and improve loading times.
By adopting atomic CSS, you can ensure that only the necessary styles are loaded for each component, which can lead to faster rendering and a better user experience.
2
Utilize code-splitting techniques to enhance the performance of your JavaScript applications.
By breaking your JavaScript into smaller chunks that load as needed, you can reduce the initial load time and improve the responsiveness of your application.
3
Adopt data preloading strategies to minimize round trips and enhance interactivity.
Preloading data during the initial request allows your application to render content faster, providing a smoother experience for users as they navigate through your app.

Common Pitfalls

1
Failing to manage CSS size can lead to performance degradation over time.
As new features are added, CSS can grow uncontrollably, making it difficult to maintain and leading to slower load times. Implementing atomic CSS helps mitigate this issue.
2
Not using code-splitting can result in large JavaScript bundles that slow down initial page loads.
Without code-splitting, users may experience delays as the entire application loads at once. This can be avoided by strategically splitting code into smaller, manageable chunks.

Related Concepts

Performance Optimization Techniques In Web Development
Best Practices For CSS Management
Advanced Javascript Loading Strategies