შეამოწმეთ მობილური ადაპტაცია. მობილური მოწყობილობების ოპტიმიზაციის შემოწმება

თქვენი პროექტებისთვის, ალბათ დიდი ხნის წინ შენიშნეთ, რომ მობილური მომხმარებლების რაოდენობა მუდმივად იზრდება. ზოგისთვის ეს ტენდენცია ნაკლებად შესამჩნევია და ზოგიერთ პროექტში ეს მაჩვენებელი ყოველწლიურად ორმაგდება ან მეტს. LiveInternet– ის მონაცემების თანახმად, Runet– ზე ტრაფიკის 50% –ზე მეტი მოძრაობს მოწყობილობებზე. სხვათა შორის, ამ ბლოგის მრავალი მკითხველი დიდი ხანია წუწუნებს, რომ აქ მობილური ვერსია არ არის 🙂 რომელიც უახლოეს მომავალში გამოსწორდება.

სამობილიზაციო ამ ფაქტის უგულებელყოფა არ შეიძლება არც საძიებო პლატფორმებით. თანდათანობით, ისინი მობილურ ძიებაში უპირატესობას ანიჭებენ იმ საიტებს, რომლებიც ადაპტირებულია მომხმარებლების მოწყობილობებზე.

თავდაპირველად, Google- მა საიტებს მიანიჭა ფრაგმენტებში ნიშანი, რომელსაც ისინი სწორად აჩვენებდნენ მობილურ ტელეფონებზე.

Google– მა ასევე შექმნა ინსტრუმენტი, რომელიც ვებდიზაინერებს დაეხმარება მობილური მოწყობილობებისთვის ვებ – გვერდის ჩვენების სისწორის შემოწმებაში:
https://www.google.com/webmasters/tools/mobile-friendly/

21 აპრილს Google- მა დაიწყო ახალი ალგორითმი სახელწოდებით Mobilegeddon დასავლეთში. ახლა მობილური მეგობრული ტესტის გავლა არის SEO ფაქტორი, რომელიც Google- მა გაითვალისწინა. ჯერჯერობით, SERP- ებში მნიშვნელოვანი ცვლილებები არ მომხდარა, მაგრამ ახლავე შეგიძლიათ მოამზადოთ.

როგორ უპასუხებთ თქვენს საიტს Google- სთვის? საიდუმლო მარტივია - თქვენ უნდა დაუსვათ ამოცანა თქვენს პროგრამისტებს / განლაგების დიზაინერებს. კარგად, თუ ლოდინის დრო არ არის, მაშინ ... შეგიძლიათ გამოიყენოთ MobileCheat

სინამდვილეში, ეს არის გამოუცდელი ტექნოლოგია, არ არის ცნობილი თუ რას გამოიწვევს ის მომავალში, ამიტომ გამოიყენეთ იგი მხოლოდ საკუთარ საფრთხეში და რისკზე. მინიმუმ ტესტების სერია შეიძლება გაკეთდეს აქ.

როგორ ავუაროთ Google Test- ს MobileCheat- ით

მხოლოდ ორი რამ არის გასაკეთებელი:

1. კოდს დაამატეთ viewport მეტა-ტეგი.

2. რობოტების წვდომა CSS ფაილებზე ან საქაღალდეში, სადაც ისინი მდებარეობს, robots.txt– ის საშუალებით

მაგალითად, ამ გზით გაივლის ნაგულისხმევ ტესტს ჩემი ბლოგი:

CSS– ის დახურვისას სურათი იცვლება:

როგორც ჩანს, საიტზე არაფერი შეცვლილა, მაგრამ ტესტის შედეგები სულ სხვაა. სხვათა შორის, ზოგიერთ საიტზე მე თვითონ მომწონს CSS– ის გამორთვა, ასე რომ მათი ნახვა და გამოყენება უფრო მოსახერხებელია ... ამიტომ, ეს სრულიად გამართლებული სქემაა. მაგრამ იგი წარმოდგენილია მხოლოდ ინფორმაციული მიზნებისთვის.

