plContact

ReblyX

Website for a steel processing center – design and build, with content edited in Gutenberg.

  • WordPress
  • Gutenberg
  • AVIF
  • no jQuery
See it live
ReblyX – the first screen of the new website
  • 100/100mobile performance in Lighthouse – it was 72
  • 100/100accessibility – it was 62
  • 274 kBfor the home page – it was 1.1 MB, about 4× less
  • 1.6 smobile LCP – it was 5.0 s

About the project

What I built

ReblyX is a steel processing center – 3D design, laser cutting, bending, welding, galvanizing and powder coating. The old website was built with Divi: a list of services and a form. I designed and built a new one with Gutenberg blocks, so the client can change the content in the editor himself.

What changed

  • Gutenberg blocks instead of Divi, and no jQuery
  • Images in AVIF format, in a few sizes – a phone doesn't download images made for a big screen
  • Fonts served from the website's own server instead of Google Fonts
  • New sections: six processes, four reasons, six steps from a request to a finished part, tips before ordering and a quote form
  • A page description for Google, labels for form fields, better contrast and zoom on phones – accessibility and SEO are both 100 in Lighthouse

Before and after

Drag the slider – the old site is on the left, the new one on the right.

The new ReblyX website on Gutenberg – first screen
The old ReblyX website on Divi – first screen
Before · DiviAfter · Gutenberg
MeasurementBeforeAfter
Performance – mobile72100
Performance – desktop96100
Accessibility62100
SEO92100
LCP – mobile5.0 s1.6 s
Layout shift (CLS)0.1520
Data downloaded1.1 MB274 kB

Lighthouse 13, home page. Mobile – Moto G Power, slow 4G. The old version was measured locally and the new one on the server, so the new one had harder conditions.

How it looks

Screenshots of the live project – click one to see it bigger.

  • New version (Gutenberg) – from the first screen to the quote form
  • Old version (Divi) – services and a contact form

1 / 2

The new ReblyX website – the whole home page

New version (Gutenberg) – from the first screen to the quote form

← All projects