cover art for Dan Shappir: How to Maximize Web Performance

ConTejas Code

Dan Shappir: How to Maximize Web Performance


- Codecrafters (sponsor):

- Improving Wix Performance:

- Dan on X:

- Tejas on X:


In this episode, Dan Shappir discusses his journey in web performance, starting from gaming networks before the web. He explains the web vs. internet distinction, offline-first web apps, and remote access solutions. Dan's role at Next Insurance as a performance tech lead is highlighted. The talk covers improving browser performance, server-side rendering at Wix, modern CSS, CDNs, backend issues, and encapsulation impacts. Dan and Tejas discuss the BF cache's workings, browser compatibility, and telemetry impacts. Tips for staying updated in tech are shared, emphasizing passion and teaching. The episode concludes with support for Gaza and the Speculation Rules API.


1. Avoid overloading the browser with excessive JavaScript, CSS, and HTML.

2. Keep things small and lean to improve performance.

3. Implement server-side rendering, use modern CSS, and leverage caching with CDNs to enhance performance.

4. To stay relevant in the tech industry, follow your passion, accept that you can't know everything, and focus on understanding core concepts rather than chasing every new technology.

5. The BF cache (back-forward cache) allows browsers to store a memory snapshot of a web page when the user navigates away, enabling instant retrieval when the user returns.


00:00 Introduction and Honoring the Situation

01:17 Dan's Background and Early Career

07:46 Dan's Journey into Web Performance

15:09 Offline-First Web Application

25:34 Joining Wix and Improving Performance

34:09 Transition to Next Insurance

45:46 The Beauty of Constraints

59:13 Using CSS for Layout

01:04:12 Backend Performance Issues

01:20:30 BF Cache

01:25:32 Performance Strategies

01:31:25 Advice for Staying Relevant in Tech

01:42:42 Speculation Rules API

01:43:14 Resource Hints: Prefetch and Preload

01:48:12 Script Tags and JSON Representation

01:51:39 Closing Remarks and Homework

More episodes

