Jak zbudować najszybszą stronę Divi: Optymalizacja zawartości Divi pod kątem szybkości

Dzięki nowej aktualizacji wydajności Divi pojawia się mnóstwo możliwości zwiększenia wyników szybkości strony. Dzisiaj dzielimy się kilkoma praktycznymi wskazówkami i sztuczkami, o których należy pamiętać, budując stronę Divi od podstaw. To są zalecenia, a nie zasady wyryte w kamieniu. Zawsze sprowadza się to do głównych celów Twojej strony. Czasami poświęcasz trochę prędkości na projektowanie i na odwrót. Uważamy, że chodzi o znalezienie zdrowej równowagi między nimi, ale korzystając z poniższych wskazówek, zdecydowanie możesz poprawić szybkość swojej strony Divi.

Zanurzmy się w to!

Subskrybuj nasz kanał YouTube

1. Optymalizacja nad zawartością zgięcia

Jedna z nowych funkcji wydajności, które zostały dodane do Divi, nazywa się Critical CSS. Krótko mówiąc, Critical CSS w Divi automatycznie wykrywa, jaki CSS należy załadować od razu, co określa się mianem CSS powyżej części widocznej na ekranie, i opóźnia ładowanie reszty CSS strony. Już samo to pomaga automatycznie poprawić szybkość strony, bez konieczności wkładania wysiłku. Ale jeśli chcesz pójść o krok dalej, możesz zdecydować się również na optymalizację zawartości strony widocznej na ekranie.

4-modułowa koncepcja bohatera

Na pierwszy rzut oka może być kuszące, aby udostępniać odwiedzającym jak najwięcej informacji, ale właśnie tego należy unikać w bohaterze. Im bardziej bezpośrednie są Twoje treści, zarówno pod względem stylistycznym, jak i wizualnym, tym lepiej. Dlatego ograniczenie liczby modułów, których używasz powyżej zakładki, pomoże Ci zwiększyć szybkość strony Divi. Najlepiej użyć:

• Tytuł
• Ustęp
• Przycisk

Jednak w wielu przypadkach będziesz także chciał dołączyć jakiś obraz. Jeśli tak, staraj się unikać używania obrazu jako tła i zamiast tego używaj go jako modułu. Używanie go jako modułu wewnątrz konkretnego kontenera o maksymalnej szerokości pomoże Ci użyć mniejszych wymiarów obrazu, co z kolei pomoże przyspieszyć działanie witryny. To prowadzi nas do 4-modułowej koncepcji bohatera:

• Tytuł
• Ustęp
• Przycisk
• Zoptymalizowany obraz

Użyj pełnoekranowego bohatera lub podziel zawartość na wiele sekcji w celu precyzyjnego automatycznego wykrywania

Jest powód, dla którego pełnoekranowe projekty bohaterów są popularne. Nie tylko sprawiają, że Twój projekt jest bardziej oddychający, ale także pomagają w krytycznym CSS. Jeśli zdecydujesz się na pełnoekranowego bohatera, decydujesz, że jest to jedyna rzecz, która pojawia się w części widocznej na ekranie, bez względu na rozmiar ekranu, którego używasz. Aby stworzyć pełnoekranowego bohatera w Divi, pamiętaj o przypisaniu minimalnej wysokości „100vh” w ustawieniach sekcji. Przypisując minimalną wysokość; upewniasz się, że sekcja obejmuje całą wysokość przeglądarki. Możesz umieścić wszystko w tej sekcji, aby od tego momentu było częścią twojego projektu bohatera. Możesz też użyć wbudowanego pełnoekranowego nagłówka Divi.

Alternatywnie, jeśli nie chcesz podążać ścieżką bohatera na pełnym ekranie, możesz podzielić to, co znajduje się nad zakładką, na kilka sekcji. Divi automatycznie wykryje, co pojawia się nad zakładką na poziomie sekcji. Oznacza to, że jeśli tworzysz dużą sekcję, która pojawia się częściowo powyżej i częściowo poniżej strony, zostanie załadowany kod CSS całej sekcji i CSS elementów w tej sekcji. Podział sekcji na wiele pozwoli Ci uniknąć traktowania zbyt wielu elementów tak, jakby znajdowały się nad zakładką.

Unikaj animacji w Hero, aby zapobiec opóźnieniom

