Moving Surfing Nosara from Drupal 7 to Gatsby

SurfingNosara.com is Nosara’s leading surf, real estate and vacation rental portal.

The client approached Desarol to improve and add features to SurfingNosara.com. We scheduled a workshop where we addressed the client’s most pressing issues and offered some suggestions of our own. We established the following priorities:

• Speed: We communicated the importance of speeding up the website. It was taking up to 14 seconds to load and was even slower on remote Costa Rican mobile connections.

• Integration: Pull properties from a 3rd party real estate listing API so they can add properties directly into their CRM, which they use more heavily than the Drupal site and use to share properties with other outlets.

• Interactivity: There were UX issues with how forms, galleries and filters operated.

• Developer Experience: The legacy website site was very time consuming to develop, none of Surfing Nosara’s plans would have been possible without being able to quickly (thus affordably) iterate on the application.

• Experience: We recommended they move the surf report to the home page, since it was the most used feature of the website and drove the most traffic.

• Responsivity: The mobile experience, on top of being slow, had many layout, padding, and navigation issues. 60% of their traffic came from mobile devices and the responsive layout seemed to be an afterthought when the theme was implemented years ago.

• Analysis: We wanted to be able to understand better how leads were generated around the website.

We were left at the end debating over whether to move forward with feature requests relating to the priorities above in Drupal 7, upgrading to Drupal 8, or building a headless theme in GatsbyJS, as we had done recently on other projects.

Drupal 8 would have been great, but we knew it would be time consuming as we would have had to write migration paths and move the current templates to Twig which would be time consuming.

Speed: Blazing fast, even in the remote jungle

We know from industry consensus how important speed is. Often times it is overlooked by clients. There is evidence that speed dramatically affects SEO. We also know that speed affects lead generation. It is harder though for those that haven’t read the research, often times clients are more impressed with full-screen slideshows which they swipe through on their high-speed wifi on their desktop computers. Luckily, the team at Surfing Nosara understood the importance of speeding up the website. When we showed them a speed comparison audit using webpagetest.org, they immediately saw the benefit of what we were trying to do.

The biggest issue we saw when we evaluated SurfingNosara.com was that the website was really slow. The website took over 14 seconds to load on mobile, and when we throttled the connection it was much slower. Throttling, or artificially lowering the connection speed to emulate slower devices was important because Nosara is located in a remote location with slow internet speeds.

Avoiding the server

A statically generated site by definition does not hit a dynamic server to serve HTML. It assumes that the content on the website is updated

Lazyload everything

When we did a performance audit using web page test we saw that mobile page loads were taking up to 15 seconds and even longer on slower mobile connections. A significant amount of Surfing Nosara’s traffic comes from mobile devices.

Speedy delivery of interactive features makes browsing for real estate fun

It seemed every time we would talk with the client there was a request for a new feature, the estimates on these features using Drupal’s complex development cycle was not sustainable or attainable in the client’s current budget.

Pantheon makes maintenance of the Drupal 7 CMS easier

In the title we say we moved from Druapl 7 to GatsbyJS, but that isn't entirely accurate. We did keep Drupal 7 as the main CMS. We moved the Drupal installation to Pantheon for easy security updates for core and contrib modules.