Რას ფიქრობ ამის შესახებ? დაითვლის გუგლი მას რაინდთან საპასუხო ნაბიჯად თუ წინასწარ აქვს გააზრებული ყველაფერი და დაუყოვნებლივ შეამოწმებს და დაადასტურებს საიტს? 🙂

საძიებო სისტემები ცდილობენ მობილური მოწყობილობების (სმარტფონების, ტაბლეტების) მომხმარებლების ძებნის შედეგების გაუმჯობესებას, ამიტომ ეკრანის სხვადასხვა ზომისთვის ოპტიმიზირებული საიტები უფრო მაღალი ეკრანებით გამოჩნდება, ვიდრე ასეთი ოპტიმიზაციის გარეშე საიტები. ეს ასევე მოიცავს საიტების მობილური ვერსიებს.

მობილური მეგობრული საიტის ნიშნები:

  1. მოსახერხებლად იკითხება შინაარსი (წაიკითხეთ გადიდების გარეშე), დიდი ფორმის ველები და ღილაკები.
  2. "მძიმე" სურათების ნაკლებობა, Flash - ელემენტები და გადაჭარბებული ანიმაცია.
  3. Java აპლეტებისა და Silverlight დანამატების ნაკლებობა.
  4. ჰორიზონტალური გადახვევის ზოლის ნაკლებობა.
  5. ვებსაიტის ჩატვირთვის მინიმალური სიჩქარე.
  6. ყველაზე მარტივი ნავიგაცია.
  7. Viewport მეტა-ტეგი რეგისტრირებულია.

სერვისები საიტის "მობილობის" შემოწმების მიზნით

იმის დემონსტრირებისთვის, თუ როგორ მუშაობს მომსახურება, მოდით გავეცნოთ ჩემი კარგი პარტნიორების საიტს - CONTEXT მთარგმნელობითი სააგენტო.

1. Google Mobile Friendly

შეგიძლიათ შეამოწმოთ ნებისმიერი საიტი, უბრალოდ აკრიფოთ მისი მისამართი სტრიქონში.

ეკრანზე აჩვენებს თუ როგორ გამოიყურება საიტი სმარტფონზე და იძლევა მობილური მოწყობილობებისთვის მისი ოპტიმიზაციის საერთო შეფასებას.

სხვა სერვისებისგან განსხვავებით, აქ შეგიძლიათ შეამოწმოთ არა ყველა საიტი, არამედ მხოლოდ საკუთარი. ანუ, მას შემდეგ, რაც საიტი დაემატება ვებმასტერის ინტერფეისს მასზე უფლებების დადასტურებით.

სერვისი აჩვენებს საერთო რეიტინგს, ამოწმებს შესაბამისობის 6 პუნქტს და აჩვენებს თუ როგორ გამოიყურება საიტი სმარტფონზე.

3. ბინგ შემოწმება

შემოწმებულია საერთო ოპტიმიზაცია და პლუს 4 პუნქტის შესაბამისობა.

ის ასევე აჩვენებს, თუ როგორ გამოიყურება საიტი სმარტფონის ეკრანზე (რა თქმა უნდა, ოპერაციული სისტემის ფანჯრებზე, ხოლო წინა სერვისებში ანდროიდის სმარტფონი იყო ნაჩვენები \u003d)).

4. მობილური შემოწმება W3C– სგან

ყველა მომსახურების ყველაზე გრძელი. იმდენად "გრძელია", რომ ტესტის დასრულებას არ დაველოდე \u003d)

5 წუთი დაველოდე, დანარჩენი მომსახურება კი 5-20 წამში დასრულდა.

5. პასუხისმგებელი

სხვებისგან განსხვავებით, ის არანაირ შეფასებას არ იძლევა, მაგრამ აჩვენებს, თუ როგორ გამოიყურება თქვენი საიტი 6 სხვადასხვა მოწყობილობაზე ორი მიმართულებით IOS- სა და Android- ისთვის, რაც ძალიან მაგარია.

UPD1: 20.07.2017:

6. ადაპტატორი

