Dobar dan prijatelji. Danas ću se malo odmaknuti od alata za oglašavanje i pokrenuti novu kolumnu bloga. Zove se "Webmastering" i uključivat će korisne materijale za poboljšanje performansi i kvalitete stranice, odredišnih stranica. Počet ću s pregledom zgodnog alata za provjeru mobilnosti web stranice.
Provjera brzine web-mjesta s Googleom
Google nudi 2 alata za to.
# 1 PageSpeed Insights
Mislim da ga dobro poznaješ. Umetnite poveznicu na svoju stranicu, pritisnite gumb "Analiziraj" i dobijete rezultat u obliku dvije kartice.
Kartica "Za mobitel" uključuje izvješće o brzini učitavanja stranice za mobilne uređaje i - važno! - ocjena pogodnosti stranica za pametne telefone. Kartica "Za računala", odnosno ista analiza za radnu površinu.
Najbolji dio je što vam usluga omogućuje preuzimanje optimiziran slike, css i skripte za korištenje na svojoj web stranici. Evo besplatne pomoći od Googlea.
Kao što možete vidjeti na snimci zaslona, imam ozbiljnih problema s mobilnom verzijom. Kako si?
# 2 Testmysite.Withgoogle
Zapravo, ovo je isti alat, samo ima prekrasan omot. Neki dan sam otkrio ovu uslugu i podmitio me obrazac za prijavu.
Kada umetnete poveznicu na stranicu i kliknete "Provjeri", usluga će ponuditi rezultat u obliku cjelovite dinamičke odredišne stranice, na kojoj će vam sažeto i uvjerljivo reći kako stvari stoje na stranici i ponuditi preuzmite cijelo izvješće.
Naravno, tražio sam cjelovito izvješće i dobio ga poštom za par minuta. Izgleda razumno, nekoliko ekrana korisnih uputa s poveznicama na određene materijale:
Važno je napomenuti da ako analizirate istu stranicu, brojke za ove alate će se malo razlikovati. Međutim, oni rade na istoj tehnologiji.
Na ovaj način u samo nekoliko sekundi možete ne samo provjeriti mobilnost web-mjesta i brzinu učitavanja - već i preuzeti cjelovito izvješće s optimiziranim sadržajem. Besplatno je. Iz googlea
Pa, kako si s mobilnošću?
Za svoje projekte vjerojatno ste davno primijetili da broj mobilnih korisnika stalno raste. Kod nekih je trend manje uočljiv, a na nekim se projektima 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 čitatelji ovog bloga se već duže vrijeme žale kako ovdje nema mobilne verzije 🙂 što će, naravno, biti popravljeno u skoroj budućnosti.
Ovu činjenicu mobilizacije ne mogu zanemariti ni platforme za pretraživanje. Postupno daju prednosti u mobilnom pretraživanju onim stranicama koje su prilagođene uređajima korisnika.
Isprva je Google web lokacijama davao isječke koje će ispravno prikazati na mobilnim telefonima.
Također, Google je stvorio 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. travnja lansirao novi algoritam pod nazivom Mobilegeddon na Zapadu. Sada uspješno polaganje testa Mobile Friendly jedan je od SEO čimbenika 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 svojim programerima / dizajnerima 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, stoga je koristite samo na vlastitu odgovornost i rizik. Ovdje se može napraviti barem niz testova.
Kako zaobići Google test s MobileCheatom
Postoje samo dvije stvari koje treba učiniti:
1. Dodajte meta oznaku viewport kodu.
2. Zatvorite pristup robotu CSS datotekama ili mapi u kojoj se nalaze putem robots.txt
Na primjer, ovako moj blog prolazi zadani test:
Kada zatvorite CSS, slika se mijenja:
Čini se da se na stranici ništa nije promijenilo, ali rezultati testiranja su potpuno drugačiji. Usput, na nekim stranicama i sam volim onemogućiti CSS, tako da ih je praktičnije pregledavati i koristiti 🙂 dakle, to je potpuno opravdana shema. Ali predstavljen je samo u informativne svrhe.
Što misliš o ovome? Hoće li Google ovo računati kao kontra potez s vitezom ili je sve unaprijed smislio i odmah će stranicu staviti u šah i mat? 🙂
U mnogim zemljama pametni telefoni se češće koriste za surfanje internetom nego računala. Stoga je vrlo važno stranicu prilagoditi mobilnim uređajima. Saznajte jesu li vaše stranice prikladne za korisnike pametnih telefona pomoću posebnog alata u Search Consoleu.
Korištenje
Lako je provjeriti je li stranica prikladna za gledanje na pametnom telefonu: samo navedite njezin puni URL. Provjera obično traje manje od minute. Ako na stranici postoje preusmjeravanja, ona će također biti obrađena.
Na temelju rezultata provjere vidjet ćete kako stranica izgleda na pametnom telefonu i saznati koji problemi mogu nastati prilikom pregledavanja. Najčešće su to sitni ispis (teško za čitanje na malom ekranu) i Flash elementi (nisu podržani na većini mobilnih uređaja).
Vrijednost meta oznake vidnog polja nije postavljena
Kod stranice ne navodi svojstvo okvira za prikaz, koje pregledniku govori kako pravilno promijeniti veličinu elemenata stranice kako bi odgovarali veličini zaslona uređaja. Kako biste osigurali da se vaša web-lokacija ispravno prikazuje na različitim veličinama zaslona, 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.
Metaoznaka okvira za prikaz mora imati vrijednost širine uređaja
Nemoguće je prilagoditi stranicu za zaslone različitih veličina, jer je svojstvo viewporta s fiksnom širinom navedeno u njenom kodu. U tom slučaju morate primijeniti responzivni dizajn prilagođavanjem skaliranja stranice tako da odgovara zaslonu.
Sadržaj širi od ekrana
Ovo izvješće identificira stranice koje zahtijevaju vodoravno 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. Provjerite jesu li vrijednosti širine i položaja CSS elemenata relativne i da su slike skalirane. Za pojedinosti o tome, pogledajte odjeljak Veličine sadržaja za Viewport u našem vodiču.
Premali font
Ovo izvješće navodi stranice sitnim slovima koje korisnici moraju koristiti pokretima zumiranja da bi ih pročitali. Nakon postavljanja okvira za prikaz, morate definirati veličine fontova tako da se u njemu ispravno pojavljuju.
Interaktivni elementi su preblizu
Ovo izvješće navodi stranice na kojima su stavke navigacije toliko blizu jedna drugoj da je korisniku teško dodirnuti neke bez dodirivanja drugih. Provjerite jesu li gumbi, veze i slično te razmak i razmak optimalni za interakciju s mobilnim korisnicima.
Što je sljedeće?
- Kako saznati koje smo probleme s pregledom vaše stranice na mobilnim uređajima pronašli pomoću posebnog izvješća (za to morate potvrditi vlasništvo nad web-mjestom na svom Search Console računu)
- Kako optimizirati svoju stranicu za mobilne uređaje (za stranice u WordPressu, Joomli! i drugim sustavima 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 s pametnih telefona i tableta. U trenutku pisanja ovog teksta, oko 20% posjetitelja mog bloga koristi mobilne uređaje za pregledavanje. Odnosno, svaki peti dolazi na moju stranicu s telefona ili tableta.
Prije nekoliko godina nisam ni razmišljao o takvim posjetiteljima, ali kada je njihov broj premašio 10% 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 tražilica web stranici.
Mobilna verzija stranice i responzivni dizajn nisu ista stvar. Ovaj će se članak usredotočiti na testiranje responzivnog izgleda kada se dizajn stranice promijeni ovisno o razlučivosti zaslona uređaja posjetitelja.
Kako biste bili sigurni da se vaša stranica ispravno prikazuje na mobilnim uređajima, morate provjeriti, a za to postoji nekoliko korisnih usluga i alata.
Brza provjera responzivnog izgleda
Popularni internetski preglednik (preglednik) Mozilla Firefox opremljen ugrađenim alatima za provjeru prikladnosti dizajna web stranice za prikaz na mobilnim uređajima. Da biste ga koristili, idite na "Izbornik" - "Razvoj" - "Responzivni dizajn". Ili jednostavno pritisnite tri tipke na tipkovnici u isto vrijeme ++ [M]
Trebali biste vidjeti nešto poput sljedećeg:
Promjenom rezolucije i orijentacije zaslona možete provjeriti kako će vaša stranica biti prikazana posjetiteljima s mobilnih uređaja.
Google preglednik Krom također ima ugrađenu podršku za provjeru responzivnosti dizajna stranice. Da biste to učinili, idite na izbornik, odaberite stavku "Dodatni alati", a zatim "Alati za razvojne programere" (ili pritisnite tipku ).
Nakon toga kliknite ikonu responzivnog dizajna (ili istovremeno kliknite na tipkovnicu ++ [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 web-mjesto prepoznato kao nezgodno za mobilne posjetitelje, onda se spušta u rezultatima pretraživanja. Dakle, sa SEO gledišta, ako ne želite izgubiti mobilne posjetitelje, onda ne biste trebali imati samo responzivni dizajn, već bi ga tražilice također trebale smatrati takvim, odnosno prikladnim za mobilne uređaje.
Da biste provjerili prilagodljivost pomoću Google usluge, idite na sljedeću adresu i upišite naziv svoje stranice: https://www.google.com/webmasters/tools/mobile-friendly/.
Ovako izgleda rezultat provjere mog bloga:
S Yandexom je malo kompliciranije, za provjeru je potrebno registrirati se na usluzi Yandex.Webmaster i koristiti beta verziju sučelja:
Online usluge za testiranje prilagodljivosti
Glavni zadatak ovih servisa je predstaviti (pokazati) kako će vaša stranica izgledati na mobilnom uređaju. Postoji mnogo stranica s takvom funkcionalnošću. Dat ću samo neke od njih. U većini slučajeva dupliciraju ugrađenu funkcionalnost FireFoxa i Chromea.
Google mijenjanje veličine
Počet ću ponovno s Googleom, koji ima svoju vlastitu uslugu za demonstraciju koja odgovara: 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!
Prilagodba Symby.ru
Pa, kako ne bih uvrijedio "domaćeg proizvođača", navest ću primjer drugog mjesta: http://symby.ru/adaptest/. Na jednoj stranici vidjet ćete nekoliko prikaza odjednom s različitim razlučivostima zaslona.
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 za kraj, navest ću primjer usluge koja ne samo da će pokazati kako stranica izgleda na mobilnom uređaju, već će pokazati i brzinu njezina rada: http://www.webpagetest.org/
zaključke
Po mom mišljenju, u svakodnevnom radu, prilikom izmjena dizajna stranice, lakše je koristiti ugrađene mogućnosti preglednika FireFox i Chrome. Nakon toga, naravno, trebate provjeriti odanost tražilica vašem dizajnu. I tek tada, da smirite dušu ili da se pokažete, možete koristiti online usluge.
Tražilice nastoje poboljšati rezultate pretraživanja za korisnike mobilnih uređaja (pametnih telefona, tableta), pa će stranice optimizirane za različite veličine zaslona biti prikazane više od stranica bez takve optimizacije. To također uključuje mobilne verzije web-mjesta.
Znakovi web-lokacije prilagođene mobilnim uređajima:
- Sadržaj lako čitljiv (čitljiv bez povećanja), velika polja obrasca i gumbi.
- Nedostatak "teških" slika, Flash - elementi i pretjerana animacija.
- Nedostatak Java appleta i Silverlight dodataka.
- Nedostatak vodoravne trake za pomicanje.
- Minimalna brzina učitavanja web stranice.
- Najjednostavnija navigacija.
- Metaoznaka okvira za prikaz je registrirana.
Usluge za provjeru "mobilnosti" stranice
Kako bismo pokazali kako usluge funkcioniraju, uzmimo stranicu mojih dobrih partnera - prevoditeljske agencije CONTEXT.
1. Google Mobile Friendly
Možete provjeriti bilo koju stranicu jednostavnim upisivanjem adrese u redak.
Na zaslonu prikazuje kako stranica izgleda na pametnom telefonu i daje opću ocjenu njegove optimizacije za mobilne uređaje.
Za razliku od drugih usluga, ovdje možete provjeriti ne svaku stranicu, već samo svoju. Odnosno, nakon što se stranica doda sučelju webmastera s potvrdom prava na nju.
Usluga prikazuje ukupnu ocjenu, provjerava 6 točaka usklađenosti i pokazuje kako stranica izgleda na pametnom telefonu.
3. Bing Checker
Provjerava se ukupna optimizacija plus usklađenost s 4 točke.
Također prikazuje kako stranica izgleda na zaslonu pametnog telefona (naravno, na OS Windowsima, dok su prijašnji 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šile 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 osobno nisam koristio, ali čini se 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 počast 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čam da što prije prilagode svoje stranice. Pitaj me -
