Dobar dan prijatelji. Danas ću se malo odvojiti od alata za oglašavanje i pokrenuti novu kolumnu bloga. Zove se "Webmastering" i uključivat će korisne materijale za poboljšanje performansi i kvaliteta web stranice, odredišnih stranica. Počet ću s pregledom kul alata za provjeru mobilnosti web stranice.
Provjera brzine web lokacije pomoću Googlea
Google nudi 2 alata za ovo.
# 1 PageSpeed Insights
Mislim da ga dobro poznaješ. Ubacite link do vaše stranice, pritisnite dugme "Analiziraj" i dobijte rezultat u obliku dvije kartice.
Kartica "Za mobilne" sadrži izvještaj o brzini učitavanja stranice za mobilne uređaje i - važno! - ocjena pogodnosti sajt za pametne telefone. Kartica "Za računare", odnosno ista analiza za radnu površinu.
Najbolji dio je što vam servis omogućava preuzimanje optimizirano slike, css i skripte za korištenje na vašoj web lokaciji. Evo besplatne pomoći od Googlea.
Kao što vidite na snimku ekrana, imam ozbiljnih problema sa mobilnom verzijom. Kako si?
# 2 Testmysite.Withgoogle
Zapravo, ovo je isti alat, samo ima prekrasan omot. Pre neki dan sam otkrio ovu uslugu i podmitio me obrazac za prijavu.
Kada ubacite link do stranice i kliknete na "Provjeri", usluga će ponuditi rezultat u obliku potpune dinamičke odredišne stranice, na kojoj će vam sažeto i uvjerljivo reći kako stvari stoje na stranici i ponuditi preuzmite kompletan izvještaj.
Naravno, tražio sam kompletan izvještaj i dobio ga poštom za par minuta. Izgleda razumno, nekoliko ekrana korisnih uputstava sa linkovima na određene materijale:
Važno je napomenuti da ako analizirate istu stranicu, onda će se brojke za ove alate malo razlikovati. Međutim, oni rade na istoj tehnologiji.
Na ovaj način u samo nekoliko sekundi možete ne samo provjeriti pokretljivost stranice i provjeriti brzinu učitavanja - već i preuzeti cjeloviti izvještaj s optimiziranim sadržajem. Besplatno je. Sa google
Pa, kako si sa mobilnošću?
Za svoje projekte, vjerovatno ste davno primijetili da broj mobilnih korisnika stalno raste. Za neke je trend manje primjetan, a na nekim projektima se ta brojka svake godine udvostručuje ili više. Prema podacima LiveInterneta, više od 50% prometa na Runetu otpada na mobilni uređaji. Inače, mnogi čitaoci ovog bloga se već duže vrijeme žale da ovdje ne postoji mobilna verzija 🙂 što će, naravno, biti popravljeno u bliskoj budućnosti.
Ovu činjenicu mobilizacije ne mogu zanemariti ni platforme za pretraživanje. Postepeno daju prednosti u mobilnom pretraživanju onim stranicama koje su prilagođene uređajima korisnika.
U početku je Google davao isječke web lokacijama koje bi ispravno prikazivale na mobilnim telefonima.
Također, Google je kreirao alat koji pomaže webmasterima da provjere ispravnost prikaza web stranice na mobilnim uređajima:
https://www.google.com/webmasters/tools/mobile-friendly/
Google je 21. aprila lansirao novi algoritam pod nazivom Mobilegeddon na Zapadu. Uspješno položen test prilagođenosti mobilnim uređajima jedan je od SEO faktora koje Google uzima u obzir. Do sada nije bilo većih promjena u SERP-u, ali možete se pripremiti sada.
Kako učiniti da web stranica bude responzivna za Google? Tajna je jednostavna - morate postaviti zadatak za svoje programere / dizajnere izgleda. Pa, ako nema vremena za čekanje, onda ... možete koristiti MobileCheat 🙂
Zapravo, ovo je neprovjerena tehnologija, ne zna se do čega će to dovesti u budućnosti, pa je koristite samo na vlastitu odgovornost i rizik. Ovdje se može napraviti barem niz testova.
Kako zaobići Google test sa MobileCheatom
Postoje samo dvije stvari koje treba uraditi:
1. Dodajte meta oznaku viewport kodu.
2. Zatvorite pristup robotu CSS datotekama ili fascikli u kojoj se nalaze preko robots.txt
Na primjer, ovako moj blog prolazi standardni test:
Kada zatvorite CSS, slika se mijenja:
Čini se da se na stranici ništa nije promijenilo, ali rezultati testova su potpuno drugačiji. Inače, na nekim stranicama i sam volim da onemogućim CSS, tako da ih je praktičnije pregledavati i koristiti 🙂 dakle, to je potpuno opravdana shema. Ali predstavljen je samo u informativne svrhe.
Šta mislite o ovome? Hoće li Google ovo računati kao kontra potez sa vitezom, ili je sve unaprijed smislio i odmah će staviti stranicu u šah i mat? 🙂
U mnogim zemljama pametni telefoni se češće koriste za surfanje internetom nego kompjuteri. Stoga je vrlo važno prilagoditi stranicu za mobilne uređaje. Saznajte jesu li vaše stranice zgodne za korisnike pametnih telefona pomoću posebnog alata u Search Consoleu.
Upotreba
Lako je provjeriti je li stranica zgodna za gledanje na pametnom telefonu: samo navedite njen puni URL. Verifikacija obično traje manje od jedne minute. Ako na stranici postoje preusmjeravanja, oni će također biti obrađeni.
Na osnovu rezultata provjere vidjet ćete kako stranica izgleda na pametnom telefonu i saznati koji problemi mogu nastati prilikom pregleda. Najčešće su to sitna slova (teško za čitanje na malom ekranu) i Flash elementi (nisu podržani na većini mobilnih uređaja).
Vrijednost meta oznake okvira prikaza nije postavljena
Kod stranice ne specificira svojstvo prozora za prikaz, koje govori pretraživaču kako pravilno promijeniti veličinu elemenata stranice kako bi odgovarali veličini ekrana uređaja. Kako biste osigurali da se vaša web lokacija pravilno prikazuje na različitim veličinama ekrana, prilagodite okvir za prikaz pomoću meta oznake viewport. Da biste saznali više o tome, pogledajte odjeljak Osnove responzivnog web dizajna našeg vodiča.
Meta oznaka Viewporta mora imati širinu uređaja
Nemoguće je prilagoditi stranicu za ekrane različitih veličina, jer je svojstvo viewport-a sa fiksnom širinom navedeno u njenom kodu. U ovom slučaju, morate primijeniti responsive dizajn prilagođavanjem skaliranja stranice tako da odgovara ekranu.
Sadržaj širi od ekrana
Ovaj izvještaj identificira stranice koje zahtijevaju horizontalno pomicanje za pregled teksta i slika. Ovaj problem se javlja kada su dimenzije u CSS stilovima postavljene na apsolutne vrijednosti ili kada se koriste slike koje su dizajnirane za određenu širinu prozora preglednika. Uvjerite se da su širine i vrijednosti pozicioniranja CSS elemenata relativne i da su slike skalirane. Za detalje o ovome, pogledajte odjeljak Veličine sadržaja za Viewport u našem vodiču.
Premali font
Ovaj izvještaj navodi stranice sitnim slovima koje korisnici moraju koristiti pokretima zumiranja da bi ih pročitali. Nakon postavljanja okvira za prikaz, potrebno je definirati veličine fontova tako da se u njemu ispravno pojavljuju.
Interaktivni elementi su preblizu
Ovaj izvještaj navodi stranice na kojima su stavke navigacije toliko blizu jedna drugoj da je korisniku teško da dodirne neke, a da ne dodirne druge. Uvjerite se da su gumbi, veze i slično, kao i razmak i razmak optimalni za interakciju korisnika mobilnih uređaja.
Šta je sledeće?
- Kako saznati koje smo probleme s pregledavanjem vaše stranice na mobilnim uređajima pronašli pomoću posebnog izvještaja (za to morate potvrditi vlasništvo nad web-mjestom na vašem Search Console računu)
- Kako optimizirati svoju web stranicu za mobilne uređaje (za stranice u WordPress-u, Joomli! i drugim sistemima za upravljanje sadržajem)
Danas više nema potrebe nikoga uvjeravati u potrebu za mobilnom verzijom stranice. Uostalom, svakim danom sve je više posjetitelja sa pametnih telefona i tableta. U vrijeme pisanja ovog teksta, oko 20% posjetitelja mog bloga koristi mobilne uređaje za pregledavanje. Odnosno, svaki peti dolazi na moju stranicu sa telefona ili tableta.
Prije nekoliko godina nisam ni razmišljao o takvim posjetiocima, ali kada je njihov broj prešao 10% od ukupnog broja, počeo sam koristiti responsive layout. To je omogućilo ispravan prikaz sadržaja na mobilnim uređajima i povećanje lojalnosti posjetitelja i pretraživača stranici.
Mobilna verzija stranice i responzivni dizajn nisu ista stvar. Ovaj članak će se fokusirati na testiranje responzivnog izgleda kada se dizajn stranice promijeni ovisno o rezoluciji ekrana uređaja posjetitelja.
Da biste bili sigurni da je vaša stranica ispravno prikazana na mobilnim uređajima, morate provjeriti, a za to postoji nekoliko korisnih servisa i alata.
Brza provjera responzivnog izgleda
Popularni internet pretraživač (pretraživač) Mozilla Firefox opremljen ugrađenim alatima za provjeru dizajna web stranice na prikladnost za prikaz na mobilnim uređajima. Da biste ga koristili, idite na "Menu" - "Razvoj" - "Responsive Design". Ili jednostavno pritisnite tri tipke na tastaturi u isto vrijeme ++ [M]
Trebali biste vidjeti nešto poput sljedećeg:
Promjenom rezolucije i orijentacije ekrana možete provjeriti kako će vaša stranica biti prikazana posjetiteljima s mobilnih uređaja.
Google pretraživač Chrome također ima ugrađenu podršku za provjeru odzivnosti dizajna stranice. Da biste to učinili, idite na meni, odaberite stavku "Dodatni alati", a zatim "Alati za programere" (ili pritisnite tipku ).
Nakon toga kliknite na ikonu responzivnog dizajna (ili istovremeno kliknite na tastaturu ++ [M]):
Na sredini ekrana vidjet ćete kako će vaša stranica biti prikazana na ekranima mobilnih uređaja:
SEO testiranje mobilnog dizajna
Kao što znate, dva svjetska lidera pretraživanja Google i Yandex imaju svoje neskromno mišljenje o tome kako bi stranica trebala izgledati na ekranima mobilnih uređaja. A ako je stranica prepoznata kao nezgodna za mobilne posjetitelje, onda ona pada u rezultatima pretraživanja. Dakle, sa stanovišta SEO-a, ako ne želite da izgubite mobilne posetioce, onda ne samo da treba da imate responzivni dizajn, već bi ga pretraživači takođe trebali smatrati takvim, odnosno pogodnim za mobilne uređaje.
Da provjerite prilagodljivost koristeći Google servis, idite na sljedeću adresu i upišite naziv Vaše stranice: https://www.google.com/webmasters/tools/mobile-friendly/.
Ovako izgleda rezultat provjere mog bloga:
Sa Yandexom je malo složenije, za verifikaciju je potrebno registrirati se na servisu Yandex.Webmaster i koristiti beta verziju sučelja:
Online servisi za testiranje prilagodljivosti
Glavni zadatak ovih servisa je da prezentuju (prikažu) kako će vaša stranica izgledati na mobilnom uređaju. Postoji veliki broj stranica sa takvom funkcionalnošću. Daću samo nekoliko njih. U većini slučajeva, oni dupliraju ugrađenu funkcionalnost FireFoxa i Chromea.
Google resizer
Počeću ponovo s Googleom, koji ima svoju vlastitu uslugu za demonstraciju: http://design.google.com/resizer/#
Quirktools screenfly
Druga lijepa usluga je http://quirktools.com/screenfly/. Pokazat će vam kako vaša stranica može izgledati čak i na TV-u!
Symby.ru adaptest
Pa, da ne bih uvrijedio "domaćeg proizvođača" navest ću primjer druge stranice: http://symby.ru/adaptest/. Na jednoj stranici vidjet ćete nekoliko prikaza odjednom s različitim rezolucijama ekrana.
Brzina mobilne verzije stranice
Nakon što ste se uvjerili da je vaša stranica responzivna i da se ispravno prikazuje na ekranima većine uređaja, trebali biste provjeriti brzinu njenog rada. Opet, primijenjeno na mobilne posjetitelje.
PageSpeed Insights
Google je, kao i uvijek, ispred ostalih: https://developers.google.com/speed/pagespeed/insights/. Ova usluga će vam pokazati kako stranica izgleda na ekranu telefona i dati preporuke kako optimizirati kod za povećanje brzine učitavanja na mobilnim uređajima.
WebPageTest
I na kraju, dat ću primjer usluge koja ne samo da će pokazati kako stranica izgleda na mobilnom uređaju, već će pokazati i brzinu njenog rada: http://www.webpagetest.org/
zaključci
Po mom mišljenju, u svakodnevnom radu, prilikom izmjena dizajna stranice, lakše je koristiti ugrađene mogućnosti pretraživača FireFox i Chrome. Nakon toga, naravno, morate provjeriti lojalnost pretraživača vašem dizajnu. I tek tada, da smirite dušu ili da se pokažete, možete koristiti online usluge.
Pretraživači nastoje poboljšati rezultate pretraživanja za korisnike mobilnih uređaja (pametnih telefona, tableta), pa će stranice optimizirane za različite veličine ekrana biti prikazane više od stranica bez takve optimizacije. Ovo također uključuje mobilne verzije web stranica.
Znakovi web-lokacije prilagođene mobilnim uređajima:
- Sadržaj lako čitljiv (čitljiv bez uvećanja), velika polja obrasca i dugmad.
- Nedostatak "teških" slika, Flash - elementi i pretjerana animacija.
- Nedostatak Java appleta i Silverlight dodataka.
- Nedostatak horizontalne trake za pomicanje.
- Minimalna brzina učitavanja web stranice.
- Najjednostavnija navigacija.
- Meta tag polja prikaza je registrovan.
Usluge provjere "mobilnosti" stranice
Da vam pokažemo kako funkcionišu usluge, hajde da uzmemo sajt mojih dobrih partnera - prevodilačke agencije CONTEXT.
1. Google Mobile Friendly
Možete provjeriti bilo koju web lokaciju jednostavnim upisivanjem njene adrese u red.
Prikazuje na ekranu kako stranica izgleda na pametnom telefonu i daje ukupnu ocjenu njegove optimizacije za mobilne uređaje.
Za razliku od drugih usluga, ovdje možete provjeriti ne svaku web lokaciju, već samo svoju. Odnosno, nakon što je stranica dodana u sučelje webmastera s potvrdom prava na nju.
Usluga prikazuje ukupnu ocjenu, provjerava 6 tačaka usklađenosti i pokazuje kako stranica izgleda na pametnom telefonu.
3. Bing Checker
Provjerava se ukupna optimizacija plus usklađenost sa 4 boda.
Takođe prikazuje kako stranica izgleda na ekranu pametnog telefona (naravno, na OS Windows, dok su prethodni servisi prikazivali android pametni telefon =)).
4. Mobile Checker iz W3C
"Najduža" od svih usluga. Toliko "dugo" da nisam čekala kraj testa =)
Čekao sam 5 minuta, dok su ostale usluge završene za 5-20 sekundi.
5. Responsinator
Za razliku od ostalih, ne daje nikakve ocjene, ali prikazuje kako vaša stranica izgleda na 6 različitih uređaja u dvije orijentacije za IOS i Android, što je jako cool.
UPD1: 20.07.2017.
6. Adaptivator
Usluga je predložena u komentarima na ovaj članak. Ja ga lično nisam koristio, ali izgleda da je sve prilično dobro. Mogućnosti su slične kao kod respondera, ali postoji i procjena rezultata prilagodljivosti.
UPD2: 3.11.2017:
7. iloveadaptive.com
Još jedna potpuno nova usluga predložena u komentarima. Što se mene tiče, malo pretežak i nepraktičan, ali ovo se više nego isplati velikim prilikama. Postoji čak i sortiranje po OS-u.
Zaključak
Bez sumnje, adaptacija stranice za mobilne uređaje nije samo danak modi i vremenu, već nužan atribut moderne stranice koja pomaže ne samo krajnjem korisniku.
Stoga, za sve koji žele biti bliže klijentu i imati više posjeta/lidova, preporučujem da što prije prilagode svoje stranice. Pitaj me pitanje -