სამსახური შემოთავაზებულია ამ სტატიის კომენტარებში. მე პირადად არ გამომიყენებია, მაგრამ, როგორც ჩანს, საკმაოდ კარგია. შესაძლებლობები მსგავსია რესპონდენტისა, მაგრამ ასევე არსებობს ადაპტაციის შედეგის შეფასება.

UPD2: 3.11.2017:

7. iloveadaptive.com

კიდევ ერთი ახალი სერვისი შემოთავაზებულია კომენტარებში. რაც შეეხება მე, ცოტა ჭარბი წონა და არაპრაქტიკული, მაგრამ ეს უფრო მეტია, ვიდრე დიდ შესაძლებლობებს იმსახურებს. დახარისხებაც კი ხდება OS– ს მიხედვით.

გამომავალი

ეჭვგარეშეა, რომ მობილური მოწყობილობებისთვის საიტის ადაპტაცია არა მხოლოდ მოდის და დროის პატივისცემაა, არამედ თანამედროვე საიტის აუცილებელი ატრიბუტია, რომელიც ეხმარება არა მხოლოდ საბოლოო მომხმარებელს.

ამიტომ, ყველას ვურჩევ, ვისაც სურს უფრო ახლოს იყოს კლიენტთან და ჰქონდეს მეტი ვიზიტი / ვიზიტი, რაც შეიძლება მალე მოახდინოს საკუთარი საიტების ადაპტირება. Დამისვი კითხვა -

ეჰ, ისევ გუგლი "გვსიამოვნებს" თავისი წესებითა და ალგორითმებით, ვებგვერდების ახალი "შაკიკით" გამოდის. ამჯერად შემოგვთავაზეს შევეცადოთ მობილური ინტერნეტისთვის შესაფერისი ალგორითმი, რომელიც შემოგვთავაზებს ადაპტირებულ საიტებს მობილურ ძიებაში და შეამცირებს "არამობილურ" რესურსებს.

როგორ იმუშავებს ეს ყველაფერი?

ეს ძალიან მარტივია: ყველა საიტი, რომელიც არ არის ადაპტირებული მობილური მოწყობილობებისთვის (Google– ის მიხედვით), უბრალოდ უგულებელყოფილი იქნება საძიებო სისტემის მიერ და გამოჩნდება მობილური ძიების ბოლო ადგილებში, ხოლო მობილური რესურსები უფრო მაღალი იქნება. მაგალითად, თუ არსებობს მსგავსი საიტის რამდენიმე საიტი, მაშინ ტაბლეტზე მომხმარებელი იპოვის მათ, ვისაც აქვს ადაპტირებული დიზაინი მობილური მოწყობილობებისთვის.

ჩემი შთაბეჭდილებები ამ ინოვაციაზე ორგვარია: ერთი მხრივ, ყველაფერი სწორია, თუ ტაბლეტზე ან სმარტფონზე ვიყენებ ძებნას, მაშინ მსურს SERP- ში ვნახო ის საიტები, რომლებიც ეკრანზე სწორად იქცევიან. მეორეს მხრივ, "მობილობის" განსაზღვრის ალგორითმი იმდენად უცნაურია, რომ მას აფიქრებინებს ასეთი "ნოუ-ჰაუს" მიზანშეწონილობის შესახებ. რა თქმა უნდა, გადავამოწმე ჩემი საიტები რეკომენდაციებისთვის და უცნაურად ვფიქრობდი Google- ის ქცევას რესურსების ანალიზის მიმართ.

აღსანიშნავია, რომ საიტების შექმნისას ყოველთვის ვამოწმებდი სხვადასხვა მოწყობილობაზე ხელით და სერვისების საშუალებით გარეგნობას, ასე რომ მშვიდად ვუყურებდი "მობილობას", მაგრამ არც ისე მარტივი აღმოჩნდა. ასე რომ, Google გირჩევთ გამოიყენოთ თქვენი რესურსები მობილური მოწყობილობის ტესტირების საშუალებით:

