When you visit the homepage of dev.to, the page itself is cached on the edge so that it's delivered to you as quickly as possible from the closest server.
That's great, but this static delivery also means we can't immediately show your personalized feed and sidebar based on the tags and people you've followed.
To get that information, we call for your feed asynchronously, and that request goes all the way to the database to load the response dynamically.
This is a normal pattern, but it's annoying to stare at a loading screen, and that wait was often longer than we wanted. This delay is caused by a waterfall of other resources that must load first, like CSS, JavaScript, and images.
A simple optimization
We recently made an adjustment to prioritize your feed by adding a "preload" directive to the top of the homepage's <head>.
It looks like this:
<link rel="preload" href="/stories/feed/?page=1&type_of=discover" as="fetch" crossorigin="same-origin">
This simple line gives the browser the directive to prioritize this endpoint ahead of some other resources it might have otherwise prioritized. Be judicious with which resources you choose to signal the browser to prioritize. When everything is important, nothing is important, but if you have endpoints critical to the user experience, help the browser out and tell it what to do!
Go to the homepage and refresh. If you can remember what it was like a few days ago, you should notice a snappier experience. It won't be perfect every time due to a bit of variance, but it's a clear improvement.
No thorough before/after measurements were taken — but the results are obvious. The feed and sidebar load substantially faster than before. These critical resource are among the first to be loaded instead of being buried beneath images which can easily be bumped down a spot without negatively impacting the user experience.
Everything ships to Forem
DEV runs on the Forem open source code — and we have recently begun expanding the capabilities for maximum re-use of the Forem software. We hope this will empower more self-hosting in the future and all these improvements ship in every one of those instances.
Self-hosting is still a bit too complicated for major adoption and we have not been able to prioritize resolving — but in the meantime we have launched subforems. core.forem.com is where we mostly post little updates about the project.
If you manage a software project and are interested in spinning up yourproject.forem.com, this is a use case we're interested in supporting. Fill out the form if this is something you're curious about.
Happy coding!
Top comments (1)
Wow, that’s awesome. Thank you for sharing this! It’s amazing how such a small optimization can make a noticeable difference in performance. Really appreciate the transparency and detailed breakdown!