Zobaczmy krok po kroku, jak poprawi\u0107 wydajno\u015b\u0107 i szybko\u015b\u0107 witryny. Poni\u017cej znajduje si\u0119 zrzut ekranu z wynikiem mojej witryny w Google Page Insight.<\/p>\n
Czy zauwa\u017cy\u0142e\u015b kiedy\u015b komunikat Renderuj blokuj\u0105cy kod JavaScript i CSS w tre\u015bci strony widocznej na ekranie? Je\u015bli nie w\u0142\u0105czy\u0142e\u015b CSS i JS w standardowy spos\u00f3b<\/a>, mo\u017ce to spowolni\u0107 dzia\u0142anie witryny. Z regu\u0142y CSS powinien zawiera\u0107 si\u0119 w nag\u0142\u00f3wku, a JS w stopce. Powiniene\u015b zadba\u0107 o to, aby Twoja witryna by\u0142a zgodna z t\u0105 standardow\u0105 praktyk\u0105.<\/p>\n Obrazy odgrywaj\u0105 wa\u017cn\u0105 rol\u0119 w poprawie do\u015bwiadczenia u\u017cytkownika. Przyci\u0105gaj\u0105ce wzrok obrazy utrzymuj\u0105 zainteresowanie u\u017cytkownik\u00f3w tre\u015bci\u0105. Ale u\u017cycie ci\u0119\u017ckich obraz\u00f3w prawie zabija szybko\u015b\u0107 Twojej witryny. Na przyk\u0142ad, za\u0142adowa\u0142e\u015b obraz o rozmiarze 2 MB na stronie, a nast\u0119pnie podczas \u0142adowania strony te 2 MB zajmuje dodatkowy czas, aby za\u0142adowa\u0107 obraz przed przedstawieniem strony odbiorcom.<\/p>\n Oto koncepcja optymalizacji obraz\u00f3w<\/strong> przed u\u017cyciem. Dost\u0119pnych jest kilka wtyczek, kt\u00f3re wykonuj\u0105 to zadanie kompresowania obraz\u00f3w z biblioteki multimedi\u00f3w. Niekt\u00f3re popularne wtyczki s\u0105<\/p>\n Wszystkie te wtyczki dzia\u0142aj\u0105 dobrze. Polecam skorzysta\u0107 z wtyczki TinyPNG. U\u017cywam tej wtyczki na mojej stronie i jestem z niej ca\u0142kiem zadowolony.<\/p>\n W niekt\u00f3rych przypadkach musimy wy\u015bwietla\u0107 obrazy poza bibliotek\u0105 multimedi\u00f3w. Tworzymy niestandardowy katalog i wgrywamy do niego obrazy, a nast\u0119pnie wykorzystujemy te obrazy na stronie internetowej. Napisa\u0142em artyku\u0142y na temat Optimize Image On Upload<\/a> i TinyPNG Compress Images<\/a>. Zapoznaj si\u0119 z tym artyku\u0142em, je\u015bli nie korzystasz z biblioteki multimedi\u00f3w dla obraz\u00f3w.<\/p>\n Wskaz\u00f3wka: przytnij obrazy o rozmiarze, kt\u00f3ry chcesz wy\u015bwietli\u0107. Za\u0142\u00f3\u017cmy, \u017ce masz pojemnik o rozmiarze 300*250. W takim przypadku nale\u017cy przyci\u0105\u0107 obraz zgodnie z rozmiarem kontenera. Nie u\u017cywaj obrazu o wi\u0119kszym rozmiarze w ma\u0142ym pojemniku. Ma to r\u00f3wnie\u017c wp\u0142yw na wydajno\u015b\u0107 witryny.<\/p>\n Lazy Load Images<\/strong> pomaga przyspieszy\u0107 dzia\u0142anie Twojej witryny. Korzystaj\u0105c z wtyczki Lazy Load<\/a>, Twoje obrazy nie \u0142aduj\u0105 si\u0119, dop\u00f3ki u\u017cytkownik do nich nie przewinie. Pomaga zmniejszy\u0107 rozmiar strony w momencie \u0142adowania.<\/p>\n Je\u015bli chcesz zaimplementowa\u0107 leniwe \u0142adowanie obraz\u00f3w bez u\u017cycia wtyczki, przeczytaj nasz artyku\u0142 na temat poprawy wydajno\u015bci witryny przez leniwe \u0142adowanie obraz\u00f3w<\/a>.<\/p>\n O ile rozmiar Twojej bazy danych jest ma\u0142y, Tw\u00f3j serwer szybko reaguje na \u017c\u0105dania bazy danych pochodz\u0105ce ze strony internetowej. Gdy baza danych zacznie si\u0119 powi\u0119ksza\u0107, serwer potrzebuje wi\u0119cej czasu na odpowied\u017a.<\/p>\n W WordPressie w miar\u0119 up\u0142ywu czasu kilka osieroconych danych przechowywanych w Twojej bazie danych. Na przyk\u0142ad, gdy aktualizujesz post lub stron\u0119, za ka\u017cdym razem WordPress przechowuje wersj\u0119 w bazie danych. Wola\u0142bym zachowa\u0107 tylko 3 ostatnie poprawki, kt\u00f3re s\u0105 w zupe\u0142no\u015bci wystarczaj\u0105ce. Aby zachowa\u0107 poprawki do 3 razy, musisz umie\u015bci\u0107 poni\u017cszy kod w pliku wp-config.php.<\/p>\n Powy\u017cszy kod ogranicza liczb\u0119 poprawek. Istnieje kilka innych tabel, kt\u00f3re r\u00f3wnie\u017c powinny zosta\u0107 zoptymalizowane. Polecam u\u017cywa\u0107 wtyczek WP-DBManager<\/a> lub WP-Sweep<\/a> do optymalizacji bazy danych.<\/p>\n Podzi\u0119kowania dla in\u017cynier\u00f3w, kt\u00f3rzy wprowadzili koncepcj\u0119 pami\u0119ci podr\u0119cznej przegl\u0105darki. Gdy u\u017cytkownik odwiedza Twoj\u0105 witryn\u0119, przegl\u0105darka u\u017cytkownika przechowuje Twoj\u0105 stron\u0119 w tymczasowej lokalizacji przechowywania przegl\u0105darki. Gdy u\u017cytkownik odwiedza witryn\u0119 nast\u0119pnym razem, przegl\u0105darka wy\u015bwietla u\u017cytkownikom stron\u0119 z ostatnio przechowywanej pami\u0119ci podr\u0119cznej, zamiast ponownie wczytywa\u0107 ca\u0142\u0105 stron\u0119. Zmniejsza to wykorzystanie przepustowo\u015bci zar\u00f3wno po stronie u\u017cytkownika, jak i serwera. Korzystanie z pami\u0119ci podr\u0119cznej dla Twojej witryny znacznie przyspieszy\u0142o witryn\u0119 WordPress. Niekt\u00f3re z popularnych wtyczek pami\u0119ci podr\u0119cznej s\u0105 nast\u0119puj\u0105ce.<\/p>\n Gdy korzystasz z pami\u0119ci podr\u0119cznej przegl\u0105darki, pliki Twojej strony internetowej b\u0119d\u0105 przechowywane w pami\u0119ci podr\u0119cznej przegl\u0105darki. Twoje strony \u0142aduj\u0105 si\u0119 znacznie szybciej dla sta\u0142ych u\u017cytkownik\u00f3w. Dodaj nast\u0119puj\u0105cy kod do pliku htaccess swojej witryny, a umo\u017cliwi to buforowanie przegl\u0105darki.<\/p>\n Uwaga: w WordPressie niekt\u00f3re wtyczki korzystaj\u0105 z zasob\u00f3w zewn\u0119trznych. Nie mo\u017cemy ustawi\u0107 nag\u0142\u00f3wk\u00f3w wyga\u015bni\u0119cia w tych zasobach zewn\u0119trznych. Jednym ze sposob\u00f3w jest przechowywanie tych plik\u00f3w zewn\u0119trznych na serwerze, a nast\u0119pnie umieszczanie ich w witrynie.<\/p>\n Mam nadziej\u0119, \u017ce rozumiesz, jak przyspieszy\u0107 witryn\u0119 WordPress. Je\u015bli co\u015b przegapi\u0142em lub u\u017cywasz innych technik, podziel si\u0119 nimi w komentarzach poni\u017cej.<\/p>\n![\"6](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20834-60822fd29f5de.png\")
<\/a><\/p>\nKrok 1- Do\u0142\u0105cz CSS i JS w standardowy spos\u00f3b<\/h3>\n
Krok 2- Optymalizacja obraz\u00f3w przed u\u017cyciem<\/h3>\n
\n
Krok 3 \u2013 leniwe \u0142adowanie obraz\u00f3w<\/h3>\n
Krok 4- Optymalizacja bazy danych<\/h3>\n
define('WP_POST_REVISIONS', 3);<\/code><\/pre>\nKrok 5- Wykorzystanie pami\u0119ci podr\u0119cznej<\/h3>\n
\n
Krok 6 \u2013 Wykorzystaj buforowanie przegl\u0105darki<\/h3>\n
<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access plus 1 year\"\nExpiresByType image\/jpeg \"access plus 1 year\"\nExpiresByType image\/gif \"access plus 1 year\"\nExpiresByType image\/png \"access plus 1 year\"\nExpiresByType text\/css \"access plus 1 month\"\nExpiresByType application\/pdf \"access plus 1 month\"\nExpiresByType text\/x-javascript \"access plus 1 month\"\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\nExpiresByType image\/x-icon \"access plus 1 year\"\nExpiresDefault \"access plus 2 days\"\n<\/IfModule><\/code><\/pre>\n