უბრალოდ შეიყვანეთ საიტის ან გვერდის მისამართი და დააჭირეთ ღილაკს "ანალიზი". ჩემი ყირიმის მეგობრის krimeo.ru საიტის მთავარ გვერდზე ტესტის საშუალებით შემოწმებისას დავინახე, რომ გვერდი ოპტიმიზირებულია მობილური მოწყობილობებისთვის.

გასაკვირი არ არის, რომ შაბლონი რეაგირებს და საიტი შესანიშნავად გამოიყურება სხვადასხვა მოწყობილობებზე. შემდეგ გადავწყვიტე შემემოწმებინა ჩემი საიტი და რა გამიკვირდა, როდესაც ამ რესურსმა არ ჩააბარა ტესტი.

საინტერესოა ... ამ ბლოგის შაბლონიც საპასუხო რეაქციაა, რამდენჯერმე მაქვს წვდომა როგორც ტაბლეტიდან, ასევე სმარტფონიდან ... რატომ არ მოსწონდა მაშინ Google- ს?

დავიწყე იმის გაანალიზება, თუ კონკრეტულად რა საიტზეა შესაძლებელი ასეთი შედეგის პროვოცირება. გამოსავალი იპოვნეს იქ, სადაც ამას ყველაზე ნაკლებად ველოდი: ჩემს საიტზე სტატიების ესკიზები ნაჩვენებია 720x350px მართკუთხედში და ეს (Google– ის მიხედვით) არ თვლის საიტს მობილურიდ. საკვირველია, რომ რაც უფრო დიდია სურათი (ღილაკები), მობილური მოწყობილობებისთვის მომხმარებლებისთვის თითის დარტყმა უფრო ადვილია ... მაგრამ Google სხვაგვარად ფიქრობს.

გასაკვირია ისიც, რომ სმარტფონით საიტის დათვალიერებისას, ყველა სურათი შესანიშნავად არის ადაპტირებული ეკრანის ზომაზე და არ შეიმჩნევა არანაირი „ჩამკეტი“. კარგი, ექსპერიმენტის ჩატარება გადავწყვიტე და სურათების ზომა ადაპტაციური გავხადე, ე.ი. რაც უფრო მცირეა მოწყობილობის ეკრანის ზომა, მით უფრო მცირეა გამოსახულება საიტზე. შეეცადეთ აიღოთ ბრაუზერის კუთხე მაუსით და დააპატაროთ იგი ..
ახლა ზოგიერთ ვებმასტერს შეიძლება ჰქონდეს კიდევ ერთი პრობლემა: თუ Google ასე მოიქცა დიდი ესკიზებით, მაშინ სტატიების ილუსტრაციებთან დაკავშირებით სიტუაცია იგივე იქნება და ეს ბევრად უფრო მნიშვნელოვანია, ვიდრე მთავარ გვერდზე. ამისათვის თქვენ უნდა გააკეთოთ გამოსახულებები საპასუხო საიტისთვის, js- სკრიპტის გაშვების საშუალებით, მაგრამ ეს ყველაფერი არ არის, cache საქაღალდე და სურათების შენახვის წესი უნდა იყოს დუბლირებული .htaccess

მართლაც, სტატიები, რომლებიც დიდი ზომის სურათებს შეიცავს, არ ჩააბარებს Google- ის ტესტს და მათ, ვისაც უფრო მცირე ზომის ილუსტრაცია აქვთ, სრულად მობილური ოპტიმიზირებულად მიიჩნევა. მე არ მივცემ ეკრანულ კადრებს - უბრალოდ აიღეთ ცალკე გამოცემის URL და შეამოწმეთ იგი "მობილურობისთვის".

სხვაგან რატომ ხედავს Googlebot, რომ ბლოგი არ არის ოპტიმიზირებული მობილურით

იმის გამო, რომ robots.txt- ს უამრავი ზედმეტი შეზღუდვა აქვს.

ავტომატურად წარმოქმნილი WordPress ვირტუალური robots.txt ფაილში მხოლოდ ერთი შეზღუდვა არსებობს:

აკრძალვა: / wp-admin

