ReblyX

Strona centrum obróbki stali – projekt i wdrożenie, treści edytowane w Gutenbergu.

  • WordPress
  • Gutenberg
  • AVIF
  • bez jQuery
ReblyX – pierwszy ekran nowej strony
  • 100/100wydajność na telefonie w Lighthouse – było 72
  • 100/100dostępność – było 62
  • 274 kBpobiera strona główna – było 1,1 MB, ok. 4× mniej
  • 1,6 sLCP na telefonie – było 5,0 s

O projekcie

Co zbudowałem

ReblyX to centrum obróbki stali – projektowanie 3D, cięcie laserowe, gięcie, spawanie, cynkowanie i lakierowanie proszkowe. Stara strona stała na Divi: lista usług i formularz. Zaprojektowałem i zbudowałem nową na blokach Gutenberga – klient sam zmienia treści w edytorze.

Co się zmieniło

  • Zamiast Divi – bloki Gutenberga i bez jQuery
  • Zdjęcia w formacie AVIF, w kilku rozmiarach – telefon nie pobiera obrazków dla dużego ekranu
  • Fonty z serwera strony zamiast Google Fonts
  • Nowe sekcje: sześć procesów, cztery powody, sześć kroków od zapytania do gotowego elementu, wskazówki przed zamówieniem i formularz zapytania
  • Opis strony dla Google, etykiety pól formularza, lepszy kontrast i powiększanie na telefonie – w Lighthouse dostępność i SEO po 100

Przed i po

Przeciągnij suwak – po lewej stara strona, po prawej nowa.

Nowa strona ReblyX na Gutenbergu – pierwszy ekran
Stara strona ReblyX na Divi – pierwszy ekran
Przed · DiviPo · Gutenberg
PomiarPrzedPo
Wydajność – telefon72100
Wydajność – komputer96100
Dostępność62100
SEO92100
LCP – telefon5,0 s1,6 s
Przesunięcia układu (CLS)0,1520
Pobrane dane1,1 MB274 kB

Lighthouse 13, strona główna. Telefon – Moto G Power, wolne 4G. Stara wersja mierzona lokalnie, nowa na serwerze, czyli w trudniejszych warunkach.

Jak to wygląda

Zrzuty z działającego projektu – kliknij zrzut, żeby go powiększyć.

  • Nowa wersja (Gutenberg) – od pierwszego ekranu do formularza zapytania
  • Stara wersja (Divi) – usługi i formularz

1 / 2

Nowa strona ReblyX – cała strona główna

Nowa wersja (Gutenberg) – od pierwszego ekranu do formularza zapytania

← Wszystkie projekty