Jump to content

Blokujący kod JavaScript i CSS w WordPressie


Recommended Posts

Witam,

 

Podczas testu na page insight portalu "www.deki.pl", otrzymuje informacji dotyczących jak przyspieszyć działanie strony i próbuję poprawić ten tragiczny wynik.

 

Jednym z głównych problemów jest "Wyeliminuj blokujący renderowanie kod JavaScript i CSS”.

 

Strona postawiona jest na Wordpressie.

Użyłem do tego wtyczki W3 Total Cache, dodałem kody CSS i JS do odpowiednich kategorii, a wcześniej zmieniłem ustawienia.  Po zapisaniu, w momencie próby otworzenia strony otrzymuję komunikat o błędzie 504. Pewnie znacie ten błąd, ale podpowiem, że strona długo się ładuje i po chwili wyskakuje tylko ten błąd. 

 

Czy mógłbym prosić o informację jak zapobiec takiemu problemowi i oczywiście jak wyeliminować właśnie blokujące kody JS i CSS?

Link to post
Share on other sites
12 godzin temu, krasnel napisał:

Czy mógłbym prosić o informację jak zapobiec takiemu problemowi i oczywiście jak wyeliminować właśnie blokujące kody JS i CSS?

Wtyczka Total Cach nic tu nie zmieni. To jest kwestia budowy strony. ZLEJ budowy i 211 żądań http dla strony Index !!!

211 żądań
Przesłano: 7,71 MB / 3,11 MB
9,50 s
DOMContentLoaded: 4,78 s
load: 6,61 s

MASAKRA

Dla Samych CSS strona robi  51 żądań  http

51 żądań
Przesłano: 2,20 MB / 287,97 KB
7,98 s
DOMContentLoaded: 3,89 s
load: 7,01 s

 

Natomiast dla JavaScript 87 zadań http

87 żądań
Przesłano: 3,56 MB / 1,03 MB
54,50 s
DOMContentLoaded: 3,89 s
load: 7,01 s

 

MASAKRA do kwadratu ... To tak jest jak się używa WP i miliony wtyczek ...

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to post
Share on other sites

Cześć @krasnel,

Winowajcą całej strony może okazać się w sumie jedna wtyczka - Elementor. Fajnie robi się strony w pagebuilderach ale praktyczne one nie są i twórcy tego syfu nigdy o tym nie wspomną. Tony zbędnego js! Podzielam zdanie użytkownika @Mion. Zalecam przebudowanie strony i omijać szerokim łukiem wszystkie pagebuildery.

Najpopularniejsze to:

  • Elementor
  • WP Bakery
  • Divi (motyw)

To nie wszystkie, bo jest ich znacznie więcej.

Pozdrawiam

 

Link to post
Share on other sites

Samo oczekiwanie na kodu HTML stron trwa masakrycznie długo według Firefox po ~ 4 sekundy NP:

 

Pomiary czasu żądań dla https://deki.pl/o-nas/:
Zablokowane:67 ms
Rozwiązywanie DNS:17 ms
Łączenie:29 ms
Konfigurowanie TLS:35 ms
Wysyłanie:0 ms
Oczekiwanie:3,93 s
Odbieranie: 0ms

Czyli nie wygląda na to by cache działało....

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to post
Share on other sites
W dniu 13.07.2021 o 09:56, Harry napisał:

Cześć @krasnel,

Winowajcą całej strony może okazać się w sumie jedna wtyczka - Elementor. Fajnie robi się strony w pagebuilderach ale praktyczne one nie są i twórcy tego syfu nigdy o tym nie wspomną. Tony zbędnego js! Podzielam zdanie użytkownika @Mion. Zalecam przebudowanie strony i omijać szerokim łukiem wszystkie pagebuildery.

Najpopularniejsze to:

  • Elementor
  • WP Bakery
  • Divi (motyw)

To nie wszystkie, bo jest ich znacznie więcej.

Pozdrawiam

 

Bardzo dziękuję za rozbudowaną odpowiedź. Rzeczywiście, cała strona stoi na elementorze... Widzę, że był to ogromny błąd.

 

Czy mógłbyś podpowiedzieć mi od czego powinienem zacząć, aby przebudować stronę? Domyślam się, że całkowicie wyeliminować wtyczkę elementor, ale czy istnieje jakaś opcja na zachowanie wyglądu, ewentualnie opisów, które gdzieś już mogły się pozycjonować?

Pozdrawiam

Link to post
Share on other sites
8 godzin temu, krasnel napisał:

Czy mógłbyś podpowiedzieć mi od czego powinienem zacząć, aby przebudować stronę?

Od analizy kodu strony i wczytywanych js i css. Zostawić tylko to co jest wykorzystywana oraz scalić w większe pliki.

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to post
Share on other sites
W dniu 14.07.2021 o 22:37, krasnel napisał:

Bardzo dziękuję za rozbudowaną odpowiedź. Rzeczywiście, cała strona stoi na elementorze... Widzę, że był to ogromny błąd.

Proszę! Nie pogardzę punktem reputacji :D Nie tyle jak ogromny błąd, bo tony zbędnego kodu powodują, że strona jest ociężała ale taka jest natura niewiedzy :) Pagebuildery jak już, to stosowałbym tylko do landing page.

 