აი, რას წერს Google იმის შესახებ, თუ რატომ გააკეთეს WordPress- ის შემქმნელებმა robots.txt ასე მოსწონს:

იმის უზრუნველსაყოფად, რომ გვერდები ინდექსირებულია და სწორად არის ნაჩვენები, თქვენ უნდა მიანიჭოთ Googlebot წვდომას თქვენს საიტზე JavaScript, CSS და გრაფიკებზე. Googlebot- მა უნდა დაინახოს თქვენი საიტი, როგორც ჩვეულებრივი მომხმარებელი. თუ robots.txt ფაილი არ იძლევა ამ რესურსებზე წვდომას, მაშინ Google ვერ შეძლებს შინაარსის სწორად გაანალიზებას და ინდექსირებას. ამან შეიძლება შეამციროს თქვენი საიტის ძებნის რანჟირება.

მომხმარებლის აგენტი: * აკრძალვა: / wp-admin აკრძალვა: / wp- მოიცავს დაშვება: / wp-content / plugins მასპინძელი: Your_site საიტის რუქა: http: // Your_site / sitemap_index.xml (საიტის რუქა WordPress SEO- ს მიერ Yoast) მომხმარებელი -agent: Googlebot-Image Allow: / wp-content / uploads / მომხმარებლის აგენტი: YandexImages Allow: / wp-content / uploads /

იმედი მაქვს, რომ Google გააუმჯობესებს გადამოწმების ალგორითმს და რეალურ შედეგებს მისცემს, რადგან რეალურ ცხოვრებაში ტაბლეტებსა და სმარტფონებზე ბევრი საიტი შესანიშნავად გამოიყურება.

2015 წლის 21 აპრილიდან ასეთი სიურპრიზის ნახვა შეგვიძლია მობილური ალგორითმის სახით. გუგლი "გვაფუჭებს"). მშვიდად ცხოვრობთ? აი პანდა თქვენთვის! რამდენიმე? აი პინგვინიც! გაუგზავნე? მიიღეთ მობილური ტელეფონი!

გამომავალი

გადაწყვიტეთ რა გააკეთოთ ამ ინფორმაციასთან დაკავშირებით, გადადით თუ არა საპასუხო დიზაინზე, ეს არის ყველა ვებდიზაინის პირადი საკითხი, მაგრამ ეს ახალი წესები უკვე ამოქმედდა.

სხვათა შორის, ”მობილური მოწყობილობებისთვის ოპტიმიზირებულია” არა მხოლოდ საპასუხო ვებ – გვერდის დიზაინი, ცალკე მობილური ვერსია და მოდული WordPress– ისთვის ასევე შესაფერისია, მთავარია, რომ საიტი ნებისმიერ მოწყობილობაზე სწორი იყოს. გაითვალისწინეთ ეს.

დღეს უკვე აღარ არის საჭირო ვინმეს დარწმუნება საიტის მობილური ვერსიის საჭიროებაში. ყოველივე ამის შემდეგ, ყოველდღე უფრო და უფრო მეტი ვიზიტორი მოდის სმარტფონებიდან და ტაბლეტებიდან. ამ სტატიის მომზადების დროს, ჩემი ბლოგის ვიზიტორების დაახლოებით 20% იყენებს მობილური მოწყობილობებს ათვალიერებს. ეს არის, ყოველი მეხუთე სტუმრობს ჩემს ვებსაიტს ტელეფონიდან ან ტაბლეტიდან.

რამდენიმე წლის წინ არც კი ვფიქრობდი ასეთ ვიზიტორებზე, მაგრამ როდესაც მათმა რაოდენობამ 10% -ს გადააჭარბა, საპასუხო განლაგების გამოყენება დავიწყე. ამან შესაძლებელი გახადა მობილურ მოწყობილობებზე შინაარსის სწორად ჩვენება და საიტისადმი ვიზიტორებისა და საძიებო სისტემების ერთგულება.