Dobrze jest unikać wszystkiego, co może spowodować opóźnienie wczytywania. Obejmuje to animacje. Nie oznacza to jednak, że powinieneś całkowicie tego unikać. Możesz łatwo używać animacji w dół strony i/lub ograniczyć animacje, których używasz wewnątrz swojego bohatera. Kluczem jest znalezienie odpowiedniej równowagi.

Modyfikuj zawartość nad krawędzią na tablecie i telefonie komórkowym

Ostatnią ważną rzeczą, o której należy wspomnieć w odniesieniu do krytycznego CSS, jest modyfikacja projektu na mniejszych ekranach. Ważne jest, aby upewnić się, że zawartość strony widocznej na ekranie jest zoptymalizowana pod kątem różnych rozmiarów ekranu. To kwestia dopracowania projektu, aby uzyskać doskonały wynik szybkości strony zarówno na komputerach, jak i na urządzeniach mobilnych. Możesz na przykład ukryć cały obraz bohatera na urządzeniu mobilnym, aby przyspieszyć działanie strony na mniejszych ekranach.

2. Używanie inteligentnych stylów

Jak działają inteligentne style

Dzięki nowej aktualizacji wydajności Divi zostało zoptymalizowane poprzez redukcję duplikatów stylów. Aby aktywować inteligentne style, musisz zanurzyć się w świecie ustawień Divi Presets. Presety zasadniczo umożliwiają współdzielenie stylów z różnymi elementami bez konieczności przypisywania unikalnego bloku stylów do każdego elementu, który jest stylizowany w ten sam sposób.

Korzystanie z 1 lub 2 ustawień wstępnych dla sekcji i rzędów

Sekcje i wiersze to dwa typy elementów, o których często zapominamy, gdy mówimy o presetach. Podobnie jak moduły, możesz przypisać ustawienia wstępne do sekcji i wierszy. Pomoże to nie tylko ograniczyć generowany CSS, ale także pomoże zachować spójność projektu na poziomie strony. Załóżmy na przykład, że chcesz konsekwentnie używać dopełnienia górnego i dolnego 100px dla każdej sekcji, aby stworzyć rytm pionowy, nie ma powodu, dla którego nie powinieneś korzystać z ustawień Divi w tym procesie. Utwórz nowe ustawienie wstępne dla sekcji korzystającej z tych wartości dopełnienia i przypisz je do każdej dodawanej nowej sekcji lub ustaw jako domyślne ustawienie wstępne sekcji.

Możesz również skonfigurować ustawienie wiersza z wybraną szerokością i maksymalną szerokością i ustawić je jako standardowe. Pobaw się tymi ustawieniami wstępnymi i odkryj, jak ułatwiają one nie tylko proces projektowania, ale także pomagają poprawić wyniki szybkości strony.

Użyj ustawień wstępnych dla modułów

Oczywiście będziesz chciał również użyć inteligentnych stylów dla modułów. W poniższym przykładzie zauważysz, że ogólny wygląd i działanie każdego modułu są podobne. Stworzenie gotowego ustawienia dla modułu Blurb pomoże ci utrzymać mały plik CSS strony.

Zastępujesz ustawienie wstępne czy nie?

Ale nie powinieneś tworzyć nowego ustawienia dla każdej małej zmiany. Na przykład w powyższym przykładzie możesz zauważyć, że dwa ostatnie Moduły Blurb mają inny kolor tekstu. W tym celu możesz utworzyć nowy zestaw, powielając stary lub możesz zmienić ustawienie wstępne. W takim przypadku bardziej sensowne jest po prostu nadpisanie koloru tekstu (co prowadzi do jednego dodatkowego wiersza kodu CSS), w przeciwieństwie do tworzenia nowego ustawienia wstępnego i dodawania wielu wierszy kodu CSS.

3. Dopasowanie wyborów projektowych z szybkością

Ogranicz wybór modułów, których chcesz użyć (moduły dynamiczne)

Kiedy wybierasz moduły, których chcesz użyć dla tworzonej strony, dobrze jest pamiętać, że będą one ładowane dynamicznie. Oznacza to, że jeśli nie użyjesz określonego modułu, nie wpłynie to na szybkość Twojej strony. Zastanów się nad każdym dodanym modułem i sprawdź, czy jest „wart tego”. Jednak w idealnym scenariuszu upewnisz się, że reszta zawartości Divi jest wystarczająco zoptymalizowana, aby nie trzeba było poświęcać modułów.

