TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

67

Autoptimize to jedna z popularnych wtyczek przyspieszających działanie witryny WordPress. Istnieje ponad milion aktywnych instalacji tych wtyczek ze średnią oceną 4,7 od ponad tysiąca użytkowników. Nie może być fałszywe, że tak wiele osób instaluje i używa tej wtyczki do optymalizacji swojej witryny. Musisz jednak zapewnić poprawną konfigurację, aby wtyczka działała dla Ciebie.

Powiązane: 8 najlepszych wtyczek do buforowania dla WordPressa.

Co robi autooptymalizacja?

Po pierwsze, musisz zrozumieć, że Autoptimize nie jest wtyczką buforującą, taką jak WP Rocket lub W3 Total Cache. Jest to wtyczka optymalizacyjna, która pomaga wykonywać następujące czynności:

  • Połącz wszystkie pliki CSS i JavaScript
  • Zminimalizuj skompresowane pliki i umieść je w pamięci podręcznej, a także zminimalizuj kod HTML, usuwając komentarze i spacje
  • Dodaj nagłówek wygaśnięcia do plików, aby obsługiwać wersję z pamięci podręcznej
  • Przenieś CSS do nagłówka, a skrypty do stopki

Później programista uwzględnił również optymalizację obrazu pod kątem leniwego ładowania i udostępniania obrazów WebP w celu przyspieszenia plików multimedialnych. Jak wspomniano na stronie wtyczki na WordPress.org, serwery HTTP/2 mogą automatycznie robić wiele rzeczy, które robi ta wtyczka. Dlatego powinieneś przetestować za pomocą prób, aby upewnić się, że wtyczka faktycznie dodaje jakąkolwiek wartość do twojej instalacji.

Jak prawidłowo skonfigurować autooptymalizację w WordPressie?

Autoptimize to jedna z najprostszych wtyczek w konfiguracji. Po zainstalowaniu i aktywacji wtyczki przejdź do menu „Ustawienia > Autooptymalizuj". Posiada opcje optymalizacji JS, CSS, HTML i obrazów na Twojej stronie.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Ustawienia autooptymalizacji

Ustawienia JS, CSS i HTML

Ta karta ma wiele opcji do segregowania i optymalizacji plików w Twojej witrynie. Autoptimize zagreguje i zminimalizuje skrypty, CSS i HTML z Twojego motywu i wtyczek. Dlatego wybranie niektórych opcji może zepsuć Twoją witrynę, zwłaszcza jeśli używasz motywu opartego na jQuery.

Opcje JavaScript

  • Optymalizuj kod JavaScript — włącz tę opcję, aby zminimalizować pliki JavaScript. Spowoduje to skompresowanie i zmniejszenie rozmiaru plików skryptów w Twojej witrynie.
  • Zagregować pliki JS? – włącz tę opcję, aby asynchronicznie łączyć wszystkie pliki JavaScript i serwer podczas ładowania stron w Twojej witrynie. Pomoże to usunąć problem ze skryptem blokującym renderowanie w narzędziu Google PageSpeed ​​Insights. Jednak w większości przypadków spowoduje to uszkodzenie witryny. Najlepszą opcją jest włączenie tego i podanie wyjątków, aby strona mogła się ładować bez zerwania. Ale doprowadzi to do problemu z blokowaniem renderowania w PageSpeed ​​Insights. Możesz wyłączyć tę opcję i włączyć tylko „Optymalizuj kod JavaScript”, aby tylko minimalizować pliki.
  • Agregować również wbudowany JS? – zalecamy wyłączenie tej opcji, gdy Twój motyw lub wtyczka dynamicznie wprowadzają wiele skryptów. Włączenie tego może spowodować, że rozmiar pamięci podręcznej będzie rósł szybciej i był większy, co wpłynie na wydajność, a nie na poprawę.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Opcje JavaScript

  • Wymuś JavaScript w ? – najlepszą praktyką jest ładowanie plików JavaScript w stopce tak, aby ładowały się pod koniec ładowania strony. To skutecznie usunie blokowanie renderowania i problemy związane ze skryptami, które pojawiają się w narzędziach do pomiaru prędkości. Jeśli jednak zauważysz, że poprzednie opcje psują Twoją witrynę, włącz to, aby załadować skrypty w nagłówku, aby sprawdzić, czy to pomaga. Ponownie wczytanie skryptów w nagłówku spowoduje wyświetlenie ostrzeżenia o blokowaniu renderowania w narzędziu PageSpeed ​​Insights.
  • Wyklucz skrypt z Autoptimize – wtyczka domyślnie wypełnia to pole jquery.js i innymi ważnymi plikami w Twojej witrynie. Jeśli zauważysz, że jakiś konkretny motyw lub pliki wtyczek psują Twoją witrynę, możesz dołączyć ten plik tutaj. Pamiętaj, aby wypełnić względną ścieżkę pliku, ignorując nazwę domeny. ponadto, jak wspomniano w opisie, wtyczka będzie nadal minimalizować wykluczone pliki, chyba że wykluczysz je w sekcji „Różne”. Po przetestowaniu różnych motywów zalecamy wykluczenie jquery.js, aby uniknąć problemów z łamaniem układu w witrynie. Czasami możesz nie zauważyć problemu w witrynie, jednak możesz zobaczyć błąd konsoli w narzędziach programistycznych Google Chrome. Błąd wyświetli coś w stylu „$ lub jQuery nie jest zdefiniowany” lub „nieznana funkcja”.
  • Dodać opakowanie próbne? – włącz tę opcję, gdy zauważysz, że wtyczka psuje Twoją witrynę. Zalecamy wyłączenie tej opcji i wykluczenie pliku, który jest uszkodzony w wyjątku.