საიტის მობილური ვერსია და საპასუხო დიზაინი ერთნაირი არ არის. ეს სტატია ყურადღებას გაამახვილებს საპასუხო განლაგების ტესტირებაზე, როდესაც საიტის დიზაინი შეიცვლება, რაც დამოკიდებულია ვიზიტორის აპარატის ეკრანის გარჩევადობაზე.

იმისთვის რომ დარწმუნდეთ, რომ თქვენი საიტი სწორად არის ნაჩვენები მობილურ მოწყობილობებზე, უნდა შეამოწმოთ და ამისთვის არსებობს რამდენიმე სასარგებლო სერვისი და ინსტრუმენტი.

საპასუხო განლაგების სწრაფი შემოწმება

პოპულარული ინტერნეტ ბრაუზერი (ბრაუზერი) Mozilla Firefox ჩამონტაჟებული ხელსაწყოებით ვებსაიტის დიზაინის შემოწმება მობილური მოწყობილობებისთვის გამოსაფენად. მისი გამოსაყენებლად გადადით "მენიუში" - "განვითარება" - "საპასუხო დიზაინი". ან უბრალოდ დააჭირეთ კლავიშზე ერთდროულად სამ ღილაკს ++ [M]

თქვენ უნდა ნახოთ შემდეგი რამ:


ეკრანის გარჩევადობისა და ორიენტაციის შეცვლით, თქვენ შეგიძლიათ შეამოწმოთ, თუ როგორ გამოჩნდება თქვენი საიტი მობილური სტუმრებისთვის.

Google Browser ქრომი ასევე აქვს ჩაშენებული მხარდაჭერა საიტის დიზაინის რეაგირების შემოწმების მიზნით. ამისათვის გადადით მენიუში, აირჩიეთ "დამატებითი საშუალებები" და შემდეგ "დეველოპერული საშუალებები" (ან დააჭირეთ ღილაკს ).

ამის შემდეგ, დააჭირეთ საპასუხო დიზაინის ხატულას (ან ერთდროულად დააჭირეთ კლავიატურას) ++ [M]):

ეკრანის შუა ნაწილში ნახავთ, თუ როგორ გამოჩნდება თქვენი საიტი მობილური მოწყობილობების ეკრანებზე:

მობილური დიზაინის SEO ტესტირება

როგორც მოგეხსენებათ, მსოფლიო ძიების ორ ლიდერს Google და Yandex- ს აქვთ საკუთარი მოკრძალებული აზრი იმის შესახებ, თუ როგორ უნდა გამოიყურებოდეს საიტი მობილური მოწყობილობების ეკრანებზე. და თუ საიტი მობილური მომხმარებლებისთვის არასასიამოვნოა აღიარებული, ის ძიების შედეგებში ითიშება. ასე რომ, SEO- ს თვალსაზრისით, თუ არ გსურთ მობილური ვიზიტორების დაკარგვა, მაშინ არა მხოლოდ საპასუხო დიზაინი უნდა გქონდეთ, არამედ საძიებო სისტემებმა ის ასევე უნდა განიხილონ, როგორც ასეთი, მობილური მოწყობილობებისთვის შესაფერისი.

Google სერვისის შესაბამისობის შესამოწმებლად გადადით შემდეგ მისამართზე და ჩაწერეთ თქვენი საიტის სახელი: https://www.google.com/webmasters/tools/mobile-friendly/.

ასე გამოიყურება ჩემი ბლოგის შემოწმების შედეგი:

Yandex– ით ეს ცოტა უფრო რთულია, გადამოწმების მიზნით, უნდა დარეგისტრირდეთ Yandex.Webmaster სერვისში და გამოიყენოთ ინტერფეისის ბეტა ვერსია:

ონლაინ სერვისები ადაპტაციის შესამოწმებლად

ამ სერვისების მთავარი ამოცანაა წარმოაჩინონ (აჩვენონ) როგორ გამოიყურება თქვენი საიტი მობილურ მოწყობილობაზე. უამრავი ფუნქციონირების საიტია. მე მხოლოდ რამდენიმე მათგანს მივცემ. უმეტეს შემთხვევაში, ისინი დუბლირებას ახდენენ FireFox- ის და Chrome- ის ჩაშენებული ფუნქციონირების შესახებ.

