Napotkanie problemów z blokującymi renderowanie skryptami JavaScript i CSS na Twojej stronie WordPress może być frustrujące. Problemy te mogą spowolnić Twoją stronę i wpłynąć na jej wydajność. Wolna strona może odstraszyć odwiedzających i wpłynąć na Twoje pozycje w wyszukiwarkach.
Kiedy sprawdzasz swoją witrynę w Google PageSpeed Insights, możesz zobaczyć sugestię wyeliminowania tych zasobów blokujących renderowanie. Niestety, narzędzie nie podaje jasnych instrukcji, jak rozwiązać ten problem w WordPressie.
Dobra wiadomość jest taka, że istnieją narzędzia, które mogą sprawić, że naprawa blokującego renderowanie JavaScript i CSS będzie mniej skomplikowana, niż się wydaje. Możesz użyć wtyczki buforującej, takiej jak WP Rocket lub Autoptimize, aby zoptymalizować swoją witrynę poprzez minifikację i odroczenie skryptów, co skraca czas ładowania i poprawia wyniki PageSpeed.
W tym artykule przeprowadzimy Cię przez kroki rozwiązywania tych problemów na Twojej witrynie WordPress.
Co to jest JavaScript i CSS blokujący renderowanie?
Blokujący renderowanie JavaScript i CSS to pliki, które uniemożliwiają wyświetlenie strony internetowej przed ich załadowaniem.
Każda strona internetowa WordPress ma motyw i wtyczki, które dodają pliki JavaScript i CSS do front-endu Twojej strony internetowej.
Te skrypty mogą zwiększyć czas ładowania strony i mogą również blokować renderowanie strony.
Przeglądarka użytkownika będzie musiała załadować te skrypty i CSS przed załadowaniem reszty kodu HTML na stronie. Oznacza to, że użytkownicy z wolniejszym połączeniem będą musieli poczekać kilka dodatkowych milisekund, aby zobaczyć stronę.
Te skrypty i arkusze stylów są określane jako blokujący renderowanie JavaScript i CSS.
Właściciele witryn WordPress, którzy starają się osiągnąć wynik Google PageSpeed 100, będą musieli rozwiązać ten problem, aby uzyskać doskonały wynik.
Co to jest wynik Google PageSpeed?
Google PageSpeed Insights to narzędzie do testowania prędkości strony internetowej stworzone przez Google, aby pomóc właścicielom stron internetowych optymalizować i testować swoje witryny. To narzędzie testuje Twoją stronę internetową pod kątem wytycznych Google dotyczących prędkości i oferuje sugestie dotyczące poprawy czasu ładowania strony.
Pokazuje wynik oparty na liczbie przeprowadzonych audytów, które Twoja strona przechodzi.
Większość stron internetowych uzyskuje wyniki w przedziale 50-70. Jednak niektórzy właściciele stron czują się zmuszeni do osiągnięcia 100 (najwyższego możliwego wyniku dla strony).
Czy naprawdę potrzebujesz idealnego wyniku „100” w Google PageSpeed?
Celem Google PageSpeed Insights jest dostarczenie wskazówek dotyczących poprawy szybkości i wydajności Twojej witryny. Niemniej jednak nie musisz ściśle przestrzegać tych zasad.
Pamiętaj, że szybkość to tylko jedna z wielu metryk optymalizacji dla wyszukiwarek (SEO) witryny, które pomagają Google określić, jak ocenić Twoją witrynę. Szybkość jest tak ważna, ponieważ poprawia doświadczenie użytkownika na Twojej stronie.
Lepsze doświadczenie użytkownika wymaga znacznie więcej niż tylko szybkości. Musisz także oferować przydatne informacje, lepszy interfejs użytkownika i angażujące treści z tekstem, obrazami i filmami.
Wtedy Twoim celem powinno być stworzenie szybkiej strony internetowej, która oferuje wspaniałe doświadczenie użytkownika.
Zalecamy traktowanie zasad Google PageSpeed jako sugestii. Jeśli możesz je łatwo wdrożyć bez psucia doświadczenia użytkownika, to świetnie. W przeciwnym razie powinieneś spróbować zrobić tyle, ile możesz, a potem nie martwić się o resztę.
Mając to na uwadze, przyjrzymy się, co możesz zrobić, aby naprawić blokujący renderowanie JavaScript i CSS w WordPress. Omówimy 2 metody, które wyeliminują zasoby blokujące renderowanie w WordPress. Możesz wybrać tę, która najlepiej działa dla Twojej witryny:
- Metoda 1: Napraw blokujące renderowanie skryptów i CSS za pomocą WP Rocket
- Metoda 2: Napraw skrypty i CSS blokujące renderowanie za pomocą Autoptimize
- Co zrobić, jeśli JavaScript i CSS blokujące renderowanie nadal istnieją
Zanurzmy się i sprawmy, aby Twoja witryna działała płynnie!
Metoda 1: Napraw blokujące renderowanie skryptów i CSS za pomocą WP Rocket
W tej metodzie użyjemy wtyczki WP Rocket.
To najlepsza wtyczka buforująca i optymalizująca WordPress na rynku, która pozwala szybko poprawić wydajność Twojej witryny bez żadnych umiejętności technicznych ani skomplikowanej konfiguracji.
Najpierw musisz zainstalować i aktywować wtyczkę WP Rocket. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.
WP Rocket działa od razu po instalacji: włączy buforowanie z optymalnymi ustawieniami dla Twojej strony internetowej. Dowiedz się więcej w naszym kompletnym przewodniku, jak poprawnie zainstalować i skonfigurować WP Rocket w WordPress.
Domyślnie nie włącza opcji optymalizacji JavaScript i CSS. Te optymalizacje mogą potencjalnie wpłynąć na wygląd Twojej witryny lub niektóre funkcje, dlatego wtyczka pozwala na opcjonalne włączenie tych ustawień.
Aby to zrobić, musisz odwiedzić stronę Ustawienia » WP Rocket i przejść do zakładki „Optymalizacja plików”.
Stąd po prostu przewiń do sekcji „Pliki CSS” i zaznacz pola obok „Minifikuj CSS”, „Połącz pliki CSS” i „Optymalizuj dostarczanie CSS”.
W przypadku ustawienia „Optymalizuj dostarczanie CSS” WP Rocket zaleca wybór metody „Usuń nieużywany CSS”.
Oprócz oferowania najlepszej wydajności, może pomóc zmniejszyć rozmiar strony i liczbę żądań HTTP.
Uwaga: Wtyczka WP Rocket cache będzie próbowała zminimalizować wszystkie Twoje pliki CSS, połączyć je i ładować tylko CSS potrzebny do widocznej części Twojej strony internetowej.
Może to wpłynąć na wygląd Twojej witryny, dlatego musisz dokładnie przetestować swoją witrynę na wielu urządzeniach i rozmiarach ekranu.
Następnie musisz przewinąć do sekcji „Pliki JavaScript”.
Stąd możesz sprawdzić wszystkie opcje maksymalnego usprawnienia wydajności.
Możesz minifikować i łączyć pliki JavaScript, tak jak zrobiłeś to dla CSS.
Możesz również uniemożliwić WordPressowi ładowanie pliku jQuery Migrate. Ten skrypt jest ładowany w celu zapewnienia kompatybilności z wtyczkami i motywami używającymi starszych wersji jQuery.
Większość stron internetowych nie potrzebuje tego pliku, ale nadal warto sprawdzić swoją stronę, aby upewnić się, że jego usunięcie nie wpłynie na Twój motyw ani wtyczki.
Następnie przewińmy trochę dalej i zaznaczmy pola obok opcji „Ładuj JavaScript opóźniony” i „Tryb bezpieczny dla jQuery”.
Te opcje opóźniają ładowanie nieistotnych skryptów JavaScript, a tryb bezpieczny jQuery pozwala na ładowanie jQuery dla motywów, które mogą go używać w linii. Możesz pozostawić tę opcję niezaznaczoną, jeśli masz pewność, że Twój motyw nie używa jQuery w linii nigdzie.
Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.
Następnie możesz również wyczyścić pamięć podręczną w WP Rocket przed ponownym przetestowaniem swojej strony internetowej w Google PageSpeed Insights.
Na naszej stronie testowej udało nam się uzyskać 100% wynik na urządzeniach stacjonarnych, a problem blokowania renderowania został rozwiązany zarówno w wynikach mobilnych, jak i stacjonarnych.
Metoda 2: Napraw skrypty i CSS blokujące renderowanie za pomocą Autoptimize
W tej metodzie użyjemy oddzielnej wtyczki stworzonej specjalnie w celu poprawy dostarczania plików CSS i JS Twojej strony internetowej. Chociaż ta wtyczka wykonuje swoje zadanie, nie posiada innych potężnych funkcji, które ma WP Rocket.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie Autoptimize, darmowej wtyczki przyspieszającej działanie strony. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji musisz przejść do Ustawienia » Autoptimize, aby skonfigurować ustawienia wtyczki.
Najpierw zaznacz pole obok opcji „Optymalizuj kod JavaScript” w sekcji „Opcje JavaScript”. Tutaj musisz upewnić się, że opcja „Agreguj pliki JS” jest odznaczona.
Następnie przewiń w dół do pola „Opcje CSS” i zaznacz opcję „Optymalizuj kod CSS”.
Po prostu upewnij się, że opcja „Agreguj pliki CSS” jest odznaczona.
Teraz możesz kliknąć przycisk „Zapisz zmiany i wyczyść pamięć podręczną”, aby zapisać swoje ustawienia.
Przejdź dalej i przetestuj swoją witrynę za pomocą narzędzia PageSpeed Insights. Dzięki tym podstawowym ustawieniom pomyślnie rozwiązaliśmy problem blokowania renderowania na naszej stronie demonstracyjnej.
Jeśli nadal istnieją skrypty blokujące renderowanie, możesz wrócić do strony ustawień wtyczki i przejrzeć ustawienia w opcjach JavaScript i CSS.
Na przykład, możesz pozwolić wtyczce na dołączenie kodu JS w linii i usunięcie skryptów wykluczonych domyślnie, takich jak seal.js lub jquery.js. Następnie po prostu kliknij przycisk „Zapisz zmiany i opróżnij pamięć podręczną”, aby zapisać zmiany i opróżnić pamięć podręczną wtyczki.
Gdy skończysz, sprawdź ponownie swoją stronę za pomocą narzędzia PageSpeed Insights.
Jak działa Autoptimize?
Autoptimize agreguje wszystkie dodane JavaScript i CSS. Następnie tworzy zminimalizowane pliki CSS i JavaScript i serwuje ich kopie z pamięci podręcznej do Twojej witryny jako asynchroniczne lub opóźnione.
Pozwala to na rozwiązanie problemu blokowania skryptów i stylów przez renderowanie. Należy jednak pamiętać, że może to również wpłynąć na wydajność lub wygląd Twojej strony.
Co zrobić, jeśli JavaScript i CSS blokujące renderowanie nadal istnieją
W zależności od tego, jak wtyczki i motyw WordPress wykorzystują JavaScript i CSS, może być trudno całkowicie naprawić wszystkie problemy z blokującym renderowanie JavaScript i CSS.
Chociaż powyższe narzędzia mogą pomóc, Twoje wtyczki mogą potrzebować pewnych skryptów do prawidłowego działania na innym poziomie priorytetu. W takim przypadku powyższe rozwiązania mogą zakłócić działanie takich wtyczek lub spowodować ich nieoczekiwane zachowanie.
Zamiast całkowicie eliminować problemy blokujące renderowanie, zalecamy alternatywne podejścia do przyspieszenia Twojej strony internetowej. Na przykład, możesz użyć usługi CDN do serwowania statycznych plików JavaScript i CSS oraz skrócenia czasu ładowania.
Możesz przeczytać nasz kompletny przewodnik po zwiększeniu szybkości i wydajności WordPress, aby uzyskać więcej informacji.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak naprawić blokujący renderowanie JavaScript i CSS w WordPress. Możesz również zapoznać się z naszym artykułem na temat jak łatwo naprawić błąd „Ta witryna jest niedostępna” oraz naszą listą ekspertów najczęstszych błędów WordPress i jak je naprawić.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Jiří Vaněk
Używam autoptimize i wp-rocket. Bardzo mi to pomogło. Należy jednak być bardzo ostrożnym z niektórymi zmianami. Jedno ustawienie i cała strona internetowa może natychmiast przestać działać poprawnie.
Amina
Witaj, Twoja strona i wskazówki były naprawdę pomocne. Dziękuję wpbeginner!
Mój AMP mówi, że niestandardowy skrypt JavaScript nie jest dozwolony. Próbowałem użyć i postępowałem zgodnie z Twoimi instrukcjami dla autoptimize, ale to nie rozwiązało problemu. Amp pokazuje, że błąd jest w linii 12:10 i 18:2.
Wsparcie WPBeginner
Cieszymy się, że nasz artykuł był pomocny. W przypadku pytań specyficznych dla AMP, takich jak to, zalecamy skontaktowanie się z pomocą techniczną AMP, która powinna być w stanie pomóc.
Admin
Fahad Khan
Cześć,
Czy jest jakiś inny sposób, aby to zrobić oprócz wp rocket i autopitmize?
Wsparcie WPBeginner
Prawdopodobnie istnieją inne narzędzia, ale są to obecne, które polecamy dla początkujących.
Admin
Rizz
Dla użytkowników W3 Total Cache
Nie dodawaj skryptu jQuery (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp) W przeciwnym razie Twoja strona nie załaduje się poprawnie.
CSS nie zgłosi żadnych błędów
Jeśli suwak Revolution wyświetli błąd –> przejdź do globalnych ustawień revslider i włącz opcję Wstaw skrypty w stopce.
Wsparcie WPBeginner
Dziękuję za podzielenie się kilkoma rekomendacjami, które znalazłeś podczas edycji swojej strony.
Admin
Muhammad Farhan
Nie pamiętam, kiedy kiedykolwiek znalazłem się w trudnej sytuacji, zawsze jesteś tam, aby mi pomóc, gdy nikogo nie ma. Nie znam lepszej strony z poradnikami WordPress niż wpbeginners, dziękuję bardzo.
Wsparcie WPBeginner
Glad our guides continue to be helpful to you
Admin
Lu
Świetne informacje jak zawsze!
Jestem z Siteground, więc mam SG Optimizer na mojej stronie. Przejrzałem ustawienia tak bardzo, jak rozumiem, ale nadal otrzymuję komunikat o eliminacji zasobów blokujących renderowanie.
Czy mogę również używać Autoptimize, czy będzie ono kolidować z SG? Dzięki
Wsparcie WPBeginner
You should be able to use Autoptimize with SG Optimizer but if you have any concerns if you reach out to the plugin’s support they should be able to let you know if there are currently any conflicts between the two
Admin
subin
jak mogę naprawić JavaScript i CSS blokujące renderowanie w WordPressie bez wtyczki.
Wsparcie WPBeginner
Musiałbyś ręcznie przejrzeć kod i ustawić pliki CSS i JS tak, aby ładowały się po dodaniu treści do strony.
Admin
Ben
Dziękuję za to! Autoptimize pomógł mi uzyskać lepszy wynik strony!
Ben
Wsparcie WPBeginner
You’re welcome, glad our recommendation could help
Admin
MoneyManch
Witaj Zespole WP Beginner,
Wielkie dzięki za udostępnienie tak przydatnego artykułu. Autoptimize to niesamowita wtyczka.
Szukałem wtyczki do przyspieszenia mojego bloga WP. Po przeczytaniu tego posta zainstalowałem i aktywowałem „Autoptimize” na moim blogu. I ku mojemu zdziwieniu, prędkość mojego bloga wzrosła z 39 do 61 dla urządzeń mobilnych i z 76 do 95 dla komputerów stacjonarnych, sprawdzonych w PageSpeed Insights.
Jeszcze raz dziękuję za pomoc nowym blogerom takim jak ja.
Wsparcie WPBeginner
Glad our recommendation could be helpful
Admin
sachin
Jak zidentyfikować adres URL skryptu i adres URL CSS?
Wsparcie WPBeginner
Jeśli używasz Google Page Insights, istnieje rozwijana strzałka, która pokaże Ci adresy URL powodujące problem z linkiem „Dowiedz się więcej” o tym, jak znaleźć adres URL bez ich narzędzia.
Admin
Raksh
Nowe narzędzie Google Page Speed Insights nie pokazuje linku, co mam zrobić.
Wsparcie WPBeginner
There should be a dropdown arrow and when you click that it should show the links to the files
Admin
Monika
Nie wiem, ile razy ta strona mi pomogła!!! Dziękuję BARDZO!
Pan Jatt Poonam
jak mogę zoptymalizować obrazy, które dodałem do mojej witryny w przeszłości?
Love Goel
Dzięki, stary, naprawdę doceniam Twój tutorial. Użyłem wtyczki Autoptimize i zadziałała dla mnie naprawdę dobrze.
Deeksha
Kiedy używam wszystkich tych wtyczek, nagle moja strona internetowa zwalnia i wyświetla nieodpowiednie treści…
Co mogę zrobić?? Proszę o pomoc
Wsparcie WPBeginner
Cześć Deeksha,
Oba wtyczki są dość bezpieczne. Jeśli widzisz nieodpowiednie treści na swojej stronie, upewnij się, że Twoja strona nie została zhakowana. Możesz wyłączyć obie wtyczki w dowolnym momencie.
Admin
sumit kumar gupta
Panie, kiedy instalujemy wtyczkę Autoptimize w naszym blogu WordPress, nasz blog się nie otwiera, pojawia się komunikat, że ta strona nie działa. Co mam zrobić, Panie?
Panie, chciałbym wiedzieć, czy dodanie linku javascript w celu wyeliminowania kodu blokującego renderowanie, zgodnie z Pana krokami, ma jakikolwiek wpływ na ranking mojego bloga. Proszę o pomoc.
Tim Helmer
Sumit:
Wtyczka nie działa, więc musisz zmienić nazwę folderu wtyczki, aby ją wyłączyć. Potrzebujesz FTP lub wtyczki do zarządzania plikami. Czy możesz uzyskać dostęp do panelu administracyjnego pod adresem domena/wp-login.php?
Henry Ramirez
Używam wordpress.com, czy istnieje jakiś wtyczka, która robi to samo tutaj na wordpress.com, ponieważ te wtyczki nie są tutaj obsługiwane? Dzięki
ben
Autoptimize działa dla mnie. ładnie kondensuje moje skrypty, ale nadal widzę ostrzeżenie o skrypcie blokującym renderowanie
Ismail
Witaj,
Obecnie używam WP Rocket, czy można używać wtyczki Autoptimize razem? Dziękuję za udostępnienie tych cennych informacji.
Gaurav Areng Chakraverti
Cześć. Próbowałem metody W3 i jak tylko włączam Minify (używając Dysku), otrzymuję następujący komunikat:
Fatal error: Unknown: Cannot use output buffering in output buffering display handlers in Unknown on line 0
Jak można to naprawić?
Świetny tutorial, chociaż ogólnie! Dzięki za to.
Gaurav Areng Chakraverti
EDIT: This problem goes away when I deactivate Autoptimize, however, so does the rest of the site. Only the bare bones remain with no actual content.
David
Ustawienia Autoptimize uległy zmianie. Jedyną dostępną opcją JavaScript jest Optymalizuj kod JavaScript? Pozostałe opcje na Twoim zrzucie ekranu nie są dostępne, przynajmniej nie na tym, który mam. Ostatnim razem, gdy próbowałem W3 Total Cache, nikt nie mógł uzyskać dostępu do strony. Nadal szukam sposobu na rozwiązanie problemu czasu ładowania strony, który z jakiegoś powodu wynosi od 10 do 17 sekund.
Chris
David, wypróbuj narzędzie do sprawdzania szybkości witryny Gmetrix. Na liście wyników znajduje się wykres wodospadowy pokazujący, jak strona się ładuje oraz jakie są największe pliki i skrypty spowalniające ładowanie strony.
Uważam, że najwolniejsze skrypty to skrypty CDN Google, takie jak Google Fonts! Ta sama firma, która nalega, zmuszając użytkowników do spełnienia jej żądań, ma skrypty, które ładują się wieki. Nie da się tego wymyślić.
Divij
Czy można jednocześnie używać minifikacji w W3 Total Cache i Cloudflare? Używamy minifikacji w Cloudflare i pozostawiliśmy ją wyłączoną w W3cache. Ale nadal otrzymujemy komunikat - Wyeliminuj blokujący renderowanie JavaScript i CSS w treściach widocznych na górze strony.
Dzięki!
Rana Jayant
Interfejs użytkownika pamięci podręcznej wtyczki 23 został zmieniony i nie ma w nim opcji, w której moglibyśmy umieścić nasz adres URL .js do optymalizacji.
Mówię o "Teraz przejdź do panelu administracyjnego WordPress i wybierz Strona Wydajność » Minifikacja".
MATTY
Świetny tutorial. Czy jednak W3 Total Cache jest teraz bezpieczny w użyciu z powodu problemu z początku roku? Przestałem go używać od tamtej pory, ale był to najlepszy plugin.
Mohamed
Dziękuję za udostępnienie tego artykułu, ale wspomniałeś (proszę pamiętaj, że może to również wpłynąć na wydajność lub wygląd Twojej witryny)
Proszę wyjaśnij, czy ten efekt będzie dobry czy zły dla pozycji witryny w rankingu Google?
Wsparcie WPBeginner
Cześć Mohamed,
Szybsza strona internetowa jest z pewnością dobra dla pozycji SEO. Jednak podczas rozwiązywania problemów z blokowaniem renderowania możesz zmienić wygląd swojego motywu lub uzyskać nawet niższy wynik prędkości strony niż wcześniej.
Admin
Angie
Ha, zabawne.
Szukałem tu pomocy.
Potem uruchomiłem narzędzie do sprawdzania szybkości Google dla TWOJEGO posta tutaj.
Wynik Google
Mobilny Słaby
54 / 100
komputer stacjonarny
Wymaga pracy
66 / 100
Czy masz jakiekolwiek wskazówki?
Wsparcie WPBeginner
Cześć Angie,
Często ludzie obsesyjnie dążą do uzyskania idealnego wyniku 100 w Google PageSpeed, co jest prawie niemożliwe dla większości funkcjonalnych stron internetowych. Jeśli masz jakiekolwiek przyciski mediów społecznościowych, skrypty remarketingowe lub reklamy, Twoja strona nigdy nie uzyska idealnego wyniku.
Jest duża szansa, że będziesz daleko od tego. Ale właśnie dlatego masz inne narzędzia, takie jak Pingdom, do weryfikacji wyników prędkości.
Na przykład: strona główna WPBeginner.com ładuje się w 508 ms (co jest niewiarygodnie szybko) –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot1.png
Ale ma wynik Google Pagespeed wynoszący 74 na komputerach stacjonarnych (co ci, którzy nie wiedzą lepiej, uznają za zły). –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot2.png
Jeśli przejrzysz wszystkie popularne strony internetowe, takie jak ESPN, NYTimes, TechCrunch itp., zauważysz, że żadna z nich nie ma idealnego wyniku... w rzeczywistości daleko im do tego.
Oto przykład wyniku ESPN – 62 na komputerze stacjonarnym –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot3.png
Oto przykład NYTimes – 68 na komputerze stacjonarnym –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot4.png
Oto przykład TechCrunch – 49 na komputerze stacjonarnym –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot5.png
Naszą radą jest skupienie się na jak najszybszym działaniu Twojej strony internetowej, postępując zgodnie z naszym przewodnikiem na temat jak przyspieszyć WordPressa i używanie narzędzi takich jak Pingdom jako punktu odniesienia dla tego, co zobaczą Twoi użytkownicy podczas ładowania Twojej strony internetowej.
Admin
Kat
To faktycznie pogorszyło moje blokowanie renderowania. Jak to usunąć?
Chris Daly
Za każdym razem, gdy używam Autoptimize lub W# Total Cache, moja strona eksploduje. Widok mobilny strony jest zamieniany na listę menu HTML, a części strony przestają działać. Próbowałem każdego z nich na 4 różnych stronach i zrezygnowałem z obu.
Chris
Chris, sugeruję, abyś przeczytał i przestrzegał ostrzeżenia W3 Cache w sekcji minifikacji. Minifikuj tylko HTML i CSS, i ponownie ostrzegam, nie wszystkie CSS powinny być minifikowane z powodów podanych w poście powyżej.
Używam W3 Cache selektywnie, tinyjpg do optymalizacji obrazów i ustawiam OpCache w pliku .htaccess. Twórcy szablonów uwielbiają używać suwaków... ale one obciążają stronę obrazami o szerokości ekranu 1920px. Zrezygnuj z suwaków, używaj mniejszych obrazów (z okienkiem modalnym, jeśli potrzebne są większe szczegóły) i zamiast tego ikon.
Mary Cahalane
Właśnie zainstalowałem i zepsuło mi to stronę główną. Wszystkie obrazy zniknęły.
Masz jakiś pomysł, jak to naprawić?
Bruno Ayres Martinez
Hej wszystkim! Podobał mi się tutorial W3. Brakuje tylko jednej informacji: Lokalizacja osadzania dla Zarządzania Plikami JS.
Czy to „Osadź przed treścią”? Czy „Osadź w nagłówku”? Czy „Osadź po treści”?
Dev thapa
Jestem nowy w blogowaniu, jednak od dłuższego czasu śledzę Wpbeginner.com i wszystko, co piszą, uważam za bardzo przydatne i nie waham się powiedzieć, że dzisiaj, jeśli moja strona blogowa jest na żywo… 30% zasługi przypada zespołowi Wpbeginner.com i Sayedowi Balkhi za stworzenie tak wspaniałej i użytecznej strony internetowej.
Jestem wdzięczny Wpbeginner.
Tak trzymajcie, wszystkiego najlepszego.
Wsparcie WPBeginner
Cześć Dev,
Thanks you for the kind words. We are glad you find WPBeginner helpful
Admin
steve
Właśnie umieściłem tę stronę w teście szybkości strony Google i uzyskałem tylko 66 dla urządzeń mobilnych i 77 dla komputerów!?
Digember
Wtyczki zwiększają obciążenie naszej strony internetowej, co sprawia, że nasza strona działa wolno. Na wpbeginner nie widziałem ani jednej metody optymalizacji prędkości bez użycia wtyczek. Naucz nas czegoś pożytecznego, te metody nie działają dla każdego.
Patricia Lynn
Świetne, szczegółowe informacje na temat używania wtyczki Autoptimize do obsługi Java-script, CSS i wtyczki w3 Total Cache w celu naprawienia blokowania renderowania przy jednoczesnym zwiększeniu wydajności strony internetowej.
Sumit yadav
Dziękuję bardzo za te informacje. Wcześniej czas ładowania mojej strony wynosił 63, a po zainstalowaniu wtyczki Autoptimize wzrósł do 81.
Yoseph
Nie jestem pewien, co się stało, zainstalowałem autoptimize na jednej z moich stron, a następnie rozmiar strony wzrósł z 2,8 MB do 4 MB.
Shaye
MASAKRA! Sprawiło to, że wydajność mojej strony drastycznie spadła! Pomocy!
Erez Elias
Dzięki za udostępnienie.
Ogólnie prędkość strony wzrosła bardzo nieznacznie. Ale problem z blokowaniem renderowania nie został rozwiązany.
Skomentuj, jeśli masz inne sugestie.
dzięki.
almbrouk idris
Próbuję osiągnąć 100%, ale jest to niemożliwe
John Bolhano
Próbuję osiągnąć 70+, ale wciąż jestem daleko.
Mayank
Haha, świetnie, Google ssie, ale po wszystkim mam ponad 80+
David
Udało mi się przyspieszyć 3 nowe strony internetowe do nieomal 500 ms, co jest szybsze niż 96% stron w Pingdom. Podobnie w przypadku innych testerów prędkości.
Pomyślałem, że jest świetnie, dopóki Google nie sprowadziło mnie na ziemię swoimi wglądami w stronę. Głównie niski wynik dla urządzeń mobilnych, ale myślałem, że te nowoczesne motywy mają być responsywne? Oczywiście, że nie!
Zmniejszyłem też każdy obrazek do absolutnego minimum przed przesłaniem, więc to frustrujące.
Również żadna z aplikacji nie działa dla mnie z pamięcią podręczną przeglądarki itp.
Powiedziałbym, że te same trzy problemy, które mam – po wykonaniu podstaw – to:
1. Blokowanie renderowania JavaScript.
2. Pamięć podręczna przeglądarki.
3. Obrazy o złym rozmiarze dla urządzeń mobilnych.
Muthukrishnan
Użyłem wszystkich wtyczek... Ale prędkość strony nadal jest zła.
Michael
Jestem trochę zdezorientowany. Właśnie przeprowadziłem test prędkości Google na wpbeginner i nie wypadł on wcale dobrze. Czegoś mi brakuje?
Yasser
Moja strona jest w układzie RTL, po zapisaniu ustawień wtyczki „Autoptimize” moja strona zmieniła się na LTR!
Manohar Rao
Zarówno wtyczki Autoptimize, jak i W3 Total cache uszkodziły moją stronę. Te wtyczki działają tylko z niektórymi motywami. Trzeba być bardzo ostrożnym przy korzystaniu z tych dwóch wtyczek.
Toby Forage
Kiedy zainstalowałem Autoptimize, zgodnie z sugestią w tym artykule, całkowicie zepsuło to moją stronę internetową. Może źle je skonfigurowałem, ale po całkowitym usunięciu osiągnąłem wynik Google PageSpeed 92 dla komputerów stacjonarnych. Mobilna wynosi 67, więc pracuję nad jej poprawą, ale na pewno nie będę ponownie używać Autoptimize!
Nik
Thanks. It works for my blog.
Fued
Witaj WP beginner,
Bardzo pomocny artykuł!
Dziękuję!
Tylko losowe pytanie?
Czy mogę przywrócić tryb minifikacji z ręcznego na automatyczny i usunąć zminifikowane pliki bez szkody? I co polecasz: ręczny czy automatyczny?
Pozdrawiam
Mayank
Po prostu zrób to automatycznie
Nirmal Kumar
Obie te metody nie zadziałały. Czy jest jakiś inny, lepszy sposób, aby to zrobić?
ibraheem Warriach
Witam, podobał mi się artykuł, ale nie mam opcji dodawania skryptów wtyczki W3 Total Cache, proszę daj mi znać, jak ją uzyskać?
MASI
Bardzo dziękuję za Twój świetny artykuł, naprawdę mi pomógł.
Mam tylko mały problem, jestem teraz zdezorientowany!
Dodałem wszystkie pliki .js i .css ręcznie w W3TC, ale nadal jeden plik .css ma problem na sprawdzarce stron Google:
Rozważ naprawę:
Żadna z treści widocznych na stronie głównej nie mogła zostać wyrenderowana bez oczekiwania na załadowanie następujących zasobów. Spróbuj odroczyć lub ładować asynchronicznie blokujące zasoby, lub wstaw krytyczne fragmenty tych zasobów bezpośrednio w HTML.
Optymalizuj dostarczanie CSS dla:
26952.default.include.c9d602.css jest obecnie dostępny na liście .css, ale widzę ten błąd. Jak mogę rozwiązać ten problem?
Christian
Nie widzę opcji „Dodaj arkusz stylów”, czy masz jakieś pomysły, dlaczego?