Znajdź LCP swojego projektu i zoptymalizuj go

Inną rzeczą, która może pomóc w zwiększeniu szybkości strony, jest znalezienie największego contentful paint i zoptymalizowanie go. Krótko mówiąc, LCP to największy element na Twojej stronie, który pomaga określić wynik szybkości strony. Więcej na ten temat możesz przeczytać tutaj. Upewniając się, że LCP twojego projektu jest zoptymalizowany, możesz drastycznie skrócić czas ładowania strony.

Wybór stylu animacji (funkcje dynamiczne)

Tak jak mamy moduły dynamiczne, mamy również funkcje dynamiczne. Oznacza to, że jeśli w ogóle nie użyjesz określonej funkcji na swojej stronie, nie zostanie ona załadowana, co prowadzi do większej szybkości strony. Z tego konkretnego powodu ważne jest, aby wybrać styl animacji i trzymać się go. Możesz na przykład wybrać efekty ruchu i skoncentrować wszystkie animacje na swojej stronie wokół tej funkcji. Możesz też przejść do zwykłych ustawień animacji i podążać tą trasą. Pozwala to nie tylko na stworzenie lekkiej strony, ale także zapewnia przewidywalność, co z punktu widzenia użytkownika jest zwykle dobrą rzeczą.

Parowanie czcionek: trzymaj się 1 lub 2 rodzin czcionek

Zalecamy również trzymanie się maksymalnie 2 rodzin czcionek dla projektowanych stron. W ten sposób ograniczasz liczbę czcionek, które należy załadować przed wejściem na stronę.

4. Optymalizacja ręczna

Responsywne treści: zmniejsz rozmiary obrazów na urządzeniach mobilnych

Kolejną rzeczą, która pomoże Ci zwiększyć wyniki szybkości strony mobilnej, jest użycie responsywnych treści w Divi. Jest to prawdopodobnie jedna z funkcji, która może pomóc Ci najlepiej poprawić wyniki na mniejszych ekranach. Chociaż wymaga to dużo więcej wysiłku, zdecydowanie warto. Zmniejsz wymiary/rozmiar obrazu za pomocą oprogramowania do edycji obrazów i użyj tych mniejszych obrazów na urządzeniach mobilnych, w przeciwieństwie do tych, które wyświetlasz na komputerze. Spowoduje to drastyczne zmniejszenie rozmiaru plików graficznych i zwiększenie szybkości strony na urządzeniach mobilnych.

Typy plików i kompresja

Upewnij się, że trzymasz się JPEG tak bardzo, jak to możliwe, ponieważ mają one zwykle mniejszy rozmiar pliku. PNG zwykle ma sens tylko wtedy, gdy potrzebujesz przezroczystości obrazu, aby ulepszyć projekt, ale nawet wtedy możesz spróbować znaleźć alternatywę, aby projekt działał. Unikaj również cięższych typów plików, takich jak GIF. Jeśli chodzi o wideo, to zwykle nie ma sensu, zwłaszcza jeśli chcesz, aby było odtwarzane w tle. I oczywiście upewnij się, że skompresujesz używane pliki, nawet przed przesłaniem ich do biblioteki multimediów WordPress.

Za kulisami

Wszystkie powyższe wskazówki mogą pomóc Ci poprawić szybkość strony, ale ważne jest, aby wspomnieć, że musisz zadbać o najlepsze praktyki optymalizacji witryny poza Divi. Więcej informacji technicznych znajdziesz w tym ostatecznym przewodniku.

Tworzenie szybkich stron z Divi — łatwiejsze niż kiedykolwiek

Możemy łatwo dojść do wniosku, że funkcje wydajnościowe Divi i to, jak radzisz sobie z budowaniem swojej witryny, pokrywają się w dużym stopniu. Divi zajmuje się częściową stroną, dzięki czemu możesz skupić się na najlepszych praktykach frontendowych, które są potrzebne, aby połączyć to wszystko w piękną i szybką stronę internetową. Jeśli istnieją jakieś najlepsze praktyki, które dobrze się dla Ciebie sprawdziły, podziel się nimi w sekcji komentarzy poniżej, aby kontynuować rozmowę!