Punkt wyjścia
Kolejna Klientka to fotografka. Robi sesje kobiece, sensualne i wizerunkowe, prowadzi warsztaty i sprzedaje presety oraz e-booki. Jej strona łączy portfolio, blog, kilkadziesiąt podstron ofertowych i sklep WooCommerce, w którym zamówienia wpadają codziennie.
Strona stała na motywie premium Solene. Do tego były Elementor, Qi Addons, Slider Revolution i kilkanaście wtyczek dokładanych przez lata. Wyglądała ładnie, ale pod spodem:
- strona główna ładowała się około 8,5 sekundy;
- PageSpeed pokazywał 54 punkty na mobile i 68 na desktopie;
- motyw i jego wtyczka „core” przestały być rozwijane.
Postawiłem sobie dwa warunki. Sklep ani na chwilę nie przestaje działać i żadne zamówienie nie ginie. To od razu wykluczyło najprostszą drogę: zrobić wszystko na kopii i nadpisać nią produkcję.
Dlaczego nie „przenieś kopię i nadpisz”
Standardowo przebudowę robi się na stagingu, a potem wgrywa całość Duplicatorem albo wtyczką do stagingu. Tutaj baza na produkcji zmieniała się cały czas: zamówienia, klienci, stany magazynowe. Nadpisanie jej kopią sprzed kilku dni oznaczałoby utratę danych.
Dlatego staging posłużył mi tylko jako wzorzec wyglądu, czyli kopia starej strony, z którą porównywałem efekt. Wszystkie zmiany wprowadzałem na żywej stronie, element po elemencie:
- ustawienia motywu;
- treść stron;
- widżety;
- CSS.
Nic nie nadpisywałem hurtem.
Nowy fundament: Blocksy i Gutenberg
Wybrałem Blocksy z motywem potomnym i natywne bloki Gutenberga. Są lekkie, dobrze współpracują z WooCommerce i nie ma ryzyka, że za rok motyw zniknie z rynku jak Solene.
Odwzorowanie wyglądu 1:1
Klientka nie chciała nowego projektu. Chciała, żeby strona wyglądała tak samo, tylko działała lepiej. Najpierw spisałem ze starej strony wszystkie „tokeny” wyglądu:
- fonty i rozmiary nagłówków H1–H6 z odstępami między literami;
- kolory, w tym trzy odcienie beżu, które na pierwszy rzut oka wyglądają identycznie;
- wysokość nagłówka i nagłówka przyklejonego;
- styl menu i podmenu;
- pas tytułu podstron;
- układ stopki z obracającym się stemplem z hasłem marki.
Wszystko to odtworzyłem w Customizerze Blocksy i w dodatkowym CSS.
Portfolio bez utraty danych
Projekty portfolio były zapisane jako typ wpisu z wtyczki Solene Core. Zamiast migrować dane, zarejestrowałem w motywie potomnym ten sam typ wpisu i te same taksonomie pod tymi samymi nazwami. Po wyłączeniu starej wtyczki wszystkie projekty, kategorie i stare linki działały dalej bez zmiany ani jednego rekordu w bazie. Dopisałem też archiwum portfolio i zastępczą miniaturę. Projekt bez obrazka wyróżniającego bierze pierwsze zdjęcie z galerii.
Konwerter Elementor → Gutenberg
Najwięcej pracy było przy podstronach zbudowanych w Elementorze: ofertach, cenniku, O mnie, warsztatach, voucherze i stronach edukacyjnych. Ręczne przepisanie każdej z nich zajęłoby dni, a efekt i tak odbiegałby od oryginału.
Napisałem więc własny konwerter. Czyta wyrenderowaną stronę w przeglądarce, czyli prawdziwe wymiary, marginesy, tła i fonty, a nie surowe dane Elementora. Na tej podstawie buduje poprawne bloki Gutenberga z dedykowanym arkuszem stylów dla każdej strony. Obsługuje między innymi:
- kolumny z marginesami w procentach;
- elementy pozycjonowane absolutnie, na przykład beżowe tła „podłożone” pod zdjęcia;
- ikony social media;
- FAQ;
- mapy Google;
- pokazy zdjęć w tle sekcji;
- przyciski.
Każda przekonwertowana strona otwiera się w edytorze bez żadnego błędu bloku, więc klientka może ją dalej sama edytować.
Slider Revolution na stronie głównej zastąpiłem własnym, lekkim sliderem. Ma 6 slajdów, animowane napisy i zdjęcia doładowywane dopiero przed pokazaniem.
Wersja mobilna
Strony z Elementora często „rozjeżdżają się” na telefonie. Sprawdziłem każdą podstronę w szerokości 390 px i poprawiłem:
- zdjęcia nachodzące na siebie;
- zbyt ciasne ramki z tłem;
- nagłówki łamiące się w połowie słowa;
- puste pasy po starych elementach.
Na koniec napisałem skrypt, który automatycznie przeszedł wszystkie 91 opublikowanych stron w wersji desktopowej i mobilnej. Szukał tekstu przyklejonego do krawędzi boxów z tłem i poziomego przewijania. Wyłapał między innymi ramkę kontaktową bez marginesu wewnętrznego powtarzającą się na 66 stronach lokalizacyjnych. Poprawiłem ją jedną regułą CSS dla wszystkich naraz.
Wydajność
- Cache: LiteSpeed Cache był włączony, ale serwer to Apache, więc nic nie buforował. Po przejściu na WP Super Cache czas odpowiedzi serwera spadł z ~1,2 s do ~0,1 s.
- Obrazy: konwersja biblioteki (prawie 99 tys. plików) do WebP zmniejszyła ich wagę średnio o około 42%.
- Kod: strona nie ładuje już Elementora, Qi Addons ani Slider Revolution.
Mobilny wynik PageSpeed wzrósł z 54 do 61. To nadal nie jest wynik, na którym chcę skończyć, więc optymalizacja mobile to następny etap.
Efekt
- Wygląd zgodny ze starą stroną, na nowoczesnym i utrzymywanym motywie.
- Klientka edytuje wszystkie podstrony w zwykłym edytorze WordPressa, bez page buildera.
- Zero przerw w działaniu sklepu i zero utraconych zamówień przez cały czas prac.
Twoja strona na WordPressie działa wolno albo stoi na porzuconym motywie i page builderze, którego nikt już nie rozwija? Napisz do mnie i zobaczymy, co da się z tym zrobić.
Czytaj też: Migracja z Joomli 3 na 5: malware w aktualizatorze i 7000 obcych plików — case study strony, której aktualizacja stała cztery lata.