Jak Elementor planuje poprawić wydajność strony

Elementor, to najpopularniejszy na świecie dodatek do WordPressa odpowiedzialny za szybkie i komfortowe budowanie stron przez każdego bez względu na posiadane umiejętności. Z Elementora korzysta aktualnie około 7 milionów stron na całym świecie i ta liczba wciąż rośnie.

Nie brakuje jednak osób, które głośno krytykują to narzędzie. Głównym zarzutem jest wydajność stworzonych w Elementorze stron, co niestety nie jest dalekie od prawdy, zwłaszcza gdy porównamy kod Elementora z kodem jaki generuje Oxygen.

Twórcy Elementora doskonale zdają sobie z tego sprawę i gdy tylko Google potwierdziło pod koniec 2020 roku plan wprowadzenia nowego czynnika rankingowego (Core Web Vitals) stało się oczywiste, że nie ma innej drogi przed uniknięciem odpływu użytkowników w przyszłości jak zakasać rękawy i oprócz nowych funkcji zadbać także o lepszą optymalizację.

Nadchodzące zmiany w Google są nagłaśniane w takim stopniu, że wiele osób zwyczajnie zaczyna się ich obawiać, zwłaszcza gdy wyniki ich stron dla metryk Core Web Vitals są dalekie od ideału.

Nikt tak naprawdę nie wie co stanie się po wprowadzeniu nowych czynników rankingowych. Czy będziemy świadkami znaczących przetasowań w SERPach, czy zmiana przejdzie ledwo zauważona. Dopóki nowe algorytmy nie zawitają na dobre, co ma nastąpić ostatecznie z końcem sierpnia, będziemy żyć w niepewności i lekkim stresie.

Twórcy Elementora z pewnością czują ten stres i obawy swoich Klientów, bo nie wątpię, że są zasypywani pytaniami w stylu: „co zrobić, żeby moja strona w Elementorze była wydajniejsza?”. Na te pytania nie da się udzielić dobrej odpowiedzi jeśli nie zna się specyfiki danej strony, a to zadanie niewykonalne nawet dla ogromnego zespołu specjalistów przy tak dużej ich ilości.

Elementor tworzy więc tutoriale na temat Core Web Vitals i sposobów optymalizacji, ale to nie wystarczy jeśli w ślad za tym nie pójdą zmiany w samym Elementorze.

Wczoraj pojawił się na blogu Elementora artykuł omawiający plany związane z wydajnością. Możemy w nim przeczytać m.in.:

[…] naszym głównym celem jest upewnienie się, że nasz produkt nie wpływa negatywnie na działanie Waszej strony. To był i nadal będzie dla nas najwyższy priorytet. Tak więc bez dalszych ceregieli, zagłębmy się w optymalizację wydajności Elementora, zgodnie z naszą mapą drogową na rok 2021

Poza optymalizacją cyklu rozwoju produktu, nasza wizja poprawy wydajności Elementora składa się z pięciu ścieżek. W niektórych z tych obszarów dokonaliśmy już znaczących ulepszeń, podczas gdy inne zostaną uwzględnione w nadchodzących wersjach Elementora.

Jesteśmy dumni z tego, że wydajność stała się integralną częścią naszego procesu tworzenia i wydawania stron. Każda wersja Elementora jest sprawdzana pod kątem wydajności, aby upewnić się, że żadna nowa funkcja, poprawka czy ulepszenie nie wpłynie negatywnie na istniejące strony zbudowane przy użyciu Elementora. […]

Amitai Gat – wiceprezes ds. produktu

O jakich pięciu ścieżkach wspomina Amitai Gat? Oto one:

Ładuj tylko to czego potrzebujesz

W ostatnich wersjach Elementora ta funkcjonalność pojawiła się jako eksperyment. Zadaniem jest ładowanie tylko tych zasobów, które są na danej podstronie realnie wykorzystywane. Może to w znaczący sposób zmniejszyć ilośc kodu CSS/JS, a to z kolei przekłada się na szybsze ładowanie i szybsze renderowanie strony w przeglądarce.