W dniu 14.07.2021 o 22:37, krasnel napisał:

Czy mógłbyś podpowiedzieć mi od czego powinienem zacząć, aby przebudować stronę? Domyślam się, że całkowicie wyeliminować wtyczkę elementor, ale czy istnieje jakaś opcja na zachowanie wyglądu, ewentualnie opisów, które gdzieś już mogły się pozycjonować?

Pozdrawiam

Można chociaż trochę zmniejszyć wagę i przyspieszyć ładowanie,  np. ustawienie cache, gzip, lazy load na obrazkach. Zmniejszenie kodu js i css, czy zablokowanie ładowania wtyczek na różnych podstronach wpływa pozytywnie na całokształt. Jest to możliwe nawet z elementorem (i innymi) jednak perfekcyjnie nie będzie.

  • Wtyczki do cache (wybierz jedną):
    • WP Fastest Cache
    • WP Super Cache
    • Cache Enabler
    • W3 Total Cache (dobra i bardzo zaawansowana - nie polecam początkującym)
    • WP Rocket (płatna i jednocześnie najlepsza. Jest na wszystkich moich stronach)
  • Wtyczki do optymalizowania obrazów (zmniejszanie rozmiaru, etc)
    • EWWW Image Optimizer
    • Smush
    • Imagify

Jeżeli nie planujesz wrzucać wiele zdjęć, to zamiast wtyczki podrzucam strony do optymalizacji zdjęć (zmniejszanie rozmiaru odbywa się poprzez pogorszenia jakości zdjęcia. Często utrata jest minimalna, a zyski godne polecenia). Minusem jest to, że ręcznie trzeba je optymalizować.

Mój wybór wg kolejności:

  1. https://tinypng.com
  2. https://imagecompressor.com
  3. https://compressor.io

Widzę, że hosting posiadasz w OVH. Dobrym wyjściem może okazać się darmowy CloudFlare CDN: https://www.cloudflare.com/cdn. CloudFlare ma też płatne pakiety.

Na "dzień dobry", to by było tyle. Zalecam zrobienie kopii zapasowej bazy danych przed zmianami ;)

Jak coś, to pytaj śmiało.

 

Pozdrawiam serdecznie

  • Like 2
Link to post
Share on other sites
23 godziny temu, Harry napisał:

Proszę! Nie pogardzę punktem reputacji :D Nie tyle jak ogromny błąd, bo tony zbędnego kodu powodują, że strona jest ociężała ale taka jest natura niewiedzy :) Pagebuildery jak już, to stosowałbym tylko do landing page.

 

Można chociaż trochę zmniejszyć wagę i przyspieszyć ładowanie,  np. ustawienie cache, gzip, lazy load na obrazkach. Zmniejszenie kodu js i css, czy zablokowanie ładowania wtyczek na różnych podstronach wpływa pozytywnie na całokształt. Jest to możliwe nawet z elementorem (i innymi) jednak perfekcyjnie nie będzie.

  • Wtyczki do cache (wybierz jedną):
    • WP Fastest Cache
    • WP Super Cache
    • Cache Enabler
    • W3 Total Cache (dobra i bardzo zaawansowana - nie polecam początkującym)
    • WP Rocket (płatna i jednocześnie najlepsza. Jest na wszystkich moich stronach)
  • Wtyczki do optymalizowania obrazów (zmniejszanie rozmiaru, etc)
    • EWWW Image Optimizer
    • Smush
    • Imagify

Jeżeli nie planujesz wrzucać wiele zdjęć, to zamiast wtyczki podrzucam strony do optymalizacji zdjęć (zmniejszanie rozmiaru odbywa się poprzez pogorszenia jakości zdjęcia. Często utrata jest minimalna, a zyski godne polecenia). Minusem jest to, że ręcznie trzeba je optymalizować.

Mój wybór wg kolejności:

  1. https://tinypng.com
  2. https://imagecompressor.com
  3. https://compressor.io

Widzę, że hosting posiadasz w OVH. Dobrym wyjściem może okazać się darmowy CloudFlare CDN: https://www.cloudflare.com/cdn. CloudFlare ma też płatne pakiety.

Na "dzień dobry", to by było tyle. Zalecam zrobienie kopii zapasowej bazy danych przed zmianami ;)

Jak coś, to pytaj śmiało.

 

Pozdrawiam serdecznie

 

Super, jestem bardzo wdzięczny za tak rozbudowane odpowiedzi.

 

Szczerze mówiąc, korzystałem już z wtyczki CACHE i to nawet wypróbowałem jedną, a później zamieniłem na inną i średnio dało to efekty.

Jeśli chodzi o kompresje zdjęć to również wykonałem zmiany grafik i to własnie na tinypng :)

 

Sam hosting raczej zostawię na OVH bo jestem zadowolony, obsługa itp.

 

Wrzucam link z podpowiedziami na speed insights, niestety nie mogłem załączyć jako obraz, więc link:

https://imgur.com/I0hEtb9

 

Jedna z wytycznych podpowiada, że jest kilka obrazów do zmiany, ale to ze względu na to, że zostały wprowdzone niedawno przez firmę zajmującą się pozycjonowaniem, więc będę musiał to zmienić, ale to juz jest dosyć proste. Największy problem jest z resztą.

 

Pozdrawiam!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy