{"id":226531,"date":"2022-09-05T11:28:00","date_gmt":"2022-09-05T08:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226531"},"modified":"2022-11-08T19:35:46","modified_gmt":"2022-11-08T16:35:46","slug":"jak-wyeliminowac-blokujace-renderowanie-javascript-i-css-w-tresci-powyzej-ekranu","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-wyeliminowac-blokujace-renderowanie-javascript-i-css-w-tresci-powyzej-ekranu\/","title":{"rendered":"Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci powy\u017cej ekranu?"},"content":{"rendered":"\n<p>Podczas tworzenia strony internetowej jest kilka aspekt\u00f3w, kt\u00f3re s\u0105 najwa\u017cniejsze, aby zapewni\u0107 u\u017cytkownikom p\u0142ynne wra\u017cenia. Jednym z tych aspekt\u00f3w jest czas \u0142adowania. Witryna <a href=\"https:\/\/stablewp.com\/21-ways-to-make-your-wordpress-site-load-in-less-than-1-second\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">, kt\u00f3ra szybko si\u0119 \u0142aduje,<\/a> jest zawsze doceniana przez odwiedzaj\u0105cych, kt\u00f3rzy chc\u0105 jak najszybciej znale\u017a\u0107 to, czego szukaj\u0105. Aby uzyska\u0107 szybki czas \u0142adowania, powiniene\u015b dowiedzie\u0107 si\u0119, jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie.<\/p>\n<p>Na szybko\u015b\u0107 dzia\u0142ania strony internetowej mo\u017ce wp\u0142ywa\u0107 wiele czynnik\u00f3w, ale najwi\u0119kszy wp\u0142yw maj\u0105 czynniki om\u00f3wione w tym artykule. Idealne r\u00f3wnanie strony internetowej mo\u017ce by\u0107 trudne do rozwi\u0105zania, poniewa\u017c niekt\u00f3re elementy nie zale\u017c\u0105 od twoich dzia\u0142a\u0144. S\u0105 one podyktowane ka\u017cd\u0105 sytuacj\u0105 w szczeg\u00f3lno\u015bci (np. po\u0142o\u017cenie geograficzne, pr\u0119dko\u015b\u0107 Internetu). Mo\u017cesz jednak zoptymalizowa\u0107 dostarczanie CSS, modyfikuj\u0105c elementy, nad kt\u00f3rymi masz pe\u0142n\u0105 kontrol\u0119. Dowiedz si\u0119 wi\u0119cej na ten temat poni\u017cej w tym artykule stworzonym przez nasz zesp\u00f3\u0142 w <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTables<\/a>.<\/p>\n<h2>Definiowanie tre\u015bci blokuj\u0105cych renderowanie i tre\u015bci w cz\u0119\u015bci strony widocznej na ekranie<\/h2>\n<h3>Blokowanie renderowania<\/h3>\n<p>Blokowanie renderowania odnosi si\u0119 do element\u00f3w, kt\u00f3re uniemo\u017cliwiaj\u0105 wczytanie kluczowej tre\u015bci witryny (np. g\u0142\u00f3wnego tekstu artyku\u0142u) przed za\u0142adowaniem ca\u0142ej strony. Dobrym przyk\u0142adem takiego elementu jest dowolny dodatkowy JavaScript lub CSS dodany do strony internetowej. Ten kod mo\u017ce uniemo\u017cliwi\u0107 u\u017cytkownikowi zobaczenie czegokolwiek w przegl\u0105darce, dop\u00f3ki kod nie zostanie w pe\u0142ni wykonany, przez co blokuje renderowanie.<\/p>\n<h3>Zawarto\u015b\u0107 strony widocznej na ekranie<\/h3>\n<p>Kiedy odwiedzaj\u0105cy wchodzi na stron\u0119 internetow\u0105, jest witany przez okre\u015blon\u0105 cz\u0119\u015b\u0107 witryny \u2013 tj. cz\u0119\u015b\u0107 najwy\u017csz\u0105. Aby zobaczy\u0107 reszt\u0119, u\u017cytkownik b\u0119dzie musia\u0142 przewin\u0105\u0107 w d\u00f3\u0142 lub wykona\u0107 inne czynno\u015bci na stronie. Tre\u015b\u0107, kt\u00f3r\u0105 odwiedzaj\u0105cy widz\u0105 natychmiast po uzyskaniu do niej dost\u0119pu, nazywana jest tre\u015bci\u0105 w cz\u0119\u015bci strony widocznej na ekranie.<\/p>\n<h3>O blokowaniu renderowania w JavaScript i CSS<\/h3>\n<p>Przegl\u0105darki odczytuj\u0105 kod HTML w celu wy\u015bwietlenia witryny. Jest to proces wieloetapowy. Je\u015bli przegl\u0105darka natknie si\u0119 na elementy, kt\u00f3re odwo\u0142uj\u0105 si\u0119 do skryptu\/arkusza styl\u00f3w, wymagane s\u0105 dodatkowe kroki, aby odczyta\u0107 kod. Przegl\u0105darka b\u0119dzie musia\u0142a za\u017c\u0105da\u0107 pliku, poczeka\u0107 na odpowied\u017a, pobra\u0107 plik z serwera, a nast\u0119pnie wykona\u0107 plik.<\/p>\n<p>Oczywi\u015bcie te dodatkowe kroki mog\u0105 spowolni\u0107 czas \u0142adowania. Pami\u0119taj, \u017ce niekt\u00f3re motywy WordPress zawieraj\u0105 wi\u0119cej ni\u017c jeden plik CSS lub jeden plik JavaScript. Z powodu tych plik\u00f3w czas \u0142adowania mo\u017ce zosta\u0107 znacznie spowolniony. To jest pow\u00f3d, dla kt\u00f3rego musisz wyeliminowa\u0107 ze swojej witryny zasoby blokuj\u0105ce renderowanie. Najcz\u0119\u015bciej nie s\u0105 to pliki krytyczne, wi\u0119c mo\u017cesz odroczy\u0107 parsowanie JavaScript, aby zmniejszy\u0107 blokowanie renderowania strony, poprawiaj\u0105c w ten spos\u00f3b szybko\u015b\u0107 dzia\u0142ania Twojej witryny.<\/p>\n<h3><strong>Identyfikowanie blokuj\u0105cego renderowanie kodu JavaScript i CSS<\/strong><\/h3>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-197160-61e8b1b6064f7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-197160-61e8b1b6064f7.jpg\" alt=\"Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci powy\u017cej ekranu?\" ><\/a><\/p>\n<p>Aby wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie, musisz okre\u015bli\u0107, czym s\u0105 te elementy. Jednym z naj\u0142atwiejszych sposob\u00f3w ich identyfikacji jest otwarcie witryny za pomoc\u0105 narz\u0119dzia szybko\u015bci strony, kt\u00f3re informuje, jakie problemy napotyka podczas \u0142adowania. <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google PageSpeed \u200b\u200bInsights<\/a> to jedno z takich narz\u0119dzi, kt\u00f3re powinno pom\u00f3c Ci znale\u017a\u0107 pliki, kt\u00f3re blokuj\u0105 renderowanie w Twojej witrynie. Gdy ju\u017c zorientujesz si\u0119, jakie s\u0105 pliki, mo\u017cesz przyst\u0105pi\u0107 do usuni\u0119cia lub zmiany kolejno\u015bci kodu JavaScript blokuj\u0105cego renderowanie.<\/p>\n<h3>Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie?<\/h3>\n<p>W tej sytuacji masz dwie mo\u017cliwo\u015bci: dowiedz si\u0119, jak samodzielnie wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie lub u\u017cyj wtyczki, aby to zrobi\u0107. Je\u015bli znasz si\u0119 na technologii i chcesz dowiedzie\u0107 si\u0119, jak eliminowane s\u0105 zasoby blokuj\u0105ce renderowanie, zastosuj jedn\u0105 z tych metod:<\/p>\n<h3>Usu\u0144 JavaScript z krytycznej \u015bcie\u017cki renderowania<\/h3>\n<p>Krytyczna \u015bcie\u017cka renderowania powinna zawiera\u0107 tylko te elementy, kt\u00f3re s\u0105 niezb\u0119dne dla witryny. Mo\u017cesz usun\u0105\u0107 niepotrzebne zasoby JavaScript z tej \u015bcie\u017cki. Odbywa si\u0119 to poprzez dodanie pewnych atrybut\u00f3w, w kt\u00f3rych wymagany jest JavaScript. Atrybuty to:<\/p>\n<ul>\n<li><strong>Async:<\/strong> ten atrybut informuje przegl\u0105dark\u0119, \u017ce powinna natychmiast rozpocz\u0105\u0107 pobieranie zasob\u00f3w, aby unikn\u0105\u0107 powolnego \u0142adowania. Gdy zasoby s\u0105 dost\u0119pne, analizowanie kodu HTML jest tymczasowo wstrzymywane, a zasoby s\u0105 \u0142adowane.<\/li>\n<li><strong>Defer:\u00a0<\/strong> ten atrybut informuje przegl\u0105dark\u0119 o odroczeniu pobierania zasob\u00f3w do czasu zako\u0144czenia procesu parsowania HTML. Po zako\u0144czeniu przegl\u0105darka pobierze i wyrenderuje skrypty w kolejno\u015bci ich pojawiania si\u0119 na stronie.<\/li>\n<\/ul>\n<h3><strong>Sprawd\u017a, jak dostarczane s\u0105 zasoby CSS i zoptymalizuj je<\/strong><\/h3>\n<p>Aby wyeliminowa\u0107 zasoby blokuj\u0105ce renderowanie w CSS, musisz:<\/p>\n<ul>\n<li>Zidentyfikuj zasoby wymagane do zawarto\u015bci strony widocznej na ekranie i umie\u015b\u0107 style CSS w HTML.<\/li>\n<li>U\u017cyj innego atrybutu, aby zidentyfikowa\u0107 zasoby CSS, kt\u00f3re s\u0105 absolutnie wymagane (atrybut media).<\/li>\n<li>Za\u0142aduj zasoby CSS asynchronicznie (u\u017cywaj\u0105c atrybut\u00f3w om\u00f3wionych powy\u017cej).<\/li>\n<\/ul>\n<h2><strong>Lista wtyczek, kt\u00f3re mog\u0105 pom\u00f3c w \u0142atwiejszym wyeliminowaniu kodu JavaScript blokuj\u0105cego renderowanie<\/strong><\/h2>\n<h3>Autooptymalizacja<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-197160-61e8b1b70ee28.jpg\" alt=\"Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci powy\u017cej ekranu?\" \/><\/a><\/p>\n<p>Aby wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie z WordPressa, mo\u017cesz u\u017cy\u0107 wtyczek, takich jak Autoptimize. Ta wtyczka poprawia czas \u0142adowania witryny WordPress, \u0142\u0105cz\u0105c fragmenty kodu, zmniejszaj\u0105c bloki kodu poprzez usuwanie niepotrzebnych znak\u00f3w (kompresja) i tak dalej. Wprowadzaj\u0105c te zmiany, kod jest \u0142atwiejszy do odczytania, a rozmiar pliku zostaje zmniejszony, co skraca czas \u0142adowania o kilkaset milisekund, a nawet sekund.<\/p>\n<p>Aby zainstalowa\u0107 t\u0119 wtyczk\u0119, wystarczy uzyska\u0107 dost\u0119p do pulpitu WordPress i przej\u015b\u0107 do zak\u0142adki Wtyczki. Nast\u0119pnie wybierz opcj\u0119 Dodaj nowy, kt\u00f3ra znajduje si\u0119 w g\u00f3rnej cz\u0119\u015bci okna. Nast\u0119pnie mo\u017cesz poszuka\u0107 Autoptimize lub innych wtyczek na pasku wyszukiwania. Kliknij Zainstaluj teraz, aktywuj go dla wybranej witryny i gotowe.<\/p>\n<h3>W3 Ca\u0142kowita pami\u0119\u0107 podr\u0119czna<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-197160-61e8b1b81a44d.jpg\" alt=\"Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci powy\u017cej ekranu?\" \/><\/a><\/p>\n<p>Autoptimize ma wiele innych alternatyw, kt\u00f3rych mo\u017cesz u\u017cy\u0107 do usuni\u0119cia zasob\u00f3w blokuj\u0105cych renderowanie z WordPress. Wtyczka W3 Total Cache jest jedn\u0105 z lepszych. Interesuj\u0105ce w tej wtyczce jest to, \u017ce zawiera wiele dodatkowych funkcji optymalizacji WordPress. Buforowanie oznacza proces, w kt\u00f3rym okre\u015blone pliki s\u0105 przechowywane na komputerze u\u017cytkownika, aby poprawi\u0107 jego wra\u017cenia z korzystania ze strony internetowej. Wizyty w kolejnych sekwencjach b\u0119d\u0105 \u0142atwiejsze, a czasy \u0142adowania ulegn\u0105 poprawie.<\/p>\n<h3>Pakiet przyspieszaj\u0105cy pr\u0119dko\u015b\u0107<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/speed-booster-pack\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-197160-61e8b1b915a90.jpg\" alt=\"Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci powy\u017cej ekranu?\" \/><\/a><\/p>\n<p>Inn\u0105 opcj\u0105 jest Speed \u200b\u200bBooster Pack. Po zainstalowaniu mo\u017cesz uzyska\u0107 dost\u0119p do ustawie\u0144 i wybra\u0107 opcje, kt\u00f3re odpowiadaj\u0105 Twoim potrzebom. Wtyczka oferuje kilka opcji konfiguracyjnych, takich jak przenoszenie skrypt\u00f3w do stopki lub wy\u0142\u0105czanie plik\u00f3w JavaScript z parsowania. Wybieraj\u0105c je, mo\u017cesz usun\u0105\u0107 blokuj\u0105ce renderowanie kody JavaScript i CSS z tre\u015bci w cz\u0119\u015bci strony widocznej na ekranie za pomoc\u0105 zaledwie kilku klikni\u0119\u0107.<\/p>\n<h3>Optymalizacja JCH<\/h3>\n<p><strong><a href=\"https:\/\/wordpress.org\/plugins\/jch-optimize\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-197160-61e8b1ba1963c.jpg\" alt=\"Jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci powy\u017cej ekranu?\" \/><\/a><\/strong><\/p>\n<p>JCH Optimize to wtyczka, kt\u00f3ra \u0142\u0105czy JavaScript i CSS, jednocze\u015bnie zmniejszaj\u0105c rozmiar plik\u00f3w. Ma wiele innych funkcji, kt\u00f3re mog\u0105 by\u0107 przydatne na d\u0142u\u017csz\u0105 met\u0119, ale \u015bwietnie nadaje si\u0119 do eliminowania zasob\u00f3w blokuj\u0105cych renderowanie. Poruszaj si\u0119 po jego ustawieniach i aktywuj funkcje, kt\u00f3re wydaj\u0105 si\u0119 istotne dla Twojej witryny.<\/p>\n<p>Mimo \u017ce wymaga to troch\u0119 uwagi, rozwi\u0105zanie tego problemu b\u0119dzie mia\u0142o ogromny wp\u0142yw na Twoj\u0105 witryn\u0119. Gdy ju\u017c nauczysz si\u0119, jak usun\u0105\u0107 blokuj\u0105cy renderowanie kod JavaScript i CSS z tre\u015bci w cz\u0119\u015bci strony widocznej na ekranie, upewnij si\u0119, \u017ce jak najszybciej wykorzeni\u0142e\u015b wszelkie elementy, kt\u00f3re mog\u0105 spowolni\u0107 dzia\u0142anie Twojej witryny.<\/p>\n<p>Je\u015bli podoba\u0142 Ci si\u0119 ten artyku\u0142 o tym, jak wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie, powiniene\u015b zapozna\u0107 si\u0119 z tym artyku\u0142em o tym, <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jak-bezproblemowo-zmieniac-czcionki-w-wordpressie\/\" title=\"jak zmienia\u0107 czcionki w WordPressie\">jak zmienia\u0107 czcionki w WordPressie<\/a>.<\/p>\n<p>Pisali\u015bmy r\u00f3wnie\u017c o kilku powi\u0105zanych tematach, takich jak jak osadzi\u0107 <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jak-osadzic-iframe-wordpress-z-wtyczka-i-bez-niej\/\" title=\"iframe WordPress\">iframe WordPress<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jak-znalezc-identyfikator-strony-w-wordpressie-w-kilku-krokach\/\" title=\"jak znale\u017a\u0107 identyfikator strony w WordPressie\">jak znale\u017a\u0107 identyfikator strony w WordPressie<\/a>, jak <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jak-pobrac-biblioteke-multimediow-wordpress\/\" title=\"pobra\u0107 bibliotek\u0119 multimedi\u00f3w WordPress\">pobra\u0107 bibliotek\u0119 multimedi\u00f3w WordPress<\/a>, <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jak-powstrzymac-atak-ddos-na-swoja-witryne-wordpress\/\" title=\"jak zatrzyma\u0107 atak DDoS\">jak zatrzyma\u0107 atak DDoS<\/a> i jak <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/jak-ukryc-tytul-strony-w-wordpress-szybki-przewodnik\/\" title=\"ukry\u0107 tytu\u0142 strony w WordPressie\">ukry\u0107 tytu\u0142 strony w WordPressie<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aby wyeliminowa\u0107 blokuj\u0105ce renderowanie JavaScript i CSS w tre\u015bci strony widocznej na ekranie, musisz okre\u015bli\u0107, czym s\u0105 te elementy.<\/p>\n","protected":false},"author":1,"featured_media":197161,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[836,845,866,815],"tags":[1169],"class_list":["post-226531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-przewodnik-dla-poczatkujacych","category-samouczki","category-wordpress-7","category-wtyczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/226531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=226531"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/226531\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/197161"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=226531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=226531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=226531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}