The hosts discuss improving the performance of the Syntax.fm website, including caching, loading transcripts, and optimizing database calls. They also talk about the benefits of using Apollo and Apollo GraphQL, as well as solving issues with LinkedIn using Redis caching.
Read more
AI Summary
Highlights
AI Chapters
Episode notes
auto_awesome
Podcast summary created with Snipd AI
Quick takeaways
Identifying performance issues through the eye test, web vitals, and database query analysis helped prioritize areas for improvement.
Optimizing the loading of transcripts by separating it into its own route and leveraging nested layout routing significantly improved loading time and reduced unnecessary database queries.
Deep dives
Identifying Performance Issues and Metrics
The hosts of the podcast discuss how they identified the performance issues on their website by using the eye test, web vitals, and database query analysis through tools like Sentry. They focused on the slowest routes of the site and analyzed metrics such as time to first byte and opportunity score to prioritize areas for improvement. They also used the queries feature to identify slow database queries and discovered an easy fix by switching from 'find first' to 'find unique' method in Prisma.
Optimizing Transcripts and Database Calls
The hosts explain how they optimized the loading of transcripts on their website by separating it into its own route and serving the data only when the transcript tab is accessed. They leveraged nested layout routing to efficiently handle the different tabs and moved most of the HTML and database calls to the layout and transcript pages. This significantly improved loading time and reduced unnecessary database queries. They also discussed the benefits of using Redis caching with Upstash, which helped in caching database calls, setting cache headers, and improving the initial loading speed.
Caching and Cache Headers
The hosts highlight the importance of caching in improving website performance. They emphasized the use of caching to reduce database queries and speed up the loading of heavy routes. By implementing caching with appropriate cache headers and using tools like Upstash, they were able to cache database calls, set cache expiry times, and efficiently manage the cache. They also mentioned the usefulness of stale while revalidate for caching assets like OG images and handling issues faced when sharing on LinkedIn. Caching proved to be an effective strategy in optimizing the overall performance of their website.
In this episode of Syntax, Wes and Scott talk through the ways they improved performance on the Syntax.fm website, how they knew it was slow to begin with, and the various changes they made to caching, and loading transcripts to improve the speed of the site.