Buna seara prieteni. Astăzi mă voi îndepărta puțin de instrumentele de publicitate și voi începe o nouă rubrică pe blog. Se numește „Webmastering” și va include materiale utile privind îmbunătățirea performanței și calității site-ului, paginilor de destinație. Voi începe cu o prezentare generală a unui instrument minunat pentru verificarea mobilității unui site web.
Verificarea vitezei site-ului cu Google
Google oferă 2 instrumente pentru aceasta.
# 1 PageSpeed Insights
Cred că îl cunoști bine. Introduceți un link către site-ul dvs., apăsați butonul „Analizați” și obțineți rezultatul sub forma a două file.
Fila „Pentru mobil” include un raport privind viteza de încărcare a unui site pentru dispozitive mobile și - important! - rating de confort site pentru smartphone-uri. Fila „Pentru computere”, respectiv, aceeași analiză pentru desktop.
Cea mai bună parte este că serviciul vă permite să descărcați optimizat imagini, css și scripturi de utilizat pe site-ul dvs. Iată un ajutor gratuit de la Google.
După cum puteți vedea din captura de ecran, am probleme serioase cu versiunea mobilă. Ce mai faci?
# 2 Testmysite.Withgoogle
De fapt, acesta este același instrument, are doar un înveliș frumos. Am descoperit acest serviciu zilele trecute și am fost mituit de formularul de raportare.
Când introduceți un link către site și faceți clic pe „Verifică”, serviciul va oferi rezultatul sub forma unei pagini de destinație dinamice cu drepturi depline, pe care vă va spune succint și convingător cum stau lucrurile cu site-ul și vă va oferi descărcați raportul complet.
Desigur, am cerut un raport complet și l-am primit prin poștă în câteva minute. Pare sensibil, mai multe ecrane cu instrucțiuni utile cu link-uri către materiale specifice:
Este de remarcat faptul că, dacă analizați același site, atunci cifrele pentru aceste instrumente vor diferi ușor. Cu toate acestea, ei lucrează pe aceeași tehnologie.
Astfel, în doar câteva secunde puteți nu numai să verificați mobilitatea site-ului și să verificați viteza de încărcare, ci și să descărcați un raport complet cu conținut optimizat. Este gratuit. De pe google
Ei bine, ce mai faceți cu mobilitatea?
Pentru proiectele tale, probabil ai observat cu mult timp în urmă că numărul utilizatorilor de telefonie mobilă este în continuă creștere. Pentru unii, tendința este mai puțin vizibilă, iar la unele proiecte această cifră se dublează sau mai mult în fiecare an. Conform datelor LiveInternet, peste 50% din traficul de pe Runet este reprezentat de dispozitivele mobile. Apropo, mulți cititori ai acestui blog se plâng de mult timp că nu există o versiune mobilă aici 🙂 care, desigur, va fi remediată în viitorul apropiat.
Acest fapt de mobilizare nu poate fi ignorat nici de platformele de căutare. Treptat, acestea oferă avantaje în căutarea mobilă acelor site-uri care sunt adaptate dispozitivelor utilizatorilor.
La început, Google a oferit fragmente site-urilor pe care le-ar afișa corect pe telefoanele mobile.
De asemenea, Google a creat un instrument pentru a ajuta webmasterii să verifice corectitudinea afișării site-ului pe dispozitivele mobile:
https://www.google.com/webmasters/tools/mobile-friendly/
Pe 21 aprilie, Google a lansat un nou algoritm numit Mobilegeddon în Occident. Acum trecerea cu succes a testului Mobile Friendly este unul dintre factorii SEO luați în considerare de Google. Până acum, nu au existat modificări majore în SERP, dar vă puteți pregăti acum.
Cum faci ca un site să fie receptiv pentru Google? Secretul este simplu - trebuie să setați o sarcină pentru programatorii / designerii de layout. Ei bine, dacă nu aveți timp să așteptați, atunci... puteți folosi MobileCheat 🙂
De fapt, aceasta este o tehnologie netestată, nu se știe la ce va duce în viitor, așa că folosește-o doar pe riscul și riscul tău. Aici se pot face cel puțin o serie de teste.
Cum să ocoliți testul Google cu MobileCheat
Sunt doar două lucruri de făcut:
1. Adăugați metaeticheta viewport la cod.
2. Închideți accesul robotului la fișierele CSS sau la folderul în care sunt localizate prin robots.txt
De exemplu, astfel blogul meu trece testul implicit:
Când închideți CSS, imaginea se schimbă:
Se pare că nu s-a schimbat nimic pe site, dar rezultatele testelor sunt complet diferite. Apropo, pe unele site-uri îmi place însumi să dezactivez CSS, astfel încât să fie mai convenabil să le vizualizați și să le folosiți 🙂 prin urmare, este o schemă complet justificată. Dar este prezentat doar în scop informativ.
Ce părere ai despre această? Va considera Google asta ca o contra-mușcare cu un cavaler sau a gândit totul dinainte și va pune imediat site-ul în șah și mat? 🙂
În multe țări, smartphone-urile sunt mai frecvent utilizate pentru a naviga pe internet decât computerele. Prin urmare, este foarte important să adaptați site-ul pentru dispozitive mobile. Aflați dacă paginile dvs. sunt convenabile pentru utilizatorii de smartphone-uri cu un instrument special din Search Console.
Utilizare
Este ușor să verificați dacă pagina este convenabilă pentru vizualizare pe un smartphone: trebuie doar să specificați adresa URL completă. Verificarea durează de obicei mai puțin de un minut. Dacă există redirecționări pe pagină, acestea vor fi procesate și ele.
Pe baza rezultatelor verificării, veți vedea cum arată pagina pe un smartphone și veți afla ce probleme pot apărea la vizualizarea acesteia. Cel mai adesea acestea sunt litere mici (dificil de citit pe un ecran mic) și elemente Flash (nu sunt acceptate pe majoritatea dispozitivelor mobile).
Valoarea metaetichetei viewport nu este setată
Codul paginii nu specifică proprietatea ferestrei de vizualizare, care spune browserului cum să redimensioneze corect elementele paginii pentru a se potrivi cu dimensiunea ecranului dispozitivului. Pentru a vă asigura că site-ul dvs. se afișează corect pe diferite dimensiuni de ecran, ajustați fereastra de vizualizare folosind metaeticheta de vizualizare. Pentru a afla mai multe despre acest lucru, consultați secțiunea Noțiuni de bază pentru designul web adaptabil din ghidul nostru.
Metaeticheta de vizualizare trebuie să aibă o valoare pentru lățimea dispozitivului
Este imposibil să adaptați pagina pentru ecrane de diferite dimensiuni, deoarece proprietatea viewport cu o lățime fixă este specificată în codul său. În acest caz, trebuie să aplicați un design receptiv ajustând scalarea paginii pentru a se potrivi cu ecranul.
Conținut mai larg decât ecranul
Acest raport identifică paginile care necesită derulare orizontală pentru a vizualiza text și imagini. Această problemă apare atunci când dimensiunile din stilurile CSS sunt setate la valori absolute sau când sunt utilizate imagini care sunt proiectate pentru o anumită lățime a ferestrei browserului. Asigurați-vă că lățimea și valorile de poziționare ale elementelor CSS sunt relative și că imaginile sunt scalate. Pentru detalii despre aceasta, consultați secțiunea Dimensiuni de conținut pentru vizualizare a tutorialului nostru.
Font prea mic
Acest raport enumeră pagini cu caractere mici pe care utilizatorii trebuie să le utilizeze gesturi de zoom pentru a le citi. După configurarea ferestrei de vizualizare, trebuie să definiți dimensiunile fonturilor astfel încât acestea să apară corect în el.
Elementele interactive sunt prea apropiate
Acest raport afișează pagini în care elementele de navigare sunt atât de apropiate între ele încât este dificil pentru un utilizator să le atingă pe unele fără să le atingă pe altele. Asigurați-vă că butoanele, linkurile și altele asemenea, precum și spațierea și spațierea sunt optime pentru a interacționa utilizatorii de telefonie mobilă.
Ce urmeaza?
- Cum să aflați ce probleme la vizualizarea site-ului dvs. pe dispozitive mobile am găsit folosind un raport special (pentru aceasta trebuie să verificați calitatea de proprietar al site-ului în contul dvs. Search Console)
- Cum să-ți optimizezi site-ul pentru dispozitive mobile (pentru pagini din WordPress, Joomla! Și alte sisteme de gestionare a conținutului)
Astăzi nu mai este nevoie să convingem pe nimeni de necesitatea unei versiuni mobile a site-ului. La urma urmei, în fiecare zi sunt din ce în ce mai mulți vizitatori de pe smartphone-uri și tablete. La momentul scrierii acestui articol, aproximativ 20% dintre vizitatorii blogului meu folosesc dispozitive mobile pentru a naviga. Adică fiecare cincime vine pe site-ul meu de pe un telefon sau tabletă.
Acum câțiva ani nici nu mă gândeam la astfel de vizitatori, dar când numărul lor a depășit 10% din numărul total, am început să folosesc un layout responsive. Acest lucru a făcut posibilă afișarea corectă a conținutului pe dispozitivele mobile și creșterea loialității atât a vizitatorilor, cât și a motoarelor de căutare față de site.
Versiunea mobilă a site-ului și designul responsive nu sunt același lucru. Acest articol se va concentra pe testarea aspectului receptiv atunci când designul site-ului se modifică în funcție de rezoluția ecranului dispozitivului vizitatorului.
Pentru a vă asigura că site-ul dvs. este afișat corect pe dispozitivele mobile, trebuie să verificați, iar pentru aceasta există mai multe servicii și instrumente utile.
Verificați rapid pentru aspectul receptiv
Browser de internet popular (browser) Mozilla Firefox echipat cu instrumente încorporate pentru verificarea designului site-ului web pentru a fi potrivit pentru afișare pe dispozitive mobile. Pentru a-l folosi, accesați „Meniu” - „Dezvoltare” - „Design responsiv”. Sau doar apăsați trei taste de pe tastatură în același timp ++ [M]
Ar trebui să vedeți ceva de genul următor:
Schimbând rezoluția și orientarea ecranului, puteți verifica cum va fi afișat site-ul dvs. pentru vizitatorii de pe mobil.
Browser Google Crom are, de asemenea, suport încorporat pentru verificarea capacității de răspuns a designului site-ului. Pentru a face acest lucru, accesați meniul, selectați elementul „Instrumente suplimentare” și apoi „instrumente pentru dezvoltatori” (sau apăsați tasta ).
După aceea, faceți clic pe pictograma design responsive (sau faceți clic simultan pe tastatură ++ [M]):
În mijlocul ecranului, veți vedea cum va fi afișat site-ul dvs. pe ecranele dispozitivelor mobile:
Testarea designului mobil SEO
După cum știți, cei doi lideri mondiali în căutarea Google și Yandex au propria lor părere nemodesta despre cum ar trebui să arate site-ul pe ecranele dispozitivelor mobile. Și dacă site-ul este recunoscut ca fiind incomod pentru vizitatorii de pe dispozitive mobile, atunci acesta scade în rezultatele căutării. Deci, din punct de vedere SEO, dacă nu vrei să pierzi vizitatori de pe mobil, atunci nu ar trebui să ai doar un design responsive, ci și motoarele de căutare ar trebui să îl considere ca atare, adică potrivit pentru dispozitive mobile.
Pentru a verifica adaptabilitatea utilizând serviciul Google, accesați următoarea adresă și introduceți numele site-ului dvs.: https://www.google.com/webmasters/tools/mobile-friendly/.
Iată cum arată rezultatul verificării blogului meu:
Cu Yandex este puțin mai complicat, pentru verificare este necesar să vă înregistrați la serviciul Yandex.Webmaster și să utilizați versiunea beta a interfeței:
Servicii online pentru testarea adaptabilității
Sarcina principală a acestor servicii este de a prezenta (a arăta) cum va arăta site-ul dvs. pe un dispozitiv mobil. Există foarte multe site-uri cu astfel de funcționalități. Voi da doar câteva dintre ele. În cele mai multe cazuri, ele dublează funcționalitatea încorporată a FireFox și Chrome.
Redimensionare Google
Voi începe din nou cu Google, care are propriul serviciu de demonstrație receptiv: http://design.google.com/resizer/#
Quirktools screenfly
Al doilea serviciu frumos este http://quirktools.com/screenfly/. Vă va arăta cum ar putea arăta site-ul dvs. chiar și la televizor!
Symby.ru adaptest
Ei bine, pentru a nu jigni „producătorul intern” voi da un exemplu de alt site: http://symby.ru/adaptest/. Pe o pagină, veți vedea mai multe vizualizări simultan, cu rezoluții diferite de ecran.
Viteza versiunii mobile a site-ului
După ce v-ați asigurat că site-ul dvs. răspunde și se afișează corect pe ecranele majorității dispozitivelor, ar trebui să verificați viteza de lucru. Din nou, aplicat vizitatorilor de pe mobil.
PageSpeed Insights
Google, ca întotdeauna, este înaintea celorlalți: https://developers.google.com/speed/pagespeed/insights/. Acest serviciu vă va arăta cum arată site-ul pe ecranul telefonului și vă va oferi recomandări despre cum să optimizați codul pentru a crește viteza de încărcare pe dispozitivele mobile.
WebPageTest
Și în concluzie, voi da un exemplu de serviciu care nu numai că va arăta cum arată site-ul pe un dispozitiv mobil, ci va arăta și viteza de lucru: http://www.webpagetest.org/
concluzii
În opinia mea, în munca de zi cu zi, atunci când faceți modificări în designul site-ului, este mai ușor să utilizați capacitățile încorporate ale browserelor FireFox și Chrome. După aceea, desigur, trebuie să verificați loialitatea motoarelor de căutare față de designul dvs. Și abia atunci, pentru a liniști sufletul sau pentru a te arăta, poți folosi serviciile online.
Motoarele de căutare se străduiesc să îmbunătățească rezultatele căutării pentru utilizatorii de dispozitive mobile (smartphone-uri, tablete), astfel încât site-urile optimizate pentru diferite dimensiuni de ecran vor fi afișate mai sus decât site-urile fără o astfel de optimizare. Aceasta include și versiunile mobile ale site-urilor.
Semne ale unui site prietenos cu dispozitivele mobile:
- Conținut ușor de citit (citit fără mărire), câmpuri mari de formulare și butoane.
- Lipsa imaginilor „grele”, Flash – elemente și animație excesivă.
- Lipsa applet-urilor Java și a pluginurilor Silverlight.
- Lipsa unei bare de defilare orizontale.
- Viteza minimă de încărcare a site-ului.
- Cea mai simplă navigare.
- Metaeticheta viewportului este înregistrată.
Servicii de verificare a site-ului pentru „mobilitate”
Pentru a demonstra cum funcționează serviciile, să luăm site-ul bunilor mei parteneri - agenția de traduceri CONTEXT.
1. Google Mobile Friendly
Puteți verifica orice site prin simpla introducere a adresei acestuia în rând.
Afișează pe ecran cum arată site-ul pe un smartphone și oferă o evaluare generală a optimizării sale pentru dispozitive mobile.
Spre deosebire de alte servicii, aici puteți verifica nu orice site, ci doar pe al dvs. Adică, după ce site-ul este adăugat la interfața webmaster-ului cu confirmarea drepturilor asupra acestuia.
Serviciul afișează scorul general, verifică 6 puncte de conformitate și arată cum arată site-ul pe un smartphone.
3. Bing Checker
Se verifică optimizarea generală plus conformitatea cu 4 puncte.
De asemenea, afișează cum arată site-ul pe ecranul unui smartphone (desigur, pe ferestrele sistemului de operare, în timp ce serviciile anterioare afișau un smartphone Android =)).
4. Mobile Checker de la W3C
„Cel mai lung” dintre toate serviciile. Atât de „lung” încât nu am așteptat sfârșitul testului =)
Am așteptat 5 minute, în timp ce restul serviciilor s-au finalizat în 5-20 de secunde.
5. Responsinator
Spre deosebire de celelalte, nu dă nicio evaluare, dar arată cum arată site-ul tău pe 6 dispozitive diferite în două orientări pentru IOS și Android, ceea ce este foarte tare.
UPD1: 20.07.2017:
6. Adaptator
Serviciul sugerat în comentariile acestui articol. Eu personal nu l-am folosit, dar totul pare a fi destul de bine. Posibilitățile sunt similare cu răspunsul, dar există și o evaluare a rezultatului adaptabilității.
UPD2: 3.11.2017:
7. iloveadaptive.com
Un alt serviciu nou-nouț sugerat în comentarii. În ceea ce mă privește, puțin supraponderal și nepractic, dar acest lucru este mai mult decât plătit cu oportunități mari. Există chiar și sortare după OS.
Concluzie
Fără îndoială, adaptarea unui site pentru dispozitive mobile nu este doar un tribut adus modei și timpului, ci un atribut necesar al unui site modern care ajută nu doar utilizatorul final.
Prin urmare, pentru toți cei care doresc să fie mai aproape de client și să aibă mai multe vizite/lead-uri, recomand să-și adapteze site-urile cât mai curând posibil. Pune-mi o întrebare -