Opcje CSS

Opcje CSS są prawie podobne do opcji JavaScript.

  • Zoptymalizować kod CSS? – włącz tę opcję, aby kompresować i minimalizować pliki CSS na swojej stronie.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Opcje CSS

  • Zagregować pliki CSS? – włącz tę opcję, aby połączyć wszystkie pliki CSS w swojej witrynie i służyć jako jeden skompresowany i zminimalizowany plik CSS.
  • Zagreguj także wbudowany CSS – włącz tę opcję, aby uwzględnić wbudowany CSS do agregacji. Jeśli twój motyw lub wtyczka wprowadzają dużo wbudowanego CSS, ta opcja zwiększy rozmiar pamięci podręcznej.
  • Generuj dane: identyfikatory URI obrazów? – włącz tę opcję, aby Autooptimize mogło wstawić małe obrazy pobrane przez Twój motyw i wtyczki.
  • Inline i defer CSS – aby włączyć tę opcję, powinieneś najpierw znać krytyczny CSS dla swojej witryny. Niestety, uzyskanie krytycznego kodu CSS nie jest łatwe, ponieważ każdy szablon w Twojej witrynie wymaga oddzielnego krytycznego kodu CSS. Na przykład, jeśli masz WooCommerce w swojej witrynie, nie możesz używać krytycznego CSS dla postów lub strony dla stron produktów WooCommerce. Naszym zdaniem powinieneś wyłączyć tę opcję w Autooptimize. W przeciwnym razie możesz uzyskać API premium ze strony krytycznej.com i zintegrować się z Autoptimize w zakładce „Krytyczny CSS”.
  • Inline all CSS – włącz to, aby wstawić wszystkie CSS zamiast linkować jako plik. Po włączeniu tej opcji możesz wyświetlić kod źródłowy swojej witryny, aby zobaczyć ogromną ilość CSS. Wstawianie CSS może drastycznie poprawić szybkość, jednak może to niekorzystnie wpłynąć, jeśli masz duży plik CSS.
  • Wyklucz CSS z Autoptimize – jeśli zauważysz, że witryna się psuje, możesz wykluczyć określone pliki CSS w tym polu tekstowym. Podobnie jak w przypadku plików JavaScript, musisz podać ścieżkę względną, ignorując nazwę domeny. Autooptimize domyślnie wykluczy również pamięć podręczną, ikony i inne CSS. Możesz również podać foldery względne, takie jak „wp-content/uploads/”, aby wykluczyć wszystkie pliki CSS w tym folderze.

Naucz się WordPressa: sprawdź ponad 400 bezpłatnych samouczków WordPress.

Opcje HTML

Podobnie jak w przypadku JS i CSS, włącz opcję „Optymalizuj kod HTML”, aby skompresować i zminimalizować zawartość HTML w swojej witrynie. Możesz także włączyć lub usunąć komentarze, używając opcji „Zachowaj komentarze HTML?” opcja. Zalecamy włączenie obu tych opcji.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Opcje HTML

Opcje CDN

Jeśli używasz CDN, który tworzy adres URL strefy, powinieneś wprowadzić tutaj główny adres URL w polu tekstowym "CDN Base URL". Możesz jednak zignorować to, jeśli nie używasz CDN lub używasz Cloudflare lub innych CDN korzystających z serwerów nazw DNS.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Opcje CDN

Informacje o pamięci podręcznej