Google resizer

თავიდან დავიწყებ Google- ით, რომელსაც აქვს საკუთარი რეაგირების სადემონსტრაციო სერვისი: http://design.google.com/resizer/#

Quirktools ეკრანმფრენა

მეორე ლამაზი სერვისი არის http://quirktools.com/screenfly/. ეს გაჩვენებთ თუ როგორ შეიძლება გამოიყურებოდეს თქვენი საიტი თუნდაც ტელევიზორში!

Symby.ru ადაპტატი

ისე, რომ "შინაური მწარმოებელი" არ შეურაცხყოფს, მე მოვიყვან სხვა საიტის მაგალითს: http://symby.ru/adaptest/. ერთ გვერდზე, თქვენ ნახავთ ერთდროულად რამდენიმე ხედს, ეკრანის სხვადასხვა გარჩევადობით.

საიტის მობილური ვერსიის სიჩქარე

მას შემდეგ რაც დავრწმუნდებით, რომ თქვენი საიტი რეაგირებს და მოწყობილობების უმეტესობის ეკრანებზე სწორად ჩანს, უნდა შეამოწმოთ მისი სიჩქარე. ისევ, მობილური მომხმარებლებისთვის.

PageSpeed \u200b\u200bInsights

Google, როგორც ყოველთვის, უსწრებს დანარჩენებს: https://developers.google.com/speed/pagespeed/insights/. ეს სერვისი გაჩვენებთ თუ როგორ გამოიყურება საიტი ტელეფონის ეკრანზე და მოგცემთ რეკომენდაციებს, თუ როგორ უნდა მოახდინოთ კოდის ოპტიმიზაცია მობილური მოწყობილობებისთვის დატვირთვის სიჩქარის გაზრდის მიზნით.

ვებგვერდის ტესტი

დასასრულს, მე მოვიყვან სერვისის მაგალითს, რომელიც არა მხოლოდ აჩვენებს თუ როგორ გამოიყურება საიტი მობილურ მოწყობილობაზე, არამედ აჩვენებს მუშაობის სიჩქარეს: http://www.webpagetest.org/

დასკვნები

ჩემი აზრით, ყოველდღიურ მუშაობაში, საიტის დიზაინში ცვლილებების შეტანისას, უფრო ადვილია FireFox და Chrome ბრაუზერების ჩამონტაჟებული შესაძლებლობების გამოყენება. ამის შემდეგ, რა თქმა უნდა, თქვენ უნდა შეამოწმოთ საძიებო სისტემების ერთგულება თქვენი დიზაინის მიმართ. და მხოლოდ ამის შემდეგ, სულის დასამშვიდებლად ან საჩვენებლად შეგიძლიათ გამოიყენოთ ონლაინ სერვისები.

ბევრ ქვეყანაში სმარტფონებს უფრო ხშირად იყენებენ ინტერნეტში, ვიდრე კომპიუტერები. ამიტომ, ძალიან მნიშვნელოვანია საიტის ადაპტირება მობილური მოწყობილობებისთვის. შეიტყვეთ, მოსახერხებელია თუ არა თქვენი გვერდები სმარტფონების მომხმარებლებისთვის სპეციალური საშუალებით Search Console- ში.

გამოყენებით

მარტივია იმის შემოწმება, არის თუ არა გვერდი სმარტფონის სანახავად მოსახერხებელი: უბრალოდ მიუთითეთ მისი სრული URL. შემოწმებას, როგორც წესი, ერთ წუთზე ნაკლები დრო სჭირდება. თუ გვერდზე არის გადამისამართებები, მათი დამუშავებაც მოხდება.

შემოწმების შედეგების საფუძველზე ნახავთ თუ როგორ გამოიყურება გვერდი სმარტფონში და გაიგებთ თუ რა პრობლემები შეიძლება წარმოიშვას მისი ნახვის დროს. ყველაზე ხშირად ეს არის მცირე ზომის ბეჭდვა (ძნელად იკითხება მცირე ეკრანზე) და Flash ელემენტები (არ არის მხარდაჭერილი უმეტეს მობილური მოწყობილობებისთვის).

