{"id":258416,"date":"2023-08-21T09:47:00","date_gmt":"2023-08-21T06:47:00","guid":{"rendered":"https:\/\/inform.click\/przyjaznosc-dla-urzadzen-mobilnych-i-szybkosc-witryny-dwa-wazne-elementy-ktore-nalezy-wziac-pod-uwage-przy-projektowaniu-witryny-internetowej\/"},"modified":"2023-08-21T10:04:00","modified_gmt":"2023-08-21T07:04:00","slug":"przyjaznosc-dla-urzadzen-mobilnych-i-szybkosc-witryny-dwa-wazne-elementy-ktore-nalezy-wziac-pod-uwage-przy-projektowaniu-witryny-internetowej","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/przyjaznosc-dla-urzadzen-mobilnych-i-szybkosc-witryny-dwa-wazne-elementy-ktore-nalezy-wziac-pod-uwage-przy-projektowaniu-witryny-internetowej\/","title":{"rendered":"Przyjazno\u015b\u0107 dla urz\u0105dze\u0144 mobilnych i szybko\u015b\u0107 witryny \u2014 dwa wa\u017cne elementy, kt\u00f3re nale\u017cy wzi\u0105\u0107 pod uwag\u0119 przy projektowaniu witryny internetowej?"},"content":{"rendered":"<p>\n  W dzisiejszym \u015bwiecie Web 2.0 wszystko kr\u0119ci si\u0119 wok\u00f3\u0142 Internetu. Je\u015bli szukasz hydraulika, przejd\u017a do sieci. Je\u015bli szukasz lokalnej restauracji, przejd\u017a do sieci. Je\u015bli chcesz kupi\u0107 dom, zgadnij co? Idziesz do sieci.\n<\/p>\n<p>\n  Nie ma ju\u017c ludzi korzystaj\u0105cych z \u017c\u00f3\u0142tych stron, aby znale\u017a\u0107 firm\u0119, kt\u00f3ra potrzebuje lub chce. Id\u0105 do sieci, poniewa\u017c zapewnia ona najdok\u0142adniejsze i najszybsze informacje.\n<\/p>\n<p>\n  Aby uzyska\u0107 te informacje pi\u0119\u0107 do siedmiu lat temu, osoba musia\u0142aby podej\u015b\u0107 do komputera stacjonarnego lub laptopa w domu lub firmie, uruchomi\u0107 przegl\u0105dark\u0119 internetow\u0105 i wyszukiwark\u0119 i przeprowadzi\u0107 wyszukiwanie.\n<\/p>\n<p>\n  Obecnie krajobraz ca\u0142kowicie si\u0119 zmieni\u0142, poniewa\u017c ludzie nie si\u0119gaj\u0105 po informacje tylko do laptop\u00f3w i komputer\u00f3w stacjonarnych \u2013 u\u017cywaj\u0105 urz\u0105dze\u0144 mobilnych, w tym smartfon\u00f3w i tablet\u00f3w.\n<\/p>\n<h5>\n  Czy Twoja witryna jest przyjazna dla urz\u0105dze\u0144 mobilnych?<br \/>\n<\/h5>\n<p>\n  Oznacza to, \u017ce witryna, kt\u00f3ra wygl\u0105da \u015bwietnie na komputerze stacjonarnym lub laptopie, prawdopodobnie nie wygl\u0105da zbyt dobrze, gdy jest wy\u015bwietlana na urz\u0105dzeniu przeno\u015bnym. Kopia jest o wiele za ma\u0142a, linki s\u0105 ma\u0142e i trzeba przewija\u0107 w bok, aby zobaczy\u0107 ca\u0142\u0105 zawarto\u015b\u0107. Witryna nie tylko nie jest przyjazna dla u\u017cytkownika, ale tak\u017ce mo\u017ce mie\u0107 teraz wp\u0142yw (bardzo wa\u017cny \u2013 potencjalnie bardzo negatywny wp\u0142yw) na wyszukiwarki \u2013 zw\u0142aszcza Google.\n<\/p>\n<p>\n  Co dok\u0142adnie to t\u0142umaczy? Zasadniczo, je\u015bli Twoja witryna nie jest dostosowana do urz\u0105dzenia mobilnego, mo\u017ce straci\u0107 organiczne pozycje w wyszukiwarkach. Oznacza to, \u017ce gdy kto\u015b odwiedza Google na swoim telefonie lub tablecie i szuka hydraulika, istnieje du\u017ca szansa, \u017ce \u200b\u200bnie trafisz, a je\u015bli to zrobisz, najprawdopodobniej nie pojawi si\u0119 na pierwszej stronie wynik\u00f3w.\n<\/p>\n<p>\n  Ponadto Google umieszcza teraz etykiet\u0119 \u201eprzyjazny dla urz\u0105dze\u0144 mobilnych&#8221; na swoich wynikach wyszukiwania na urz\u0105dzeniach mobilnych. Witryna kwalifikuje si\u0119 do tej etykiety, je\u015bli spe\u0142nia nast\u0119puj\u0105ce kryteria wykryte przez algorytm Google:\n<\/p>\n<ul>\n<li>Unikaj oprogramowania, kt\u00f3re nie jest powszechne na urz\u0105dzeniach mobilnych, takiego jak Adobe Flash.\n  <\/li>\n<li>U\u017cywaj rozmiar\u00f3w tekstu, kt\u00f3re s\u0105 czytelne bez powi\u0119kszania.\n  <\/li>\n<li>Linki s\u0105 umieszczone wystarczaj\u0105co daleko od siebie, aby u\u017cytkownik m\u00f3g\u0142 \u0142atwo wybra\u0107 w\u0142a\u015bciwy.\n  <\/li>\n<li>Tre\u015b\u0107 pasuje do ekranu, wi\u0119c u\u017cytkownicy nie musz\u0105 przewija\u0107 w poziomie, aby j\u0105 zobaczy\u0107.\n  <\/li>\n<\/ul>\n<h5>\n  Test przyjazny dla urz\u0105dze\u0144 mobilnych<br \/>\n<\/h5>\n<p>\n  Webmaster lub w\u0142a\u015bciciel firmy mo\u017ce sprawdzi\u0107, czy ich witryna jest przyjazna dla urz\u0105dze\u0144 mobilnych, odwiedzaj\u0105c stron\u0119 <a href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/\" target=\"_blank\" rel=\"noopener\">Google Test optymalizacji mobilnej<\/a>. Je\u015bli witryna nie przejdzie testu, Google udzieli informacji i wskaz\u00f3wek, jak dostosowa\u0107 witryn\u0119 do urz\u0105dze\u0144 mobilnych.\n<\/p>\n<p>\n  Wiele system\u00f3w zarz\u0105dzania tre\u015bci\u0105 (CMS), takich jak WordPress, Drupal i Joomla, oferuje teraz pomoc w migracji witryny przyjaznej komputerom do adaptacyjnej, przyjaznej dla urz\u0105dze\u0144 mobilnych.\n<\/p>\n<p>\n  Jednak zanim to zrobisz, upewnij si\u0119, \u017ce wykona\u0142e\u015b kopi\u0119 zapasow\u0105 bie\u017c\u0105cej witryny i zaktualizujesz obecny system CMS do najnowszej wersji. W niekt\u00f3rych sytuacjach aktualizacja do najnowszej wersji automatycznie zastosuje potrzebne aktualizacje zabezpiecze\u0144 i sprawi, \u017ce Twoja witryna b\u0119dzie dostosowana do urz\u0105dze\u0144 mobilnych. Je\u015bli proces nie zostanie uruchomiony automatycznie, pami\u0119taj o r\u0119cznym wypchni\u0119ciu aktualizacji, aby zapobiec naruszeniu bezpiecze\u0144stwa.\n<\/p>\n<p>\n  Je\u015bli CMS, kt\u00f3rego u\u017cywasz, oferuje niestandardowe motywy, upewnij si\u0119, \u017ce wybrana wersja jest dostosowana do urz\u0105dze\u0144 mobilnych. Je\u015bli nie, by\u0107 mo\u017ce b\u0119dziesz musia\u0142 zacz\u0105\u0107 od nowa.\n<\/p>\n<h5>\n  Jak szybko \u0142aduje si\u0119 Twoja witryna?<br \/>\n<\/h5>\n<p>\n  Opr\u00f3cz dostosowania witryny do urz\u0105dze\u0144 mobilnych, kolejnym wa\u017cnym elementem, kt\u00f3ry nale\u017cy wzi\u0105\u0107 pod uwag\u0119 podczas projektowania witryny, jest jej szybko\u015b\u0107. Je\u015bli strona \u0142aduje si\u0119 zbyt d\u0142ugo, istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce u\u017cytkownik odrzuci j\u0105 i przejdzie do witryny, kt\u00f3ra \u0142aduje si\u0119 szybciej. W rzeczywisto\u015bci, zgodnie z licznymi ankietami i badaniami, prawie po\u0142owa u\u017cytkownik\u00f3w sieci oczekuje, \u017ce witryna za\u0142aduje si\u0119 w ci\u0105gu dw\u00f3ch sekund lub mniej. Ci sami ludzie opuszcz\u0105 witryn\u0119, kt\u00f3ra nie jest za\u0142adowana w ci\u0105gu trzech sekund. Co wi\u0119cej, 79% kupuj\u0105cych w Internecie, kt\u00f3rzy maj\u0105 problemy z dzia\u0142aniem strony internetowej, twierdzi, \u017ce nie wr\u00f3ci do niej, aby dokona\u0107 ponownego zakupu, a oko\u0142o 44% z nich powiedzia\u0142oby znajomemu, gdyby mia\u0142o z\u0142e do\u015bwiadczenia z zakupami online.\n<\/p>\n<p>\n  Opr\u00f3cz utraty potencjalnych klient\u00f3w z powodu d\u0142ugiego czasu \u0142adowania, powolna witryna mo\u017ce r\u00f3wnie\u017c zaszkodzi\u0107 Twojemu rankingowi w Google. Dzieje si\u0119 tak, poniewa\u017c Google wskaza\u0142, \u017ce szybko\u015b\u0107 witryny jest jednym z sygna\u0142\u00f3w u\u017cywanych przez jego algorytm do rankingu stron. Niska pr\u0119dko\u015b\u0107 strony internetowej oznacza r\u00f3wnie\u017c, \u017ce wyszukiwarka mo\u017ce zaindeksowa\u0107 mniej stron, co mo\u017ce oznacza\u0107, \u017ce Google zaindeksuje mniej stron. Zasadniczo wszystko to oznacza, \u017ce \u200b\u200btracisz biznes, je\u015bli Twoja witryna \u0142aduje si\u0119 wolno.\n<\/p>\n<h5>\n  Test Google Page Speed \u200b\u200bInsights<br \/>\n<\/h5>\n<p>\n  Podobnie jak w przypadku testu dostosowania do urz\u0105dze\u0144 mobilnych, Google oferuje bezp\u0142atne <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">narz\u0119dzie Page Speed \u200b\u200b\u200b\u200bInsights Tool<\/a>. To narz\u0119dzie mierzy wydajno\u015b\u0107 strony internetowej zar\u00f3wno dla komputer\u00f3w stacjonarnych, jak i urz\u0105dze\u0144 mobilnych.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f6fe8cd79.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f6fe8cd79.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Po skopiowaniu i wklejeniu adresu URL do narz\u0119dzia pojawi si\u0119 wynik od zera do stu punkt\u00f3w. Im wy\u017cszy wynik, tym lepsza jest Twoja witryna dla algorytmu Google, a wynik 85 lub wy\u017cszy oznacza, \u017ce \u200b\u200bstrona dzia\u0142a dobrze.\n<\/p>\n<p>\n  Dzi\u0119ki Page Speed \u200b\u200b\u200b\u200bInsights dowiesz si\u0119, jak Twoja witryna mo\u017ce zosta\u0107 ulepszona w r\u00f3\u017cnych kluczowych aspektach, w tym w czasie, jaki up\u0142yn\u0105\u0142 od momentu, gdy u\u017cytkownik poprosi\u0142 o now\u0105 stron\u0119, do momentu wy\u015bwietlenia przez przegl\u0105dark\u0119 tre\u015bci nowej strony widocznej na ekranie. Mierzy r\u00f3wnie\u017c czas, jaki up\u0142yn\u0105\u0142 od momentu, gdy u\u017cytkownik poprosi\u0142 o now\u0105 stron\u0119 do momentu pe\u0142nego renderowania strony przez przegl\u0105dark\u0119.\n<\/p>\n<p>\n  Poniewa\u017c sie\u0107 u\u017cytkownik\u00f3w mo\u017ce znacznie wp\u0142yn\u0105\u0107 na t\u0119 pr\u0119dko\u015b\u0107, Page Speed \u200b\u200b\u200b\u200bInsights bierze pod uwag\u0119 tylko niezale\u017cne od sieci aspekty wydajno\u015bci strony. Obejmuje to konfiguracj\u0119 serwera, struktur\u0119 HTML i wykorzystanie zasob\u00f3w zewn\u0119trznych, takich jak obrazy, CSS i JavaScript.\n<\/p>\n<p>\n  Na przyk\u0142ad optymalizuj\u0105c kod (w tym usuwaj\u0105c spacje, przecinki i inne niepotrzebne znaki), mo\u017cesz znacznie <a href=\"https:\/\/inform.click\/pl\/jak-poprawic-szybkosc-witryny-wordpress-8-prostych-ale-skutecznych-wskazowek\/\" title=\"zwi\u0119kszy\u0107 szybko\u015b\u0107 strony.\">zwi\u0119kszy\u0107 szybko\u015b\u0107 strony.<\/a> Usu\u0144 tak\u017ce komentarze do kodu, formatowanie i nieu\u017cywany kod. Google zaleca u\u017cywanie <a href=\"https:\/\/developer.yahoo.com\/yui\/compressor\/\" target=\"_blank\" rel=\"noopener\">YUI Compressor<\/a> zar\u00f3wno dla CSS, jak i JavaScript.\n<\/p>\n<p>\n  Zmniejszenie przekierowa\u0144 poprawi r\u00f3wnie\u017c szybko\u015b\u0107 witryny. Dzieje si\u0119 tak, poniewa\u017c za ka\u017cdym razem, gdy strona przekierowuje na inn\u0105 stron\u0119, odwiedzaj\u0105cy ma dodatkowy czas oczekiwania na zako\u0144czenie cyklu \u017c\u0105danie-odpowied\u017a HTTP. Je\u015bli na przyk\u0142ad wzorzec przekierowania z telefonu kom\u00f3rkowego wygl\u0105da nast\u0119puj\u0105co: \u201eABC.com -&gt; www.ABC.com -&gt; m.ABC.com -&gt; m.ABC.com\/home&#8221;, ka\u017cde z tych dw\u00f3ch dodatkowych przekierowa\u0144 sprawia, \u017ce \u200b\u200bTwoja strona \u0142adowa\u0107 wolniej.\n<\/p>\n<p>\n  Webmasterzy powinni zawsze korzysta\u0107 z buforowania przegl\u0105darki. Obejmuje to elementy takie jak obrazy, arkusze styl\u00f3w i inne. Dzieje si\u0119 tak, aby odwiedzaj\u0105cy, kt\u00f3ry wraca do Twojej witryny, nie musia\u0142 ponownie \u0142adowa\u0107 ca\u0142ej strony. Korzystaj\u0105c z narz\u0119dzia takiego jak <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/YSlow\/\" target=\"_blank\" rel=\"noopener\">YSlow<\/a>, mo\u017cesz sprawdzi\u0107, czy masz ju\u017c ustawion\u0105 dat\u0119 wyga\u015bni\u0119cia pami\u0119ci podr\u0119cznej. Po ustaleniu tego mo\u017cesz ustawi\u0107 nag\u0142\u00f3wek \u201ewygasa&#8221; na czas przechowywania tych informacji w pami\u0119ci podr\u0119cznej. O ile witryna nie zmienia si\u0119 cz\u0119sto, rok to rozs\u0105dny czas na jej ustawienie.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7009187a.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7009187a.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Zawsze szukaj sposob\u00f3w na popraw\u0119 czasu odpowiedzi serwera. Aby to zrobi\u0107, przyjrzyj si\u0119 r\u00f3\u017cnym w\u0105skim gard\u0142om wydajno\u015bci, takim jak powolne zapytania do bazy danych, wolny routing lub brak odpowiedniej pami\u0119ci. Optymalny czas odpowiedzi serwera powinien wynosi\u0107 mniej ni\u017c 200 milisekund.\n<\/p>\n<h5>\n  Obrazy mog\u0105 r\u00f3wnie\u017c odgrywa\u0107 du\u017c\u0105 rol\u0119 w szybko\u015bci Twojej witryny.<br \/>\n<\/h5>\n<p>\n  PNG to zazwyczaj najlepszy format pliku dla grafiki zawieraj\u0105cej mniej ni\u017c 16 kolor\u00f3w. Pliki JPEG s\u0105 na og\u00f3\u0142 idealnym formatem dla zdj\u0119\u0107. Upewnij si\u0119, \u017ce s\u0105 one r\u00f3wnie\u017c skompresowane do u\u017cytku w Internecie i ca\u0142kowicie nie s\u0105 konieczne do przesy\u0142ania zdj\u0119\u0107 w rozdzielczo\u015bci 200 i 300 DPI.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7028727e.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7028727e.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Jedna wskaz\u00f3wka, kt\u00f3r\u0105 warto wypr\u00f3bowa\u0107, to u\u017cycie <a href=\"http:\/\/csssprites.com\/\" target=\"_blank\" rel=\"noopener\">sprite'\u00f3w CSS<\/a> do stworzenia szablonu cz\u0119sto u\u017cywanych obraz\u00f3w, takich jak ikony, logo i inne cz\u0119sto u\u017cywane przyciski. Sprite'y CSS po\u0142\u0105cz\u0105 twoje obrazy w jeden wi\u0119kszy obraz, kt\u00f3ry \u0142aduje si\u0119 jednocze\u015bnie. Oznacza to mniej \u017c\u0105da\u0144 HTTP, co oznacza oszcz\u0119dno\u015b\u0107 czasu \u0142adowania, poniewa\u017c nie zmusza u\u017cytkownik\u00f3w do czekania na za\u0142adowanie wielu obraz\u00f3w.\n<\/p>\n<p>\n  Wreszcie, inn\u0105 opcj\u0105 zwi\u0119kszenia szybko\u015bci \u0142adowania witryn jest wykorzystanie sieci dystrybucji tre\u015bci lub CDN. Te sieci serwer\u00f3w s\u0142u\u017c\u0105 do dystrybucji obci\u0105\u017cenia zwi\u0105zanego z dostarczaniem tre\u015bci. Zasadniczo oznacza to, \u017ce kopie Twojej witryny s\u0105 przechowywane w wielu geograficznie zr\u00f3\u017cnicowanych centrach danych, dzi\u0119ki czemu u\u017cytkownicy maj\u0105 szybszy, bardziej niezawodny dost\u0119p do witryny, niezale\u017cnie od tego, gdzie fizycznie si\u0119 znajduj\u0105.\n<\/p>\n<p>\n  Chocia\u017c tworzenie \u015bwietnej witryny internetowej mo\u017ce by\u0107 ekscytuj\u0105ce i satysfakcjonuj\u0105ce, b\u0119dziesz chcia\u0142 si\u0119 upewni\u0107, \u017ce jest ona odpowiednio zoptymalizowana. Obejmuje to upewnienie si\u0119, \u017ce jest przyjazny dla urz\u0105dze\u0144 mobilnych i szybko\u015bci witryny. Je\u015bli nie, istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce mo\u017cesz straci\u0107 potencjalnie nowe i powtarzalne transakcje.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  \u0179r\u00f3d\u0142o nagrywania: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/09\/09\/mobile-friendly-site-speed\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>W dzisiejszym \u015bwiecie Web 2.0 wszystko kr\u0119ci si\u0119 wok\u00f3\u0142 Internetu. Je\u015bli szukasz hydraulika, przejd\u017a do sieci. Je\u015bli szukasz lokalnej restauracji, przejd\u017a do sieci. Je\u015bli chcesz kupi\u0107 dom, zgadnij co? Idziesz do sieci. Nie ma ju\u017c ludzi korzystaj\u0105cych z \u017c\u00f3\u0142tych stron, aby znale\u017a\u0107 firm\u0119, kt\u00f3ra potrzebuje lub chce. Id\u0105 do sieci, poniewa\u017c zapewnia ona najdok\u0142adniejsze i najszybsze informacje. Aby uzyska\u0107 te informacje pi\u0119\u0107 do siedmiu lat temu, osoba przechodzi\u0142aby do swojego domowego lub s\u0142u\u017cbowego komputera stacjonarnego lub\u2026<\/p>\n","protected":false},"author":1,"featured_media":155657,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[123,201,58,149],"tags":[],"class_list":["post-258416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-narzedzia-internetowe","category-projektowanie-stron","category-web-i-wordpress","category-web-porady-i-wskazowki"],"_links":{"self":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/comments?post=258416"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media\/155657"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media?parent=258416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/categories?post=258416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/tags?post=258416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}