View all episodes

  • Erik Rasmussen: How to Build a Career on Open Source, Solid.js, Form Libraries

    Links- CodeCrafters (sponsor): Solid Final Form post: Erik on X: Erik on GitHub: Tejas on X: this conversation, Eric Rasmussen discusses his experiences with open source and public speaking, as well as the development and differences between Redux Form and React Final Form. He also explores the value of form libraries and the challenges of coupling and modularity. Additionally, he shares his thoughts on Solid.js and its approach to granular rendering, as well as the potential integration of Solid.js and Final Form for building forms. In this conversation, Erik Rasmussen discusses his experience building forms with Solid and Redux Form. He shares the motivation behind creating Redux Form as a library and the decision to open source it. Erik also talks about the challenges and rewards of maintaining open source projects and the importance of saying no to feature requests. He explores the use of XState on the server side and the benefits of using state machines and state charts. Finally, Erik reflects on the current state of Redux and Solid.js and offers lessons learned from his open source journey.Takeaways1. Open source work can lead to opportunities for public speaking at conferences.2. Form libraries like Redux Form and React Final Form provide valuable solutions for managing form state and validation.3. Modularity is important in library design to allow users to choose and include only the necessary functionality.4. Solid.js offers a different approach to rendering and state management, which can result in more efficient updates.5. Integrating Solid.js and Final Form could provide a powerful solution for building forms with granular rendering and reactivity. 6. Maintaining open source projects requires balancing feature requests and maintaining scope.6. Using XState on the server side allows for modeling complex flows and maintaining state.7. State machines and state charts provide a visual way to understand and manage application logic.8. The Redux ecosystem is still relevant and evolving, while Solid.js offers a novel approach to building UIs.Chapters03:56 Introduction and Early Experiences08:14 Getting into Public Speaking12:60 Redux Form and React Final Form29:61 Coupling and Modularity in Libraries32:32 Solid.js and Granular Rendering37:57 Solid.js and Final Form Integration42:15 Challenges with Solid.js Forms44:33 Building Forms with Solid and Redux Form45:57 Creating Redux Form as a Library49:22 Maintaining Open Source Projects52:30 Considerations for Open Sourcing Projects57:34 Using XState on the Server Side01:00:34 Understanding State Machines and State Charts01:11:22 The State of Redux and Solid.js01:18:32 Lessons Learned from Maintaining Open Source Projects
  • Monica Sarbu, CEO Xata: Building a Postgres Platform, an All-Female Board, and ~50% Gender Diversity

    Links- Codecrafters (sponsor): Xata: Tupu: Monica on X: Tejas on X: Sarbu, the founder and CEO of Xata, shares the story of founding Xata. She discusses the challenges of being a woman founder in a male-dominated industry and the importance of open source in her career. Monica also talks about the transition from being a founder to a director at Elastic and the role of titles and hierarchy in organizations. She highlights the significance of happiness and motivation in building successful teams.Monica talks about the journey of building Xata, a Postgres data platform, and how it was inspired by the need she discovered while building Tupu. Xata aims to provide the usability of Airtable on top of a traditional database, with the goal of empowering companies to build products with fewer resources. The platform offers features like full-text search, schema migrations with zero downtime, and a spreadsheet-like UI. Monica also discusses the challenges of running a company and the importance of diversity and culture.Takeaways1. Monica Sarbu shares her journey from building Packetbeat to founding Xata.2. She discusses the challenges of being a woman founder in a male-dominated industry.3. Monica highlights the importance of open source in her career.4. She talks about the transition from being a founder to a director at Elastic and the role of titles and hierarchy in organizations.5. Monica emphasizes the significance of happiness and motivation in building successful teams.6. Xata was built to address the need Monica discovered while building Tupu, and aims to provide the usability of Airtable on top of a traditional database.7. The platform offers features like full-text search, schema migrations with zero downtime, and a spreadsheet-like UI.8. Monica emphasizes the importance of diversity and culture in the company, and the need to support and empower female engineers.9. She believes that every company's journey is different, and it's important for founders to have a plan and prioritize what is important to them.Chapters05:08 Introduction and Background07:14 Building Packetbeat and the Power of Open Source13:46 Differentiating Packetbeat from Other Monitoring Tools19:25 Challenges and Benefits of Building in a Crowded Market34:51 The Importance of Happiness and Motivation in Building Teams48:27 The Relationship Between Tupu and Zeta50:15 The State of Tupu and the Challenges of Non-Profit Organizations56:04 The Journey of Zeta's Development58:26 Zeta's Full-Text Search and Postgres Compatibility01:01:23 Zero Downtime Migrations and Direct Postgres Interfacing01:04:33 Zeta's Roadmap and Self-Hosting Capabilities01:10:35 The Importance of Diversity and Culture at Zeta01:18:26 Zeta's Chat GPT Feature and Future Plans01:21:04 The Challenges and Priorities of Running a Company01:31:29 The Importance of Diversity and Empowering Women
  • Rachel Nabors: How to Navigate Big Tech, the Future of DevRel, Documentation

    Links- Codecrafters (sponsor): Rachel's book "The Tech Career Survival Guide": Rachel on X: Nabors (they/them), a developer relations expert with an incredible track record discusses their career journey and the challenges of pricing and valuing their work in the developer relations industry. They emphasize the importance of knowing your worth and setting appropriate hourly rates based on your skills and the value you bring to the table. Rachel also highlights the need for building trusted relationships with your community and collaborating with companies to create products that align with your audience's needs. Takeaways1. Know your worth and set appropriate hourly rates based on your skills and the value you bring to the table.2. Build trusted relationships with your community and collaborate with companies to create products that align with your audience's needs.3. Acknowledge the transactional nature of the influencer industry but maintain your values and advocate for fair compensation.4. Balance the tension between working for a company and maintaining your integrity by establishing collaboration agreements that emphasize mutual benefit. 5. DevRel should be involved in shaping the product and providing valuable feedback.6. The line between DevRel and marketing should be clarified to avoid undervaluing the engineering contributions of DevRel.7. The role of DevRel varies depending on the stage of the company, with more need for DevRel in early-stage or large companies.8. Documentation plays a crucial role in learning React, and progressive disclosure is an effective pattern for presenting information. User experience is crucial in documentation, and features like AI-generated pop-ups and special links can greatly enhance the user's understanding and navigation.9. People often discover documentation through search engines like Google, so it's important to optimize content for search and provide solutions to common errors and problems.10. In workplace dynamics, it's important to communicate with managers about issues like dominating conversations and lack of participation, either directly or through anonymous feedback channels.Chapters00:02:49 Introduction and Career Background00:04:49 Running a Developer Relations Consultancy and Influencer Agency00:07:07 Pricing and Determining Your Worth00:11:11 Negotiating and Advocating for Fair Compensation00:15:59 Value-Based Pricing and Collaborations00:25:12 Maintaining Integrity in the Influencer Industry00:30:11 Balancing Work and Trust with Companies00:33:20 Collaboration Challenges between DevRel and Product/Engineering Teams00:39:20 The Evolution of DevRel: From Evangelists to Influencers00:47:30 The Importance of DevRel in Shaping the Product00:59:42 The Role of Documentation in Learning React01:06:17 Enhancing User Experience in Documentation01:09:19 Optimizing Documentation for Search and Problem Solving01:11:57 Conveying Core Knowledge and Creating Accessible Content01:15:28 Collaboration between Documentation Teams and Developer Advocates01:22:16 Navigating Workplace Dynamics and Communication
  • Brandon Bayer, CEO Flightcontrol: How to unlock peak velocity on AWS

    Links- Sponsors and Partners - Codecrafters (sponsor): - THAT Conference: - Stately: Guest Content - Flightcontrol: - Blitz.js: - Brandon on X: Book Recommendations and Resources - Full type-safety for Next.js routes: - Obviously Awesome: - Psych framework: Tejas on X: Bayer, the creator of Blitz.js and co-founder of Flightcontrol discusses his journey in open source and the challenges of building full-stack frameworks in the JavaScript ecosystem. He explains the motivation behind creating Flightcontrol, a platform-as-a-service for deploying production applications to your own AWS account. Brandon also shares insights into the pricing model of Flightcontrol and the trade-offs between using a platform-as-a-service and self-hosting with a VPS. He discusses the technical challenges of migrating from PlanetScale to AWS Aurora and highlights the benefits of using Flightcontrol for long-running function invocations. Flightcontrol was backed by Y Combinator (YC)—an experience that was instrumental in helping Flightcontrol raise funding and providing valuable mentorship and networking opportunities.Takeaways1. Building full-stack frameworks in the JavaScript ecosystem is challenging due to the complexity and fast-changing nature of the ecosystem.2. Flightcontrol is a platform-as-a-service that allows developers to deploy production applications to their own AWS account, providing reliability, flexibility, and performance.3. Self-hosting with a VPS offers more control and lower costs, but it requires more management and may not be suitable for large-scale startups.4. Flightcontrol enables arbitrarily long-running function invocations, making it suitable for tasks like web scraping and data processing. 5. Flightcontrol is focused on removing barriers to adoption and improving their marketing and positioning6. The Y Combinator experience helped Flightcontrol raise funding and provided valuable mentorship and networking opportunitiesChapters03:41 Introduction and Background17:05 The Pricing Model of Flightcontrol and the Trade-Offs of Platform-as-a-Service vs. Self-Hosting53:23 Removing Barriers to Adoption1:00:23 Marketing and Positioning as a Reliable Platform as a Service1:13:07 Accepting the Truth and Embracing It1:22:55 The Impact of Y Combinator
  • Anjana Vakil: How to Get into Tech and be Successful

    Links- Codecrafters (Sponsor): Outreachy: Recurse Center: Tejas on X: discusses her journey into tech, including her background in computational linguistics and her experience in various roles within the tech industry. She highlights the importance of following one's passion and finding meaning in work. The conversation also touches on the need for the tech industry to prioritize human well-being and collaboration over profit and productivity. In this conversation, I and Anjana Vakil discuss the importance of shifting our mindset from a focus on productivity and economic success to one that prioritizes human flourishing and collective well-being. We explore the toxic nature of the competitive scarcity mindset prevalent in the tech industry and advocate for a more collaborative and community-oriented approach. We emphasize the need to recognize the value of every individual and the interconnectedness of all living beings. We also discuss the role of technology in addressing global challenges and the responsibility of tech professionals to use their skills for the betterment of society.Takeaways1. Tech careers can be pursued by individuals from diverse backgrounds and with non-linear trajectories.2. Programs like the Recurse Center and Outreachy provide opportunities for career changers and underrepresented groups to gain experience and contribute to the tech industry.3. The tech industry should prioritize human well-being and collaboration over profit and productivity.4. Success should be measured by the impact on individuals, communities, and the environment, rather than financial gain.5. Tech professionals have the power to shape the direction of the industry and should use their privilege to advocate for positive change.6. Shifting our mindset from productivity and economic success to human flourishing and collective well-being is crucial.7. The toxic productivity and competitive scarcity mindset prevalent in the tech industry need to be challenged.8. Recognizing the value of every individual and the interconnectedness of all living beings is essential.9. Tech professionals have a responsibility to use their skills and technology for the betterment of society and to address global challenges.Chapters03:39 Anjana's Non-Linear Tech Career15:21 The Intersection of Tech and Computational Linguistics27:00 Redefining Success in Tech32:10 Using Privilege to Advocate for Change48:55 Shifting Mindsets: From Productivity to Human Flourishing53:09 Tech's Role in Addressing Global Challenges55:33 Practical Protocols for Coping with the Current Context59:23 Community: Central to Software Development01:05:03 Scarcity Mindset vs. Abundance Mindset01:17:13 Cooperative Mindset: Surviving Scarcity Together01:24:34 Tech's Responsibility: Solving the World's Problems Together01:29:25 Recognizing the Value of Every Individual and the Interconnectedness of All
  • Clark Sell, Founder THAT Conference: How to Organize a Large Multidisciplinary Tech Conference

    LinksCodecrafters (sponsor): Conference: on X: Conference on X: on X: Sell discusses the origins and purpose of THAT Conference, a multi-day conference for software engineers and their families. He emphasizes the importance of human connection and the need for conferences to provide a space for engineers to learn, grow, and connect with others in the industry. Clark also addresses the challenges of balancing technical and soft skills in conference programming and the value of attending conferences for personal and professional development. This conversation explores the challenges and complexities of organizing a large conference, focusing on the specific example of That Conference. The chapters cover topics such as the difficulties of booking venues and the long-term contracts and financial commitments involved. TakeawaysFinding your why and being clear about your motivations is essential when starting a conference.Conferences should prioritize the human side of tech, offering a balance of technical and soft skills talks to help engineers become better individuals and professionals.Attending conferences can have a significant impact on mental health and well-being, especially for remote workers who may feel isolated in their careers.Companies should recognize the value of conferences and allocate budget for employees to attend, as it contributes to their personal and professional development. Organizing a large conference involves challenges such as booking venues and dealing with long-term contracts and financial commitments.Sponsors play a crucial role in supporting conferences and their involvement can be both sought after and initiated by the organizers.Building a tribe of organizers and engaging with other conference organizers can provide valuable support and insights.Chapters06:49 Starting That Conference15:40 The Purpose of That Conference28:53 The Importance of Human Connection33:18 The Value of Attending Conferences37:21 Agent Conf and the Importance of Tech39:13 Organic Panel Discussion and Open Spaces40:04 Exploring New Conference Formats41:02 The Importance of Open Spaces41:59 Blowing Up the Conference Format44:03 The Challenge of Selling White Spaces45:33 The Role of Hackathons46:27 Building a Custom Conference Platform48:07 Motivation Behind Building a Custom Platform50:07 Using Google Sheets as the Front End51:52 The Stack and Open Source Nature of the Platform55:19 Refactoring and Rebuilding the Platform59:05 The Challenges of Organizing a Conference01:01:31 Encouraging Speakers to Put Effort into Submissions01:05:40 The Financial Challenges of Organizing a Conference01:09:52 Considering Dropping Food from the Conference01:11:06 Exploring a Kickstarter-like Model for Ticket Sales01:12:11 Challenges of Booking Venues01:12:54 Long-Term Contracts and Financial Commitments01:14:35 The Ugly Side of Contracts01:17:03 The Entrapment of Venue Commitments01:18:00 Financial Struggles and Commitments01:18:56 The Role of Sponsors01:20:27 Sales and Sponsorship Relationships01:24:08 Starting a Conference: Find Your Why01:25:39 Building a Tribe of Organizers01:26:33 Engaging with Other Organizers01:28:19 The Importance of Balance and Sustainability01:32:44 Contributing and Getting Involved with the Conference
  • Steven Fabre, CEO Liveblocks: How We're Building Realtime Collaboration, Design Engineering

    Links- Codecrafters (Sponsor): Liveblocks: Steven on X: Tejas on X: Fabre, the co-founder of Liveblocks, shares his journey from a design-focused background to starting his own company. He discusses the importance of combining design and engineering skills and the challenges of building a collaborative dev tool. Steven also talks about the decision to raise venture capital and the trade-offs between being an indie developer and seeking VC funding. He shares insights on starting a company during the pandemic and dealing with stress and anxiety as a founder. Finally, he touches on the benefits and challenges of remote work. Liveblocks is a platform that enables developers to add real-time collaboration features to their applications. It offers low-level APIs and pre-built React components for easy integration. The key to effective remote work, according to Liveblocks, is being truly remote-first and having time zone overlap. They also emphasize the importance of being intentional about culture and recognition in a remote team. Liveblocks recently announced a new product called Text Editor, which provides integration to make any text editor collaborative. They are also launching comments and notifications out of beta.Takeaways1. Combining design and engineering skills can lead to building polished and visually appealing products.2. Starting a company around a problem you personally face can provide unique insights and timing advantages.3. Dealing with stress and anxiety as a founder requires finding a balance, prioritizing sleep, and maintaining a healthy lifestyle.4. Being truly remote-first and having time zone overlap are key to effective remote work.5. Being intentional about culture and recognition is important in a remote team.Chapters* [00:03:34] Introduction and Background* [00:05:55] The Journey from Design to Starting Liveblocks* [00:10:15] The Role of Design Engineers in Building Polished Products* [00:17:45] The Trade-Offs of Indie Development vs. Venture Capital* [00:30:13] Dealing with Stress and Anxiety as a Founder* [00:33:54] Unlocking the Benefits of Remote Work* [00:37:36] Creating a Remote-First Culture* [00:43:34] Introducing Liveblocks: Enabling Real-Time Collaboration* [00:54:23] Unveiling the Future of Collaboration with Liveblocks* [01:04:45] Building a Useful and Non-Overwhelming Notification System* [01:07:55] The Importance of Positioning and Marketing* [01:12:51] Showing Momentum and Providing Value* [01:22:52] The Challenges of Being a CEO
  • David Khourshid, CEO How State Machines Create Robust Software

    Links- Codecrafters (sponsor): Stately: XState on GitHub: David on X: Tejas on X: this conversation, David Khourshid (CEO, discusses XState, a state management library that uses state machines and the actor model to solve complex state management problems. He explains that state management is not a problem in itself, but it becomes complex when frameworks and libraries expect state updates in different ways. XState provides a simpler model for managing complex state by using state machines and transitions triggered by events. David also introduces the concept of state charts, which take state machines to the next level by allowing for hierarchy and orthogonality. XState provides tools for visualizing state machines and helps identify modeling issues early in the software development lifecycle. We continue to discuss the use of agents in observing environments and the potential for building practical applications using state machines. David shares his journey of founding Stately and productizing XState, highlighting the challenges and lessons he has learned as a first-time CEO. They also touch on the importance of making mistakes, transitioning to a paid model, and the future plans for Stately.Takeaways- State management becomes complex when frameworks and libraries expect state updates in different ways.- XState provides a simpler model for managing complex state by using state machines and transitions triggered by events.- State charts, a more advanced form of state machines, allow for hierarchy and orthogonality.- State machines are useful in AI programming and can be used to build agents that observe environments and take actions based on goals.- As a first-time CEO, it is important to make mistakes, learn from them, and be open to continuous learning and improvement.- Transitioning to a paid model can help focus on users who have real use cases and are willing to pay for advanced features.Chapters[00:03:17] Introduction and Background[00:05:28] The Problem of State Management[00:09:16] XState: A Solution for Complex State Management[00:13:27] XState and Conflict-Free Replicated Data Types (CRDTs)[00:15:55] State Machines and State Charts[00:29:45] Orthogonality and Modeling Complex States[00:33:11] The Value of State Machines in Software Development[00:35:32] The Use Cases for State Machines[00:39:40] Balancing Time Investment and Fast-Paced Development[00:45:20] The Connection Between State Machines and AI[00:50:47] The Potential of AI in[01:01:35] Understanding the Actor Model[01:09:19] Building a To-Do App with XState[01:10:17] Introduction to X-State and Actor Interface[01:11:32] Snapshot and State in X-State[01:12:54] Agents and Observing Environments[01:14:16] State Machines in AI Programming[01:15:17] Building State Machines for Practical Applications[01:16:52] State Machines and AI Limitations[01:18:34] Founding Stately and Productizing X-State[01:21:20] Challenges and Lessons as a First-Time CEO[01:24:46] Importance of Making Mistakes and Learning[01:27:03] Transitioning to a Paid Model[01:30:32] Future Plans for Stately
  • Mark Erikson: How is Built, Maintaining Redux

    Links- Codecrafters (sponsor): Replay Protocol Examples: Mark on X: Tejas on X: Erikson, the maintainer of Redux and developer at, discusses the process of modernizing the Firefox DevTools UI (a React app!) and the challenges of code migration. He shares insights on migrating to TypeScript and the value of staying up to date with the latest techniques. Mark also explains how Replay captures and transmits data for debugging purposes. Replay is a tool that captures and replays browser interactions for debugging purposes. It requires a browser because extensions do not have the same privileged access as a browser. During the recording phase, Replay captures network data. The captured data is stored in a binary archive. When a user opens the debugger, the recording is downloaded and cached in the backend. The debugger includes a video playback feature, which is actually a series of JPEG images rendered on a canvas. The element picker in the debugger is a bespoke canvas that interacts with the paused browser process. In this conversation, Mark Erikson discusses the capabilities of Replay, a debugging tool for web applications. He explains how Replay allows developers to console log in replays, run code in the browser, and work with source maps and minified code. Mark also discusses the use of Replay in Node.js and the ability to manipulate events in replays. He highlights the backend API of Replay and the potential for future features such as root cause analysis and React time travel.Takeaways1. Modernizing legacy codebases requires careful planning and a step-by-step approach.2. Migrating to TypeScript can improve code maintainability and reduce bugs.3. captures and transmits browser events and interactions for debugging purposes. 4. Extensions do not have the same privileged access as a browser, which is why Replay requires a browser.5. Replay can be used in Node.js environments, and developers can manipulate events in replays to simulate different outcomes.6. Future features of Replay include root cause analysis and React time travel, which will further enhance the debugging experience for developers.Chapters00:02:40 Introduction and Background00:03:59 and Time Travel Debugger00:08:48 Modernizing the Codebase00:11:44 The Challenges of Code Migration00:13:39 Finding Joy in Legacy Code00:16:11 Migrating to TypeScript00:19:16 The Process of Modernization00:30:19 The Pressure and Value of Modernization00:35:47 The Trade-offs of Using the Latest Techniques00:37:12 Capturing and Transmitting Data in Replay00:38:11 Replay: Capturing and Replaying Browser Interactions00:45:56 Why Replay Requires a Browser00:46:51 Capturing Network Data and Security Concerns00:48:54 Recording and Storing the Binary Archive00:56:21 Downloading and Caching the Recording00:58:46 Pre-Processing and Caching Basic Data01:03:30 The Video Playback and Memory Snapshots01:10:39 Inspecting Elements and the Bespoke Canvas01:14:26 Building the Replay Debugger01:16:49 Replay's Capabilities01:18:12 Console Logging in Replays01:19:50 Running Code in the Browser01:20:51 Source Maps and Minified Code01:22:44 Shipping Source Maps01:25:41 Replay in Node.js01:26:12 Using Replay in the Terminal01:33:50 Manipulating Events in Replay01:38:02 Replay's Backend API01:51:33 Future Features: Root Cause Analysis and React Time Travel01:54:41 Closing Remarks