We knew we had a problem.

In 2019, SitePoint was get Lighthouse Speed composes under 10 on portable, and between 20 and 30 on desktop.

Our efforts to control UX bloat were disappointing in the aftermath of a publishing business environment that bounce new seeps just as we’d finished temporarily plugging the last one. Our reliance on advertising, controlled by external parties, was a major obstacle to improved site performance. Our traffic growth had turned into decline.

On a site that provided parties with a target to come and learn to code with best traditions, this was not a good seek. And it wasn’t a site we are also able feel proud of, either.

To make matters worse, operational blockages had arisen that made adaptation a tricky logistical business. Our team was struggling to make changes to the site: having be concentrated on our Premium experience for several years, we were down to one make with WordPress and PHP experience. To assessment out system deepens, the team would have to wait in a queue to access our staging server.

It wasn’t energizing work for anyone, and it certainly wasn’t efficient.

It is now time to fix some alterations, and we set out to look for a solution. After a lot of research, we decided that Gatsby would be a great fit for our team. It would play to our flair concentrations, help us solve all of the issues we had identified, and allow us to keep using WordPress for the backend so the editorial process wouldn’t need to change.

Why We Moved to Gatsby SitePoint 2020 Redesign The end result .[/ caption]

Early in the research process, Gatsby started to look like a serious frontrunner. SitePoint isn’t a small site, so we knew that the tech we chose had to be able to handle some pretty intense requires. Gatsby checked all of our containers 😛 TAGEND

We could code everything in React, a tech that all the members of the the front-end team knows and uses daily. Gatsby is super fast at its core — conduct was at the heart of such projects, and we could start from a good foothold. The part locate is rendered as static, which would be great for SEO. We could improve it as a brand-new job, which conveyed no am concerned about the existing codebase, which wreaked a huge amount of gift system with it. We could use Gatsby Cloud, granting the team to get feedback on the build at any time really by advertise the chapter to GitHub. DDoS attacks on WordPress wouldn’t cause us issues, as the front-end is completely stand-alone.

More Maintainable CSS with styled-components

Since we were going to rebuild the site from scratch, we planned to reach some blueprint conversions at the same time. To help with this work we decided to use styled-components.

styled-components keeps the site’s styling easy to maintain, and we know where to look when we want to change the mode of something — the vogue is always with the component.

How We Made the Build Happen

We started by following Gatsby’s basic docs and gathering in our uprights with the gatsby-source-wordpress plugin.

This was a big initial assessment for us: we had to see if it was even possible to use Gatsby for our site.

After 20 years of blogging, we have over 17,000 berths published. We knew the develops would take a long time, but we had to find out if Gatsby could deal with such a massive quantity of the information contained. As you’ve probably figured, the test delivered good bulletin: Gatsby works.

A quick tip for other units working with massive places: to spawn occurrence a better ordeal, we consumed environment vars to prevent Gatsby from retrieving all of the site’s posts in development. There’s nothing fairly like a 60 minute sizzling reload to slow progress.

if( hasNextPage && process.env.NODE_ENV != “development”)

return fetchPosts ( first: 100, after: endCursor );

From this extent, we ran into some limitations with the WordPress source plugin. We couldn’t get all the data we needed, so we moved to the WordPress GraphQL plugin.

We use Yoast to set our metadata for SEO, and had to ensure we were pulling in the accurate information. We were able to do this with WordPress GraphQL. By doing it this style, the content team could still edit metadata the same way, and the data would still be dynamic and delivered on each build.

During the improve, we would have three or four people in the team working on parts of the brand-new blog. In the past, if they wanted to get feedback they’d have to push to our stage server and make sure nobody was already apply it.

We found that Gatsby Cloud was a great solution to this issue. Now when someone pushes to a discipline in GitHub, it creates a build in Gatsby Cloud along with a preview link. Our developers could share this link and get immediate testing and feedback much more effectively than before.

This faster feedback cycle fixed it easy to have multiple beings on the team working on the build and put an end to a major bottleneck.

Propel Day Fun

On the big date, we launched the new website and ran through our initial experiments. The new blog was flying — every page load felt instant.

We ran into some problems on SitePoint Premium, which started running into slows and even gate-crashes. The culprit was a brand-new component on blog pages that plucked in the popular bibles parties were currently reading. It would do this via a client-side API call, and it was too much for Premium to handle due to the amount of traffic we come along the blog side.

We instantly contributed some sheet caching to the API to temporarily solve the issues. We recognise we were doing this wrong — we should have been sourcing this data at develop period, so that the popular notebooks are already loaded when we serve the sheet to the user.

This is the main mindset shift you need to stir when using Gatsby: any data that you can get at body-build term is advisable to fetched at improve experience. You needed to be use client-side API calls when you need live data.

Once we’d re-written the API call to happen during the body-build, the first consignment of a blog sheet was even quicker — and Premium stopped crashing.

What We There is a need to Solve

While it’s hard to overstate how considerably better our on-site experience is today, there are still a few pain levels we need to solve.

If a new article is published, or if content is modernized — as it is multiple times per day — we need to re-run the Gatsby build before these changes show up.

Our solution for that right now is a simple cron job that runs at pre-scheduled times over the course of a period. The long-term solution to this is to add a webhook to the WordPress publish and modernize button, so that a new construct is triggered formerly pressed.

We also need to get incremental erects passing. Right now, the part website needs to be rebuilt each time, and held our content repository, this can take a while. Gatsby just introduced incremental builds as we exited live, and we’re working on implementing this on our place. Once that’s set up our builds will be much faster if the one thing that has changed is content.

Our hurrying rating is still not where we want it to be. While the site feels subjectively very fast, we are still not getting consistent compositions in Lighthouse. We want to get both portable and desktop into the green zone( tallies of 90+) for optimal user experience and SEO.

Would We Do It Again?

A launch of this type would normally be a somewhat nerve-wracking event, and take a lot of work from the team on launching day.

With Gatsby, our open was really easy. We just had to move WordPress onto a new arena, and level sitepoint.com at the Gatsby version of the site.

Then we sat back and watched the numbers to see what happened to our traffic. Within a few days, the data was starting to come in and we were seeing a 15% increase in traffic. User engagement metrics were up across the board. And we hadn’t even removed our ads more( which, you may have noticed, we’ve since done ).

It’s not hard to figure out why the effects were so immediate. We had better SEO loping on static HTML and CSS sheets, and massive race increases done possible by the move to Gatsby.

Since we attained the move, we’ve increased our Lighthouse speed orchestrates from 6-15 on mobile to the 50 -6 0 collection, and from the 30 s on desktop into the 70 s. We wanted to ensure accelerated remained top of mind with this change, so we’re employ a great tool called Calibre that runs quickened research over a number of top sheets each day and notifies us to the scores. We are using this tool to continue to improve our score, so I hope to have another article for you in three months when we get everything to stay in the 90+ range.

The team ardours working in Gatsby. The blog codebase was something that nobody wanted to work on. Now, everybody wants to take those posters thanks to the great developer experience.

If you’ve been eyeing a move to Gatsby and wondering if it’s ready for prime time, take our opinion — it’s worth the switch.

Continue learn

Why We Moved a 20 -Year-Old Site to Gatsby

on SitePoint.

Read more: sitepoint.com