W sekcji „Informacje o pamięci podręcznej” możesz znaleźć stan buforowania Autooptimize. Pokaże ci ścieżkę, rozmiar i liczbę plików w pamięci podręcznej.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Informacje o pamięci podręcznej

Różne opcje

  • Zapisać zagregowane skrypty/CSS jako pliki statyczne? – powinno to być domyślnie włączone, ponieważ skompresowane pliki muszą być obsługiwane jako zasób statyczny, aby poprawić szybkość. Jak wspomniano w opisie, jeśli wystąpi problem z wyświetlaniem, wyłącz tę opcję i spróbuj, że to pomoże.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Różne opcje

  • Zminimalizować wykluczone pliki CSS i JS? – wtyczka automatycznie minimalizuje wszystkie pliki CSS i JS, chociaż wykluczyłeś określone pliki w ustawieniach CSS lub JS. Wyłącz to pole wyboru, jeśli chcesz wyłączyć minifikację wykluczonych plików CSS i JS.
  • Optymalizuj również dla zalogowanych redaktorów/administratorów? – zalecamy wyłączenie tej opcji, aby po zalogowaniu się jako administrator lub redaktor można było przeglądać rzeczywistą witrynę bez autooptymalizacji. W przeciwnym razie możesz zauważyć problemy z działaniem wtyczek do tworzenia stron.

Zapisz wszystkie zmiany, aby wtyczka zaczęła działać w Twojej witrynie.

Obrazy

Karta „Obrazy” oferuje opcje optymalizacji obrazów.

  • Optymalizuj obrazy — ta opcja pomaga korzystać z globalnej sieci CDN Shortpixel do optymalizacji i wyświetlania obrazów w podróży. Shortpixel to rozwiązanie do kompresji obrazu premium, które pozwala zoptymalizować 150 zdjęć miesięcznie. W tej sekcji możesz wyświetlić aktualny stan i wykorzystanie limitu.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Optymalizacja obrazu

  • Jakość optymalizacji obrazu – możesz wybrać jedną z opcji błyszczących, stratnych lub bezstratnych. Możesz sprawdzić różnice między tymi opcjami i przetestować swoje obrazy na stronie Shortpixel. Pomoże Ci to wybrać najlepszą opcję dla Twoich potrzeb.
  • Załadować WebP w obsługiwanych przeglądarkach? – wybierz tę opcję, aby wyświetlać obrazy WebP dla Chrome i innych obsługiwanych przeglądarek.
  • Obrazy z leniwym ładowaniem?leniwe ładowanie odroczy obrazy poza ekranem i załaduje je tylko wtedy, gdy użytkownik osiągnie pozycję obrazu w przeglądarce. Włącz tę opcję, aby poprawić szybkość ładowania i poprawić wynik w narzędziu Google PageSpeed ​​Insights.
  • Wykluczenia Lazy-load – tutaj możesz wprowadzić typy obrazów lub nazwy plików, aby wykluczyć je z lazy loading.

Zauważ, że większość wtyczek i motywów ma wbudowaną opcję leniwego ładowania. Na przykład motyw gazety, wtyczka Jetpack, wtyczka WP Smush i wtyczka SG Optimizer dla użytkowników SiteGround mają opcję leniwego ładowania. Zalecamy korzystanie z leniwego ładowania tylko wtedy, gdy nie używasz podobnych opcji w innych wtyczkach lub motywach w Twojej witrynie. Podobnie włączaj Shortpixel tylko wtedy, gdy nie masz zewnętrznej sieci CDN do buforowania obrazów. Używaj tego ostrożnie, ponieważ ma to ograniczenia w użyciu.

Dodatkowy

