W najnowszej wersji Bricks, tego młodziutkiego kreatora stron dla WordPressa, pojawiła się w końcu zapowiadana zmiana, polegająca na wprowadzeniu kontenerów. Nie chodzi o kontenery transportowe, które być może stają przed oczyma, choć to również przestrzenie w ramach, których możesz przechowywać różne obiekty strony.

Kontener, to kolejny widget dostępny w menu buildera, dzięki czemu możesz aranżować widgety w dowolny sposób.

Widget kontenera

Nowy widget zastępuje stary układ: sekcja > wiersz > układ kolumn, z którego korzysta większość obecnie dostępnych na rynku builderów stron w tym również dla WordPressa.

Problem ze starym podejściem do układu treści w Bricks miał związek z elastycznością projektowania, która przy poprzedniej metodzie była zbyt mocno ograniczona, a także struktura DOM opublikowanej witryny była niepotrzebnie rozrośnięta (bolączka większości builderów w tym także Elementora). Zastosowanie kontenera, który może mieć wiele kolumn i swobodnie położenie jego elementów wewnątrz, ten problem w znacznym stopniu eliminuje.

Możesz zagnieżdżać kontenery wewnątrz innych kontenerów nawet do pięciu poziomów. Tworzenie złożonej struktury staje się teraz o wiele prostszym zadaniem i co najważniejsze nie zwiększa niepotrzebnie struktury DOM.

Kontener

Dwa sposoby na dodanie kontenera. Pierwszy, standardowy to złap, przeciągnij i upuść, a jest reszcie drugi sposób. Spójrz na powyższy zrzut ekranu. Na pierwszej pozycji znajduje się Kontener, ale jego ikona nieco różni się od pozostałych. W lewym górnym rogu jest dodatkowa. To nie ozdobnik 🙂 Możesz kliknąć w tego malucha, aby wywołać okno modalne z wstępnymi ustawieniami kontenera:

Wstępne ustawienia dodawanego kontenera

Możesz zdefiniować układ elementów wewnątrz, kierunek (kolumny, wiersz), możesz określić ilość kolumn i pozostałe parametry jak marginesy i odstępy. Przy powyższej konfiguracji dodany kontener prezentuje się w taki sposób:

Kontener z dwoma kolumnami

Widać dwie kolumny, do których można wrzucać kolejne widgety. Po umieszczeniu widgetów masz duże pole manewru w kontekście ich położenia. Możesz wprowadzić zmiany w ustawieniach całego kontenera, kolumny lub pojedynczych obiektów. Wszystko możesz ostylować dokładnie tak jak chcesz, a efekt finalny nie musi być tak prosty jak poniżej 🙂

Przykładowa treść wewnątrz kolumn kontenera

Szybki test porównawczy (wydajność)

Nie robiłem rozbudowanych analiz porównawczych związanych z wydajnością stron generowanych w Bricks i w Elementorze. Przyjdzie na to jeszcze czas, ale dziś jeden prosty test, który mnie zaskoczył.

Ta sama maszyna, to samo środowisko zero mechanizmów cache zarówno po stronie serwera jak również instalacji WP. Analogiczny wygląd testowanej strony: tylko dwie kolumny z nagłówkiem i ikonką.

Elementor

Tak wygląda przykładowa strona w Elementorze

Bricks

Tak wygląda przykładowa strona w Bricks

Wynik tego prostego testu pokazuje wyraźne różnice. Może nie struktury DOM, choć ta także jest widoczna, ale przede wszystkim jak chodzi o ogólną wydajność. Popatrz:

Elementor potrzebuje wykonać na tyle dużo zadań, że przy tak prostej stronie reakcja głównego dokumentu wynosi ponad 400 ms bez mechanizmów cache. Może nie ma tragedii, ale też nie jest to mało biorąc pod uwagę jak prostą stronę testuję.

Wynik GTMetrix dla Elementora

Gdy analogiczny test wykonam dla Bricks, wynik pozytywnie mnie zaskoczył:

Wynik GTMetrix dla Elementora

Zwroć uwagę na to o ile szybciej wykonywane są operacje na serwerze ze stoną Bricks, co redukuje czas odpowiedzi głównego dokumentów do około 100ms bez jakiegokolwiek buforowania i optymalizacji.

Strona w Elementorze w tym teście potrzebowała 1.2 sekundy na pełne załadowanie się, natomiast analogiczna strona na Bricks 0,4 sekundy. Testów zrobiłem kilka żeby upewnić się, że te różnice nie są przypadkowe.

Co sugeruje powyższy wynik? Nic innego jak, to że strony tworzone na Bricks są po prostu szybsze, lżejsze i lepiej zoptymalizowane. To co mnie zdziwiło, to fakt, że przy tak potwornie prostej stronie testowej, różnice są tak wyraźne. Nie podejrzewałem dużego dystansu, spodziewałem się go raczej przy bardziej złożonej strukturze dokumentu. Okazało się jednak, że nawet przy czymś tak prostym można dostrzec znaczące różnice.

Przy najbliższej okazji zrobię bardziej precyzyjny test, po to aby zweryfikować dzisiejszą hipotezę, co do wyższości Bricks nad Elementorem i innymi builderami w kontekście wydajności strony. Sam jestem ciekaw czy to co zobaczyliśmy dziś potwierdzi się z podobną mocą gdy test rozbuduję.

Zapisz się poniżej na listę mailingową, aby otrzymać powiadomienie, gdy taki test pojawi się na Jak Zrobić Stronę.

Udostępnij

Zobacz również

DNS Anycast

DNS Anycast – co to jest?

DNS Anycast, to temat nie związany bezpośrednio z WordPressem, ale mający wpływ na to jak szybko strona może się ładować, co oznacza lepsze wyniki jakości.

Bezpłatne informacje o nowościach JZS

Zapraszam Cię do grona Subskrybentów! Tysiące Czytelników już subskrybuje wiadomości z JZS.

W każdej chwili możesz zrezygnować z subskrypcji. Twój adres jest tu bezpieczny.

Polecane Oferty LifeTime!

Encharge

Automatyzacja Email Marketingu. Zwiększ skuteczność prowadzonych kampanii.

Consolto

Aplikacja do spotkań online i obsługi Klienta. Ogrom możliwości i...

Stackable lifetime
Stackable

Zestaw świetnych bloków dla Gutenberga plus biblioteka gotowych szablonów.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *