Blokujący kod JavaScript i CSS w WordPressie

[krasnel]

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?

[Mion]

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 ...

[Harry]

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

 

[Mion]

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....

[krasnel]

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

[Mion]

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.

[Harry]

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 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.

• Co to jest CDN? - https://pl.wikipedia.org/wiki/Content_delivery_network

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

Jak coś, to pytaj śmiało.

 

Pozdrawiam serdecznie

[krasnel]

23 godziny temu, Harry napisał:

Proszę! Nie pogardzę punktem reputacji 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.

• Co to jest CDN? - https://pl.wikipedia.org/wiki/Content_delivery_network

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!