Wykorzystanie natywnych możliwości przeglądarek

Elementor powstał w 2016 roku, a od tego czasu wiele się zmieniło jak chodzi o możliwości przeglądarek internetowych. Teraz niektóre funkcje, które kilka lat temu wymagały zewnętrznych bibliotek, mogą być zaimplementowane przy użyciu natywnego wsparcia przeglądarki. Jako przykład Amitai Gat podaje bibliotekę Waypoints, która w niektórych przypadkach została zastąpiona Intersection Observer API.

Amitai pisze dalej, że Elementor ma iść w tym kierunku, tak aby wykorzystać wszystkie możliwe natywne funkcje nowoczesnych przeglądarek.

Ulepszanie i optymalizowanie wewnętrznego JavaScript i CSS

Trzecia ścieżka to optymalizacja przede wszystkim opóźnień związanych z renderowaniem strony na co niemały wpływ mają fonty Google czy biblioteka Font Awesome.

Poprawa na tym polu jaka jest zapowiadana to możliwość skonfigurowania metody ładowania czcionek oraz właściwość font-display dodana do Font Awesome.

Optymalizacja backendu

W Elementorze 3.0 został poprawiony mechanizm dynamicznego ładowania i renderowania CSS. Elementor zwykł skanować strony w poszukiwaniu elementów z dynamicznymi wartościami przy każdym ładowaniu strony. Od wersji Elementor 3.0, kiedy strona jest tworzona i odwiedzana po raz pierwszy, Elementor tworzy pamięć podręczną wszystkich elementów z dynamicznymi wartościami. To znacznie poprawia czas renderowania po stronie serwera i skutkuje zauważalnymi usprawnieniami.

W planach jest wprowadzenie do Elementora dodatkowych usprawnień związanych z parsowaniem.

Odchudzenie kodu

Na koniec coś co jest wodą na młyn krytyków Elementora. Kod generowany przez tego buildera jest nadmiernie rozbudowany co ma bezpośredni wpływ na wyniki jakości i wydajności zwłaszcza jeśli strona zostanie uruchomiona na starszych urządzeniach mobilnych.

W wersji 3.0 Elementora usunięto trzy elementy zmniejszające strukturę DOM kodu. W wersji 3.2 kolejne dwa, a następne będą znikały w nadchodzących odsłonach buildera. Celem jest zredukowanie struktury kodu do niezbędnego minimum, co powinno być wyraźnie odczuwalne zwłaszcza gdybyśmy zrobili w przyszłości test wersji 2.9 i wersji załóżmy wersji 3.5 (takiej jeszcze nie ma).

Podsumowanie

Dobrze wiedzieć, że twórcy Elementora intensywnie pracują nad optymalizacją wydajności stron w nim tworzonych. Jest to ważne z kilku powodów, ale najważniejszy to zwykły biznes. Jeśli Elementor nie zrobiłby nic na tym polu jestem pewien, że nie tylko mocno wyhamowałby na drodze pozyskiwania nowych Klientów, ale bilans nowych i odchodzących użytkowników buildera byłby pod kreską, a to mogłoby doprowadzić do poważnego kryzysu i rychłej utraty korony.

Pamiętajmy, że wciąż powstają nowe narzędzia, które chcą konkurować z Elementorem i muszę przyznać, że niektóre z nich robią to nadzwyczaj dobrze. Jednak przewagą Elementora jest ogromna ilość rozszerzeń i integracji na co młoda konkurencja będzie musiała pracować latami.

Jeśli Elementor rzeczywiście doprowadzi do sytuacji, w której wydajność stron będzie na wysokim poziomie, prawdopodobnie przez wiele kolejnych lat jego Twórcy będą mogli spać względnie spokojnie 🙂 Ten rok pokaże jak zapowiedzi i to czego nie zapowiedziano, a być może jest planowane, zostanie wdrożone i odbije się na satysfakcji użytkowników Elementora.