Dzięki nowej wersji Divi masz niesamowitą moc potężnego kreatora stron. Teraz Divi jest lżejszy i ma wbudowane funkcje usuwania wzdęć. Możesz użyć funkcji przeciwdziałania wzdęciom Divi, aby przyspieszyć swoją witrynę. To niewielka część ogromnej procedury optymalizacji wydajności Divi, dzięki której możesz osiągnąć najwyższy wynik szybkości strony Google.
Dzisiaj omówimy 4 funkcje zapobiegające wzdęciom -
- Dynamiczna struktura modułów
- Dynamiczny CSS
- Dynamiczne ikony
- Optymalizacja JavaScript z dynamicznymi bibliotekami JavaScript
Nie traćmy więcej czasu i zobaczmy ile więcej ma dla nas Divi .
Rozwiązanie Divi dla problemu z wzdęciem
Definicja wzdęcia strony internetowej
Każda statyczna strona internetowa stworzona z ogólnego kodu HTML i CSS ze złożonym kodem JavaScript, która sprawiła, że strona jest cięższa niż powinna - nazywana jest web bloat. Ponieważ strony internetowe są po prostu oznaczonym tekstem, powinny zajmować tylko kilka kilobajtów. Ale krytyczne elementy strony, takie jak wyskakujące okienka, efekty ruchu i animacje graficzne, sprawiają, że strona jest ciężka.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć terazMotywy WordPress, takie jak Divi, dynamicznie wykorzystują strony HTML, które renderują się w plikach PHP. Więc tutaj musimy wziąć pod uwagę rozmiar i wydajność plików PHP jako rozrost sieciowy.
Po prostu nieefektywne ładowanie większej liczby plików na stronie, które są niepotrzebne i powoduje, że strona jest przeciążona niż potrzeba - oznacza, że witryna jest rozdęta.
Jak wpływa na szybkość strony internetowej?
Jeśli strona musi załadować więcej nietypowych plików backendu niż to, co znajduje się na stronie, ładowanie trwa dłużej. Na przykład istnieje strona, która potrzebuje tylko 100 linijek CSS, ale strona ma ponad 2000 linijek kodu, co oznacza, że czas ładowania 1800 linijek jest całkowitym marnotrawstwem.
Załóżmy ponownie, że używasz 5 bibliotek JavaScript do uruchomienia strony swojej witryny, na której możesz wykonać całą pracę z 1. Nie ma więc sensu używać 4 bezużytecznych bibliotek JavaScript. Zauważ, że biblioteka JavaScript zawiera tysiące wierszy kodu.
Oprócz CSS i Js, Twoja strona internetowa działa na pliku PHP, który zawiera ogromną liczbę funkcji. Załóżmy, że plik function.php zawiera 20 000 linii kodu i setki funkcji. Tak więc dostarczanie treści na konkretną stronę uruchamia wszystkie te elementy - jest to całkowicie niepotrzebne, gdy potrzebnych jest tylko kilka z nich.
Rozwijanie problemów w Divi
Design Divi staje się z dnia na dzień coraz bardziej nowoczesny. Tak więc stopniowo narastał również problem wzdęć. Aby rozwiązać ten problem, zastosowano nową funkcję o nazwie „Anti-Bloat”, która może całkowicie usunąć ten problem. Dzięki tej funkcji zapobiegającej wzdęciom Divi jest teraz znacznie szybszy niż wcześniej, a użytkownicy mogą kontynuować swoje działania w znacznie wydajniejszy sposób.
Co zawiera ta funkcja zapobiegająca wzdęciom
Funkcja „anti-bloat” Divi pełni 4 główne role dla określonych stron -
Dynamic Module Framework: Rozwiązuje problemy utworzone przez pliki PHP poprzez ich optymalizację. W ten sposób tylko funkcje i kody potrzebne do uruchomienia strony działają aktywnie dla tej strony.
Dynamiczny CSS: zbuduje niestandardowy arkusz stylów, który składa się tylko z kodów CSS potrzebnych do załadowania strony. Brak czasu ładowania dodatkowych plików CSS.
Dynamiczne biblioteki JavaScript: zoptymalizuje i dynamicznie utworzy plik script.js, który załaduje zewnętrzną bibliotekę JS potrzebną dla strony.
Dynamiczne ikony: załaduje podzbiór ikon używanych na stronie, a nie wszystkie ikony używane na stronie.
Włącz tę funkcję, nawigując Divi 
Jak będą działać funkcje zapobiegające wzdęciom
Jak już wiemy, Divi uruchomiło nową funkcję o nazwie „anti-bloat”, aby skrócić czas ładowania strony, który występuje za pomocą nieistotnych linii kodu. Zobaczmy, jak działa ta funkcja.
Dynamiczny framework PHP: funkcje
Divi kieruje się tutaj prostą zasadą, która polega na wykonywaniu tylko tych funkcji, które są potrzebne. Jest to w pełni dowodowa logika, która wykonuje tę akcję.
Kontrola przed przetwarzaniem
Dostarczanie danych z Twojego serwera do Twojej witryny za pomocą dynamicznego PHP jest bardzo łatwe i oszczędza czas. Jeśli stwierdzi, że składnik lub funkcja jest używany, sprawdza szybkość w systemie i pobiera wszystkie kody, które obsługują ten element i odpowiednio je dostarcza, i nie wykonuje się, dopóki akcja nie zostanie wykonana.
Moduły na żądanie
Dzięki tej nowej funkcji strony mogą elastycznie ładować moduły. Ze względu na logikę zapobiegającą bloatingowi PHP, Divi przetwarza tylko te skróty, których potrzebuje strona. Na przykład, jeśli masz 5 modułów na stronie, Divi przetworzy tylko te pięć, a nie wszystkie, i pokaże i wyprowadzi te pięć modułów.
Funkcje na żądanie
Dla każdej funkcji na stronie Divi automatycznie przetwarza i ładuje moduły. Dokładniej, ten system przetwarza tylko moduły, takie jak efekty przewijania, animacje, obramowania i opcje przyklejania, które są używane na stronie. Dotyczy to również sekcji, wierszy i kolumn.
Daynamic CSS
Arkusz stylów Divi zachowuje również logikę zapobiegającą rozrostom, która była używana we frameworku PHP. Funkcjonalność Divi CSS jest dość duża i często tworzy niepotrzebne rozdęcia na stronach.
Ładowanie CSS na podstawie strony
Tak się dzieje, gdy strona dynamicznie ładuje CSS,
- Ładuje tylko pliki CSS, które muszą stylizować motyw Divi. Rozmiar pliku nie przekracza 50 kb.
- Następnie ładuje pliki CSS zawierające diagram projektu strony. Otworzy dynamicznie tylko te pliki, które są używane w różnych sekcjach strony. Na przykład dla prostej strony domowej będzie tylko plik 30kb.
Tutaj jest to teraz 80kb pliku CSS bez żadnego rozdęcia. Wcześniej rozmiar wynosił 900 kb i był prawie pełny.
Tutaj ta strona główna została stworzona za pomocą konstruktora Divi i możesz zobaczyć, jak natywne pliki CSS dla tej strony działają w celu wyświetlania składników strony.
Dynamiczny JavaScript
Zwykle używamy JavaScript, aby poprawić wydajność strony internetowej, uprościć i unowocześnić nasze projekty. Używając dynamicznego JavaScript, Divi może importować funkcje Js z zewnętrznej biblioteki. Tak więc na stronie będzie mniej skomplikowane kodowanie i na pewno strona będzie lżejsza i szybsza niż wcześniej. Funkcje zapobiegające wzdęciom działają na stronę, więc nie musisz się martwić o uszkodzenie funkcjonalności, Divi się tym zajmie.
Oto mały przykład tego, jak funkcja lightbox i Sticky jest obsługiwana przez funkcję Anti-Bloat Divi.
Dynamiczne ikony
Ikony są bardzo ważną częścią strony internetowej. Divi umożliwia inteligentny sposób ładowania podzbiorów czcionek wymaganych dla tej strony zamiast ładowania wszystkich ikon. Zasadniczo każda strona internetowa ma trzy podzbiory ikon,
- Podstawa - Deafult ikony motywu Divi z modułu.
- Social - media społecznościowe śledzą ikony z podstawowego zestawu ikon.
- Wszystko — cały pakiet ikon, w którym selektor ikon może wybrać i użyć żądanego.
Jeśli jakakolwiek strona nie używa modułów mediów społecznościowych ani żadnych ikon wybranych przez selektor ikon, strona użyje podstawowego zestawu ikon, który zajmuje 6 KB miejsca. Rozmiar będzie nieco większy, jeśli uwzględnimy ikony mediów społecznościowych.
Jeśli użyjemy modułu wyboru ikon / notatek, cały rozmiar zestawu ikon może wzrosnąć do 90kb.
Zawijanie
Funkcja zapobiegająca wzdęciom Divi jest zdecydowanie bardzo przydatna. Dzięki temu witryny Divi będą szybsze i znacznie poprawią wrażenia użytkownika. Wprowadzając większą moc i szybkość do witryny Divi , użytkownicy stale uzyskują lepsze wsparcie. Miejmy nadzieję, że te wysiłki będą kontynuowane. Jeśli podoba Ci się ten post, podziel się nim ze znajomymi i daj nam znać o swoim pytaniu w sekcji komentarzy.
