Optymalizuj style CSS w WordPress
Kolejny problem, który należy rozwiązać, jak w przypadku obrazów Jest to skracanie kodu i optymalizacja stylów CSS i skryptów JS.
Optymalizacja, zgodnie z usługą Google Developers, zmniejszy ilość danych, przyspieszy ich ładowanie i przetwarzanie.
Zawartość:
Jeśli na stronie jest dużo plików CSS, to dla optymalizacji konieczne jest połączenie ich w jeden, zminimalizowanie ich, to znaczy usunięcie wszystkich spacji, wszystkich komentarzy, uczynienie kodu najbardziej minimalistycznym w celu zmniejszenia obciążenia z serwera do przeglądarki.
Optymalizacja CSS za pomocą wtyczki
W przypadku WordPressa istnieją specjalne wtyczki, które łączą możliwość łączenia i minimalizowania skryptów oraz optymalizacji stylów. Jednym z nich jest JS & CSS Script Optimizer.
Znajdź go w katalogu WordPress, pobierz, zainstaluj i aktywuj.
Tutaj musimy powiedzieć, że nieprawidłowa kombinacja stylów css może prowadzić do naruszenia wyświetlania witryny, mogą wystąpić konflikty stylów, nieprawidłowe wyświetlanie witryny itp.
Wynik kombinacji w tym przypadku zależy od konkretnego tematy a dla niektórych z nich wtyczka może nie być odpowiednia.
Inne tematy, przeciwnie, mogą już zawierać opcję łączenia i zmniejszania stylów i skryptów css na stronie.
Należy zauważyć, że przed rozpoczęciem optymalizacji plików css i pracy ze skryptami należy wykonać pełną kopię zapasową witryny, a także kopię zapasową bazy danych, aby w razie potrzeby nie trzeba myśleć o tym, jak przywrócić zasób.
Dostosuj wtyczkę JS & CSS Script Optimizer
Otwórz ustawienia wtyczki JS & CSS Script Optimizer. Tutaj, dla skutecznej optymalizacji, musisz wykonać następujące kroki w kolejności:
- Włączamy wtyczkę - Włącz wtyczkę , katalog do przechowywania pamięci podręcznej plików i pozostaw ścieżkę do niej bez zmian.
- Następnie zaznacz pole wyboru Ignoruj zewnętrzny JavaScript, to znaczy zignoruj zewnętrzne skrypty z innych domen.
- Pakowanie skryptów Java zależy od Ciebie, ponieważ mogą przestać działać.
- Następnie przychodzą punkty łączenia skryptów w stopce i nagłówku lub przenoszenia ich do stopki, także według uznania w każdym przypadku na swój własny sposób.
- Następnie włącz opcje optymalizacji CSS, tylko dla tych skryptów, które są w Twojej domenie, połącz pliki stylu, zminimalizuj je, a następnie zapisz ustawienia.
- Następnie w polu Ignoruj następne CSS dozwolone jest dodanie listy plików CSS, które nie powinny zostać scalone.
Może to być przydatne, gdy nagle zauważysz, że witryna zaczyna się wyświetlać niepoprawnie iw tym przypadku niektóre pliki stylów muszą zostać wykluczone z scalenia.
Dane w tym polu muszą być wprowadzone ze ścieżką względną, ponieważ niektóre z nich mogą należeć do motywu projektu lub wtyczki, więc lepiej jest określić wszystkie zadania.
Aktualizujemy zasób, wszystko wygląda dobrze, sprawdzamy wszystkie strony, nic nie jest zepsute, a nawet działa.
Sprawdzamy kod źródłowy, w nim widać połączony plik stylu CSS i połączone skrypty Java.
Kod po optymalizacji okazał się bardzo gęsty, praktycznie nie nadaje się do edycji, ale jest optymalny do pobrania do przeglądarki, ponieważ nie ma w nim nic zbędnego.
Jednocześnie dane źródłowe w ogóle się nie zmieniają, wszystko, co jest w temacie projektu lub wtyczkach, wszystko pozostaje niezmienione, to znaczy optymalizacja CSS nie zmienia ich w żaden sposób.
W tym przypadku połączony plik css jest przechowywany w pamięci podręcznej i stamtąd ładowany. Po odłączeniu wtyczki wszystko zostanie w pełni przywrócone.
Zobaczmy, co zmieniło się na stronach serwisów developers.google.com i tools.pingdom.com po optymalizacji.
Możesz zauważyć, że liczba żądań zmniejszyła się, a czas ładowania połączonych plików CSS i skryptów Java również się zmniejszył.
Oznacza to, że wynik po optymalizacji css jest całkiem dobry i pozostaje mniej problemów, które wciąż wymagają rozwiązania.