Korzystanie z zasobów stron trzecich w witrynie wpłynie na szybkość ładowania strony. Karta „Dodatkowe” oferuje dodatkowe opcje optymalizacji niektórych standardowych treści stron trzecich w Twojej witrynie.

  • Google Fonts – jeśli korzystasz z Google Fonts w swojej witrynie, masz możliwość wyłączenia lub połączenia.
  • Usuń emotikony – WordPress domyślnie używa skryptu emotikonów Unicode do dodawania symboli emotikonów w Twojej witrynie. Jeśli nie używasz emotikonów, zalecamy włączenie tej opcji, aby wyłączyć emotikony.
  • Usuń ciągi zapytań z zasobów statycznych – pliki CSS i JS wykorzystują kontrolę wersji i dodają parametr w adresie URL za pomocą „ver”. Jeśli masz statyczną witrynę internetową (dotyczy to większości witryn WordPress, z wyjątkiem forów i witryn niestandardowych), nie ma potrzeby korzystania z wersjonowania, ponieważ pliki mają również charakter statyczny. Gdy zagregujesz wszystkie pliki CSS i JS, wtyczka automatycznie wyświetli plik z pamięci podręcznej jako zasób statyczny. Jeśli jednak wykluczyłeś niektóre pliki lub nie agregujesz CSS lub JS, włącz tę opcję, aby usunąć wersje z adresu URL.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Dodatkowe opcje

  • Preconnect do domen firm trzecich – preconnect umożliwia połączenie z serwerem firm trzecich przed wysłaniem żądania przeglądarki HTTP. w tym polu tekstowym możesz dodać domeny, które chcesz wstępnie połączyć.
  • Wstępne ładowanie określonych żądańwstępne ładowanie pomaga załadować połączone adresy URL, zwiększając w ten sposób prędkość ładowania strony. Wpisz dowolne domeny innych firm, takie jak fonts.google.com, aby je wstępnie wczytać.
  • Async pliki JavaScript — wprowadź pliki JS innych firm, które chcesz załadować asynchronicznie za pomocą właściwości „async”.
  • Optymalizuj filmy z YouTube – ta opcja wymaga dodatkowej wtyczki do leniwego ładowania filmów z YouTube.

Najczęstsze problemy z Autooptimize

Poprawnie zoptymalizowana wtyczka Autoptimize może poprawić szybkość witryny i wynik w narzędziu Google PageSpeed ​​Insights. Ma jednak kilka problemów, gdy używa go jako rozwiązania do optymalizacji prędkości.

1 Używanie z innymi wtyczkami

Problem z Autoptimize polega na tym, że nie jest to buforowanie, ale zawiera połowę opcji optymalizacji oferowanych przez pełnoprawną wtyczkę buforującą. Musisz wybrać wtyczki, takie jak WP Super Cache, aby pracować z Autoptimize, aby uniknąć zbędnych opcji. W przeciwnym razie nie musisz używać Autoptimize, gdy masz wtyczki takie jak W3 Total Cache lub WP Rocket.

2 integracje upsellingowe

Dzięki kilku dostępnym opcjom możesz zobaczyć, jak wtyczka sprzedaje się w górę integracji z Shortpixel, WP YouTube Lyte i krytycznecss.com. każda integracja wymaga dodatkowej wtyczki lub konta, co nie jest konieczne, gdy wybierzesz jedną wtyczkę do buforowania premium, taką jak WP Rocket z dobrym CDN. Ponadto istnieje oddzielny „Optymalizuj więcej!” zakładka do sprzedaży produktów partnerskich.

3 Krytyczne CSS

Krytyczny CSS to CSS wymagany do załadowania na stronie nad zawartością strony po przewinięciu. Problem polega na tym, że każdy układ strony, taki jak post, strona, produkt, portfolio itp., wymaga oddzielnego krytycznego kodu CSS, aby poprawnie załadować powyższy fold. Jest to skomplikowane zadanie, aby wygenerować krytyczny CSS za pomocą innej wtyczki „Autooptymalizuj zasilanie krytyczne krytycznecss.com” i klucza API premium z cricialcss.com.

4 Łamanie układu strony

W większości przypadków wtyczka zepsuje układ Twojej witryny. Musisz ręcznie sprawdzić i przeanalizować, aby znaleźć skrypt lub opcję, która psuje Twoją witrynę i wykluczyć je z wtyczki Autoptimize.

5 Rosnący rozmiar pamięci podręcznej

Wbudowanie CSS i JS sprawi, że rozmiar pamięci podręcznej drastycznie wzrośnie. Przetestowaliśmy z popularnym motywem Gazety, aby znaleźć rozmiar pamięci podręcznej uderzający w 100% w ciągu jednego dnia. Problem polega na tym, że wtyczka udostępnia te opcje bez automatycznego czyszczenia pamięci podręcznej. Oznacza to, że musisz ręcznie logować się do pulpitu nawigacyjnego i usuwać pamięć podręczną za każdym razem, gdy rozmiar rośnie.

Jak prawidłowo skonfigurować autooptymalizację w witrynie WordPress?

Autooptymalizacja pełnej pamięci podręcznej

Wniosek

Naszym zdaniem ta wtyczka działa dobrze, gdy masz prosty motyw i używasz prostych wtyczek buforowania, takich jak WP Super Cache. Jednak większość użytkowników będzie korzystać na swojej stronie ze standardowych wtyczek, takich jak Jetpack lub W3 Total Cache. W takim przypadku Autooptimize będzie nadmiarową opcją, ponieważ albo nie masz kompletnej wtyczki, albo wyłączasz niektóre opcje.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów