1. Project Background / Context

• AmsterdamActivityGuide.com is a tourism/experience website targeting visitors to Amsterdam.
• The site relied heavily on Elementor and multiple plugins, which caused slow load times, layout shift, and poor mobile performance.
• The client needed a faster, more stable foundation to improve user experience and increase booking conversions.
• The client also mentioned that the homepage search bar was not producing the desired results.

Goal: Improve Core Web Vitals on mobile & desktop AND reduce drop-off on key landing pages.

2. Initial Analysis (Benchmarking)

3. Diagnosis (Why the Site Was Slow)

• Elementor generates excessive nested markup, leading to slow DOM rendering.
• No use of a caching system for optimisation.
• The theme loaded unused assets globally.
• Plugins injected unnecessary JS site-wide.
• Images were not resized or optimized.
• Layout shifts happened because content resized after load (fonts, images).
• The site was also missing a consent popup for opting into tracking cookies etc.

4. Strategy / Plan of Action

Main decisions:

• Remove Elementor from the homepage entirely and rebuild the same layout using native Gutenberg blocks.
  
• Hand-tune the structure for semantic HTML (sections → headings → paragraphs → lists).
  
• Reduce DOM size by 60–80%.
  
• Optimize images with correct sizing + WebP + lazy loading.
  
• Remove any unused plugins.
  
• Remove all render-blocking JS/CSS.
  
• Implement caching + CDN.
  
• Fix layout shifts by explicitly defining image dimensions on activity preview thumbnails.
  
• Fix GDPR Compliance by implementing some kind of consent banner. 

5. Implementation Steps (What I actually did)

A. Rebuilt layout in Gutenberg

Before (Elementor)	After (Gutenberg)
Swiper JS background with heavy images, reasonably clean but made with Elementor so packed with excessive scripts and styles.	The video background is more modern with lazy loading on the media for ultra fast load times. Page made with pure Gutenberg built into WP so almost no dependencies to load at render.
60/100	100/100

B. Cleaned up global assets

• remove Elementor scripts for the homepage
  
• removed unused CSS
  
• defer non-priority scripts for this page
  
• forced critical CSS only
  

C. Image optimization

• resized images
  
• converted to WebP
  
• added correct height/width attributes
  

D. Core Web Vitals fixes

• stabilised CLS
  
• reduced LCP
  
• fixed font loading
  
• ensured hero images load early
  
• removed excessive animations like swiper.js
  

6. Before/After Performance Metrics

Gutenberg, used properly, outperforms Elementor for speed and stability.

With a clean block-based layout and optimized assets, even content-heavy tourism sites can hit 100/100 mobile performance and dramatically improve user engagement.

This project demonstrates how a pragmatic rebuild can deliver massive speed gains without sacrificing design.

The final version of the page is modernised, loads blazingly fast and gets a perfect 100/100 score.

7. Extras: Icing on the cake 🍰

A. Built new interactive search bar with auto-filtering

In addition to the poor performance, the client informed me they were not happy with the original page for the following reasons: 

• Searchbar CTA was too vague with limited content / products owners often get nowhere.
• Homepage content goes stale, missing updated elements to trigger re-indexing by search engines necessary to maintain good SEO rankings. 

If the user searches something generic like “Booze Cruise” they expect to see the search results for all related products. But they were just going to the nearest matching product title – or a page with very limited results.
The new search experience is interactive filtering as the user types, with a pre-defined list of options for them to choose from. Herding the users towards popular pages where we can prioritise the desired results most related to what they’re looking for.  The user can still type a query outside of the pre-defined list for a traditional search.

A. Added a “News” section showing the latest blog posts to keep the page fresh

This small addition along with freshly updated content will help to keep the page indexable by Google or other search engines that are looking to see updated content in the DOM.