W\u00a0po\u0142owie kwietnia 2015 roku Google\u00a0wprowadza now\u0105 polityk\u0119 oceniania stron, w my\u015bl kt\u00f3rej strona musi dostosowywa\u0107 si\u0119 do urz\u0105dzenia u\u017cytkownika. Nie do\u015b\u0107, \u017ce strona ma dobrze wygl\u0105da\u0107 na komputerze, tablecie czy telefonie\u00a0(responsywno\u015b\u0107),\u00a0to\u00a0powinna te\u017c dzia\u0142a\u0107 szybko.<\/p><\/blockquote>\n
Korzystaj\u0105c, np. z bootstrap-a mo\u017cemy \u0142atwo umo\u017cliwi\u0107 dostosowanie strony do wszystkich urz\u0105dze\u0144, ale optymalizacja strony nadal wymaga nieco wi\u0119kszego nak\u0142adu pracy i zaanga\u017cowania.<\/p>\n
Poni\u017cej kilka wskaz\u00f3wek, kt\u00f3re pomog\u0105\u00a0w \u0142atwy spos\u00f3b przyspieszy\u0107 stron\u0119 nawet kilkukrotnie:<\/p>\n
1) U\u017cycie frameworka HTML\/CSS.<\/strong><\/p>\n Nie chodzi tylko o wgranie przyk\u0142adowo – bootstrap-a, ale te\u017c o jego pe\u0142ne wykorzystanie, np.\u00a0\u00a0wszystkie ikonki na stronie w postaci plik\u00f3w graficznych\u00a0zast\u0105pi\u0107\u00a0pakietem “Glyphicons”.<\/p>\n <\/p>\n 2) Nie wczytujmy tego, co u\u017cytkownik nie zobaczy.<\/strong><\/p>\n Strona w stylu portalu, cz\u0119sto ma du\u017co miniaturek, kt\u00f3re domy\u015blnie wczytuj\u0105 si\u0119 z chwil\u0105 \u0142adowania strony. Prowadzi to do sytuacji, w kt\u00f3rej u\u017cytkownik chc\u0105c tylko sprawdzi\u0107 najnowszy news na stronie, dostaje porcje 60 plik\u00f3w graficznych, kt\u00f3re wy\u015bwietlane s\u0105 na samym dole strony w panelu z “losowymi artyku\u0142ami”.<\/p>\n Rozwi\u0105zaniem problemu jest technika “lazy load” – wczytywanie obrazk\u00f3w tylko wtedy, gdy u\u017cytkownik ma szanse je zobaczy\u0107, czyli z chwil\u0105 pojawienia si\u0119 na ekranie. Po zapytaniu wuja Google o “lazy image load jquery” dostaniemy w odpowiedzi mas\u0119 wtyczek do op\u00f3\u017anionego \u0142adowania grafiki.<\/p>\n <\/p>\n 3) CSS u g\u00f3ry, JavaScript na dole.<\/strong><\/p>\n Cz\u0119sto w sekcji BODY umieszcza si\u0119 zar\u00f3wno pliki CSS, jak i JS. \u0141adowanie CSS przed sekcj\u0105 body jest bardzo dobr\u0105 praktyk\u0105, ale pliki JS tylko spowalniaj\u0105 uruchamianie strony, co powoduje, \u017ce u\u017cytkownik przez jaki\u015b czas musi zadowoli\u0107 si\u0119 “bia\u0142ym ekranem”.<\/p>\n Tak wi\u0119c pliki JS warto umie\u015bci\u0107 na samym dole strony, tu\u017c przed zamkni\u0119ciem tagu BODY. W przypadku WordPress, mo\u017cemy wykorzysta\u0107 fragment kodu, kt\u00f3ry trzeba umie\u015bci\u0107 w pliku szablonu [php] Powy\u017cszy kod usunie skrypty JS z sekcji HEAD i przeniesie je do sekcji FOOTER. Jednak obejmuje on jedynie te pliki JS, kt\u00f3re zosta\u0142y dodane do szablonu funkcjami 4) Asynchroniczno\u015b\u0107 JS<\/strong><\/p>\n Synchroniczne (zsynchronizowane), czyli “jedno po drugim” uruchamianie plik\u00f3w JS jest domy\u015blne stosowane na stronach. Maj\u0105c przyk\u0142adowy kod:<\/p>\n [html]<script src="\/jquery.min.js"><\/script> Pliki zostan\u0105 za\u0142adowane po kolei, co jest poprawne, bo bootstrap.min.js<\/strong> potrzebuje jquery.min.js<\/strong> do funkcjonowania, a docs.min.js<\/strong> potrzebuje bootstrap.min.js<\/strong>.<\/p>\n Jednak je\u015bli mamy taki uk\u0142ad:<\/p>\n [html]<script src="\/jquery.min.js"><\/script> mo\u017cemy zastosowa\u0107 znacznik async=”async”<\/strong> co spowoduje asynchroniczno\u015b\u0107 w \u0142adowaniu skrypt\u00f3w. Po uruchomieniu si\u0119 jquery.min.js<\/strong> i bootstrap.min.js<\/strong>, obie wtyczki: wtyczka1.js<\/strong> i wtyczka2.js<\/strong> wczytaj\u0105 si\u0119 w tym samym momencie, co znacznie przyspieszy \u0142adowanie si\u0119 strony.<\/p>\n Zalecany jest 1 plik JS \u0142adowany synchronicznie, wszystkie pozosta\u0142e powinny si\u0119 uruchamia\u0107 asynchronicznie (r\u00f3wnocze\u015bnie). Jak si\u0119 \u0142atwo domy\u015ble\u0107, ten 1 plik musi mie\u0107 w sobie zawarte wszystkie zale\u017cno\u015bci, wi\u0119c jQuery, Bootstrap, itd, o czym w kolejnym punkcie.<\/p>\n <\/p>\n 5) Minimalizacja plik\u00f3w CSS, JS:<\/strong><\/p>\n Na pocz\u0105tek JS. Zaleca si\u0119 “upchni\u0119cie” wszystkich plik\u00f3w JavaScript do 1 pliku, uruchamiaj\u0105c go domy\u015blnie – synchronicznie na stronie. Na stronie powinny zosta\u0107 tylko te skrypty JS, kt\u00f3rych nie mo\u017cna spakowa\u0107 do 1 pliku, np. reklamy, statystyki, zewn\u0119trzne wtyczki (social plugin) i wszystkie one powinny si\u0119 \u0142adowa\u0107 z dopiskiem “async”.<\/p>\n Analogicznie CSS, z tym, \u017ce w tym przypadku w gr\u0119 wchodzi jedynie spakowanie wszystkich mniejszych plik\u00f3w do 1 wi\u0119kszego.<\/p>\n Z pomoc\u0105 przy tej \u017cmudnej i niewdzi\u0119cznej pracy przychodz\u0105 wtyczki do CMS, np. dla WordPress, s\u0105 to np. W3 Total Cache, gdzie t\u0105 funkcjonalno\u015b\u0107 nazwano “Minify”. <\/p>\n 6) Minimalizacja plik\u00f3w graficznych:<\/strong><\/p>\n D\u0105\u017c\u0105c co minimalizacji ilo\u015bci przesy\u0142anych danych, nie mo\u017cna zapomnie\u0107 o plikach graficznych, obrazkach, miniaturkach, ikonkach. Wszystkie pliki graficzne powinny by\u0107:<\/p>\n – dostosowane rozmiarowo do obszaru, kt\u00f3re zajmuj\u0105: je\u015bli na stronie wy\u015bwietlana jest miniaturka, kt\u00f3ra ma rozmiary: 120 x 120px, to faktyczne wymiary pliku graficznego nie powinny przekracza\u0107 tych wymiar\u00f3w. B\u0142\u0119dem jest wysy\u0142anie do usera pliku 1200x800px i skalowanie do w CSS do wymiar\u00f3w miniaturki 120x120px.<\/p>\n – optymalizacja \u017ar\u00f3d\u0142a pliku. Cz\u0119sto pliki graficzne zawieraj\u0105 tzw “meta tagi”, kt\u00f3re potrafi\u0105 z ma\u0142ej ikonki uczyni\u0107 nawet kilkadziesi\u0105t razy ci\u0119\u017cszy plik. Na szczeg\u00f3ln\u0105 uwag\u0119 zas\u0142uguj\u0105 pliki wygenerowane np. przez Photoshop, kt\u00f3re w 1szej kolejno\u015bci nadaj\u0105 si\u0119 na optymalizacje \u017ar\u00f3d\u0142a. Owa optymalizacja mo\u017ce by\u0107 przeprowadzona albo na serwerze, co b\u0119dzie obejmowa\u0142o wszystkie pliki, lub po stronie usera, przed wgraniem na stron\u0119. Zobacz: Google: “optymalizacja png, jpg”<\/p>\n – ma\u0142e obrazki, ikonki (dla plik\u00f3w do 10kb jest to zabieg op\u0142acalny) wrzucamy bezpo\u015brednio w kod HTML, jako “base64 URI”, zobacz google: “base64 image online”.<\/p>\n <\/p>\n 7) Obiekty wychodz\u0105ce:<\/strong><\/p>\n Podczas optymalizacji d\u0105\u017cymy do tego, aby strona generowa\u0142a maksymalnie 20 obiekt\u00f3w wychodz\u0105cych. Jako obiekt wychodz\u0105cy uznajemy ka\u017cdy “wiersz” (medium) w testach na szybko\u015b\u0107 dzia\u0142ania strony, wi\u0119c ka\u017cdy plik png,jpg,gif,css,js,html, itd.<\/p>\n Jak \u0142atwo zauwa\u017cy\u0107 sam dokument html ze stylem css i kilkoma JS i obrazkami to ju\u017c ok 10 obiekt\u00f3w. Je\u015bli strona bez reklam, zewn\u0119trznych statystyk czy wtyczek social generuje wi\u0119cej jak 20 obiekt\u00f3w, to znaczy, \u017ce co\u015b z optymalizacj\u0105 nie jest ok \ud83d\ude09<\/p>\n Jak zmniejszy\u0107 ilo\u015b\u0107 plik\u00f3w? <\/strong> <\/p>\n 8) Testy, testy, testy..<\/strong><\/p>\n – przegl\u0105darka Chrome, Firefox, ma bardzo fajne narz\u0119dzia do testowania szybko\u015bci \u0142adowania strony, uruchamiamy je “Ctril+Schift+J” i klikamy “Network”, <\/p>\n 9) Optymalizacja serwera \/ CMS<\/strong><\/p>\n W powy\u017cszym artykule omawiany zosta\u0142 tylko aspekt u\u017cytkownika, czyli moment po wygenerowaniu strony przez serwer. Osobnym tematem jest optymalizacja strony po stronie serwera i o tym w kolejnym razem \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":" Odk\u0105d Google wymusi\u0142o od w\u0142a\u015bcicieli stron nie tylko optymalizacj\u0119 samych tre\u015bci na stronie, ale te\u017c ca\u0142ej strony pod wzgl\u0119dem technicznym, optymalizacja sta\u0142a si\u0119 bardzo wa\u017cnym etapem publikowania strony www. W\u00a0po\u0142owie kwietnia 2015 roku Google\u00a0wprowadza now\u0105 polityk\u0119 oceniania stron, w my\u015bl … <\/i> Czytaj ca\u0142o\u015b\u0107<\/a><\/p>\n","protected":false},"author":1,"featured_media":436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[663,5,3],"tags":[659,658,58,662,661,660],"class_list":["post-435","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-optymalizacja-strony-www","category-poradniki","category-porady-dla-webmasterow","tag-jak-przyspieszyc-strone","tag-optymalizacja-bloga","tag-optymalizacja-strony","tag-optymalizacja-strony-pod-google-szybkosc-dzialania","tag-przyspieszenie-strony-www","tag-strona-dziala-wolno-co-robic"],"_links":{"self":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":6,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":480,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions\/480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media\/436"}],"wp:attachment":[{"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webowiec.net\/blog\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}function.php<\/code>:<\/p>\n
\n\/**
\n * Automatically move JavaScript code to page footer, speeding up page loading time.
\n *\/
\nfunction footer_enqueue_scripts() {
\n remove_action(‘wp_head’, ‘wp_print_scripts’);
\n remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
\n\/\/ remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
\n add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
\n\/\/ add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
\n add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
\n}
\nadd_action(‘after_setup_theme’, ‘footer_enqueue_scripts’);
\n[\/php]<\/p>\nwp_enqueue_script<\/code> (wp_register_script<\/code>). Zakomentowane fragmenty kodu to polecenia przeniesienia do FOOTER r\u00f3wnie\u017c styli CSS.<\/p>\n
\n <script src="\/bootstrap.min.js"><\/script>
\n <script src="\/docs.min.js"><\/script>[\/html]<\/p>\n
\n <script src="\/bootstrap.min.js"><\/script>
\n<script src="\/wtyczka1.js" async="async"><\/script>
\n<script src="\/wtyczka2.js" async="async"><\/script>[\/html]<\/p>\n
\n![\"Zaznaczenie_002\"](\"https:\/\/webowiec.net\/blog\/wp-content\/uploads\/2015\/04\/Zaznaczenie_002-1024x524.png\")
<\/p>\n
\nNajpro\u015bciej ograniczy\u0107 do minimum wtyczki social, uruchamiaj\u0105c je tylko wtedy, gdy user na pewno chce z nich korzysta\u0107, np. po najechaniu myszk\u0105 na przycisk “facebook” lub po klikni\u0119ciu w wysuwany panel. Kolejnym pomys\u0142em jest u\u017cycie base64 do najmniejszych miniaturek na stronie. Warto r\u00f3wnie\u017c przegl\u0105dn\u0105\u0107 dok\u0142adnie zewn\u0119trzne wtyczki i usun\u0105\u0107 te, kt\u00f3re same w sobie generuj\u0105 wiele “obiekt\u00f3w” i zast\u0105pi\u0107 je bardziej zoptymalizowanymi.<\/p>\n
\n– narz\u0119dzia online – http:\/\/tools.pingdom.com\/fpt\/<\/p>\n