Наша команда-партнер Artmisto
Kilka dni z rzędu pracuje nad szablonem, który ostatnio się zmienił. Wcześniej istniał stały szablon, bez względu na to, jak z nim walczyłem, nie mogłem go przystosować, więc musiałem to zrobić inaczej - zainstalować już zaadaptowany szablon i przerobić go dla siebie. Wykonałem całą pracę i postanowiłem sprawdzić prędkość pobierania witryny w PageSpeed , wyniki delikatnie uderzyły mnie. Licznik prędkości pokazał tylko 22/100, więc nie jest dobrze, trzeba coś zrobić i zacząłem optymalizować wszystko. W rezultacie wynik można poprawić do 65/100 , ale nie zamierzam się na tym zatrzymywać. Chętnie podzielę się z wami moimi metodami, więc zapisz się na aktualizacje na dole artykułu i zawsze bądź na bieżąco.
W tym artykule przyjrzymy się wtyczce Autoptimize , wkładowi, oczywiście, nie był on duży, ale nadal trochę pomógł, zwiększając przynajmniej trochę wydajności. Przed wyświetleniem strony wtyczka umieści wszystkie pliki JS w jednym i wyświetli je na końcu strony, to samo dzieje się z plikami CSS . Ponadto dodatkowo optymalizuje kod HTML . Zalecenia, aby to koniecznie umieścić, nie podaję, ale też nie kładę. Ogólnie rzecz biorąc, wybór należy do Ciebie i mój opis ustawień.
Zdajemy standardowy proces instalacje po czym w ustawieniach pojawi się nowy element Konsola > Ustawienia > Autoptymalizuj
Podstawowe ustawienia.
Musimy zaznaczyć te punkty:
- Optymalizuj kod HTML
- Optymalizuj kod javascript
- Zoptymalizuj kod CSS
Zapisz komentarze HTML - jeśli są jakieś ważne komentarze na temat pracy wtyczek w kodzie strony (na przykład Super pamięć podręczna Daje informacje o tym, ile strona zaczęła ładować się szybciej), a następnie musisz sprawdzić ten element, w innych przypadkach nie powinieneś go zaznaczać.
Generuj dane: URI dla obrazów - co to ustawienie robi, nie do końca rozumiałem, niektóre obrazy staną się obrazami tła, co z kolei powinno przyspieszyć witrynę.
Można to zauważyć, ale nie będzie wielkiego sensu.
Ustawienia zaawansowane.
W górnej części strony znajduje się przycisk o nazwie „Pokaż ustawienia zaawansowane” , po jego naciśnięciu pojawią się dodatkowe ustawienia .
Wymuś JavaScript w <head> - wtyczka włącza JavaScript na końcu strony, ale z tego powodu mogą pojawić się różne błędy, w przypadku takich problemów po prostu zaznacz to pole.
Szukaj skryptów tylko w <head> - działaj tylko ze skryptami w <head>. Użyj najlepiej z poprzednim ustawieniem.
Wyklucz skrypty z Autoptimize - lista skryptów do wykluczenia. Lepiej nie dotykać tych ustawień w ogóle.
Dodaj zawijanie próbne - wyklucz skrypty niepracujące. Jeśli nie masz pewności co do wydajności skryptów w swojej witrynie, zaznacz to pole wyboru i zostaną one wykluczone.
<Head> - do pracy tylko ze stylami znajdującymi się w <head> . Nie rozumiem dlaczego ta opcja w ogóle.
Inline i Defer CSS - style CSS zostaną załadowane po załadowaniu HTML. Ponownie, coś dziwnego, oczywiście nie świętujemy .
Wstaw wszystkie CSS - osadza style CSS w dokumencie HTML. Waga stron HTML, które należy znacznie zwiększyć , aktywuj, również nie warto.
Wyklucz CSS z Autoptimize to ta sama historia co wykluczanie skryptów, tylko tym razem ze stylami. Jak ostatnim razem radzę, abyś niczego nie zmieniał.
Opcje CDN najlepiej też nie dotykać.
Informacje o pamięci podręcznej - gdy aktywujesz dodatkowe ustawienia, statystyki również wychodzą . Wyświetlana jest lokalizacja pamięci podręcznej, ile plików jest przechowywanych w pamięci podręcznej (zaznaczone na zrzucie ekranu). Jeśli ich liczba przekracza 80, radzę zachować czujność, dobrze sprawdzić witrynę i usunąć wtyczkę.
Zapisz zagregowany skrypt / css jako pliki statyczne - zauważ, jeśli podejrzewasz, że serwer nie przetwarza poprawnie i kompresuje pliki. Zostało to domyślnie odnotowane, więc postanowiłem go opuścić.
Cóż, najbardziej zabawne jest dziwne pytanie - zacznijmy? A odpowiedź brzmi „Tak”. Oczywiście rozumiem, że jest to najprawdopodobniej informacja, że wtyczka działa, ale nadal wygląda śmiesznie.
Twórz dobre witryny. Do zobaczenia wkrótce.