Viewport მეტა თეგის მნიშვნელობა არ არის დაყენებული

გვერდის კოდი არ აკონკრეტებს ხედვის პორტის თვისებას, რომელიც ბრაუზერს ეუბნება, თუ როგორ უნდა სწორად შეცვალოს გვერდის ელემენტები ზომის შესატყვისი მოწყობილობის ეკრანის ზომაზე. თქვენი საიტის ეკრანის სხვადასხვა ზომებზე სწორად გამოსახვის მიზნით, შეცვალეთ ხედვის პორტი Viewport მეტა-თეგის გამოყენებით. ამის შესახებ დეტალური ინფორმაციისთვის იხილეთ ჩვენი სახელმძღვანელოს Responsive Web Design საფუძვლები.

Viewport მეტა-თეგს უნდა ჰქონდეს მოწყობილობის სიგანე

შეუძლებელია გვერდის ადაპტირება სხვადასხვა ზომის ეკრანებისთვის, რადგან მის კოდში მითითებულია ფიქსირებული სიგანის ხედვის პორტის თვისება. ამ შემთხვევაში, თქვენ უნდა გამოიყენოთ მგრძნობიარე დიზაინი, რათა შეცვალოთ გვერდის მასშტაბის შეცვლა ეკრანზე.

ეკრანზე ფართო შინაარსი

ეს ანგარიში განსაზღვრავს გვერდებს, რომლებიც ტექსტისა და სურათების სანახავად საჭიროებს ჰორიზონტალურ გადახვევას. ეს საკითხი დგება მაშინ, როდესაც CSS სტილის ზომები დაყენებულია აბსოლუტურ მნიშვნელობად ან როდესაც გამოიყენება სურათები, რომლებიც შექმნილია ბრაუზერის ფანჯრის კონკრეტული სიგანისთვის. დარწმუნდით, რომ CSS ელემენტების სიგანე და პოზიციონირების მნიშვნელობები ფარდობითია და გამოსახულებები მასშტაბურია. ამის შესახებ დეტალური ინფორმაციისთვის იხილეთ ჩვენი სახელმძღვანელოს ნახვის არეალის შინაარსის ზომები.

ძალიან მცირე ზომის ბეჭდვა

ამ ანგარიშში ჩამოთვლილია მცირე ზომის ბეჭდვით გვერდები, რომელთა წაკითხვისთვის მომხმარებლებმა უნდა გამოიყენონ მასშტაბის ჟესტები. ხედის პორტის დაყენების შემდეგ, თქვენ უნდა განსაზღვროთ შრიფტების ზომები ისე, რომ ისინი სწორად არიან ნაჩვენები მასში.

ინტერაქტიული ელემენტები ძალიან ახლოსაა

ამ ანგარიშში ჩამოთვლილია გვერდები, სადაც ნავიგაციის საგნები იმდენად ახლოს არის ერთმანეთთან, რომ მომხმარებლისთვის რთულია ერთი შეხება სხვებისთვის შეხების გარეშე. იზრუნეთ ღილაკების, ბმულების და ა.შ. ოპტიმალურ ზომებზე და მათ შორის მანძილზე ისე, რომ მობილური მოწყობილობების მომხმარებლები კომფორტულად ურთიერთობდნენ მათთან.

Რა არის შემდეგი?

  • როგორ გავარკვიოთ, რა პრობლემები შეგვჩნია მობილური მოწყობილობებისთვის თქვენი საიტის ნახვისას, სპეციალური ანგარიშის გამოყენებით (ამისათვის თქვენ უნდა გადაამოწმოთ საიტის საკუთრება თქვენს Search Console ანგარიშში)
  • როგორ ხდება თქვენი საიტის ოპტიმიზაცია მობილური მოწყობილობებისთვის (WordPress- ის, Joomla- ს გვერდების და სხვა შინაარსის მართვის სისტემებისთვის)