دوستان، عصر بخیر. امروز کمی از ابزارهای تبلیغاتی کنار می‌روم و یک ستون وبلاگ جدید راه‌اندازی می‌کنم. نام آن "وب مستر" است و شامل مطالب مفیدی در مورد بهبود عملکرد و کیفیت سایت، صفحات فرود خواهد بود. من با مروری بر یک ابزار جالب برای بررسی یک وب سایت برای تحرک شروع خواهم کرد.
بررسی سرعت سایت با گوگل
گوگل 2 ابزار برای این کار ارائه می دهد.
# 1 Page Speed Insights
فکر کنم خوب میشناسیش یک لینک به سایت خود وارد کنید، دکمه "Analyze" را فشار دهید و نتیجه را در قالب دو تب دریافت کنید.
برگه "برای موبایل" شامل گزارشی از سرعت بارگذاری یک سایت برای دستگاه های تلفن همراه و - مهم است! - رتبه راحتیسایت برای گوشی های هوشمند تب "برای کامپیوترها"، به ترتیب، همان تجزیه و تحلیل برای دسکتاپ است.
بهترین بخش این است که این سرویس به شما امکان دانلود را می دهد بهینه شدهتصاویر، css و اسکریپت ها برای استفاده در سایت خود. در اینجا یک کمک رایگان از طرف Google آمده است.
همانطور که از اسکرین شات می بینید، من با نسخه موبایل مشکل جدی دارم. حال شما چطور است؟
# 2 Testmysite.Withgoogle
در واقع، این همان ابزار است، فقط یک لفاف زیبا دارد. من این سرویس را روز گذشته کشف کردم و توسط فرم گزارش رشوه دریافت کردم.
هنگامی که پیوندی را به سایت وارد می‌کنید و روی «بررسی» کلیک می‌کنید، این سرویس نتیجه را در قالب یک صفحه فرود پویا کامل ارائه می‌کند، که در آن به طور خلاصه و قانع‌کننده به شما می‌گوید اوضاع سایت چگونه است و به شما پیشنهاد می‌دهد. دانلود گزارش کامل
البته من گزارش کامل را خواستم و در عرض چند دقیقه از طریق پست دریافت کردم. معقول به نظر می رسد، چندین صفحه دستورالعمل مفید با پیوندهایی به مواد خاص:
قابل توجه است که اگر همان سایت را تجزیه و تحلیل کنید، ارقام این ابزارها کمی متفاوت خواهد بود. با این حال، آنها بر روی همان فناوری کار می کنند.
اینگونه است که در عرض چند ثانیه نه تنها می توانید سایت را از نظر تحرک بررسی کنید و سرعت بارگذاری را بررسی کنید - بلکه یک گزارش کامل با محتوای بهینه شده را نیز دانلود کنید. رایگان است. از گوگل
خوب، وضعیت شما با تحرک چگونه است؟
برای پروژه های خود، احتمالا مدت ها پیش متوجه شده اید که تعداد کاربران موبایل به طور مداوم در حال افزایش است. برای برخی، این روند کمتر قابل توجه است و در برخی پروژه ها این رقم هر سال دو یا بیشتر می شود. بر اساس داده های LiveInternet، بیش از 50 درصد از ترافیک در Runet توسط دستگاه های تلفن همراه به حساب می آید. ضمناً بسیاری از خوانندگان این وبلاگ مدتها است که از عدم وجود نسخه موبایل در اینجا شکایت دارند 🙂 که البته در آینده نزدیک برطرف خواهد شد.
این واقعیت بسیج را نیز نمی توان توسط پلتفرم های جستجو نادیده گرفت. به تدریج، آنها در جستجوی تلفن همراه به آن دسته از سایت‌هایی که با دستگاه‌های کاربران سازگار هستند، مزایایی می‌دهند.
در ابتدا، گوگل قطعاتی را به سایت ها می داد که آنها به درستی در تلفن های همراه نمایش داده می شدند.
همچنین، گوگل ابزاری برای کمک به مدیران وب سایت برای بررسی صحت نمایش وب سایت در دستگاه های تلفن همراه ایجاد کرده است:
https://www.google.com/webmasters/tools/mobile-friendly/
در 21 آوریل، گوگل الگوریتم جدیدی به نام Mobilegeddon را در غرب راه اندازی کرد. اکنون گذراندن موفقیت آمیز آزمون Mobile Friendly یکی از فاکتورهای SEO است که توسط گوگل مورد توجه قرار گرفته است. تاکنون هیچ تغییر عمده ای در SERP صورت نگرفته است، اما می توانید همین الان آماده شوید.
چگونه یک وب سایت را برای گوگل ریسپانسیو کنیم؟ راز ساده است - شما باید یک وظیفه برای برنامه نویسان / طراحان طرح بندی خود تعیین کنید. خوب، اگر زمانی برای انتظار نیست، پس ... می توانید از MobileCheat استفاده کنید 🙂
در واقع، این یک فناوری آزمایش نشده است، مشخص نیست که در آینده به چه چیزی منجر خواهد شد، بنابراین فقط با خطر و خطر خود از آن استفاده کنید. حداقل یک سری آزمایش در اینجا قابل انجام است.
چگونه با MobileCheat تست گوگل را دور بزنیم
فقط دو کار وجود دارد:
1. متا تگ viewport را به کد اضافه کنید.
2. دسترسی ربات را به فایل‌های CSS یا پوشه‌ای که در آن قرار دارند را از طریق robots.txt ببندید.
برای مثال، اینگونه است که وبلاگ من آزمون پیش فرض را می گذراند:
وقتی CSS را می بندید، تصویر تغییر می کند:
به نظر می رسد که چیزی در سایت تغییر نکرده است، اما نتایج تست کاملا متفاوت است. به هر حال ، در برخی از سایت ها من خودم دوست دارم CSS را غیرفعال کنم تا مشاهده و استفاده از آنها راحت تر باشد 🙂 بنابراین ، این یک طرح کاملاً موجه است. اما فقط برای مقاصد اطلاعاتی ارائه شده است.
چه فکری در این باره دارید؟ آیا گوگل این را به عنوان یک حرکت متقابل با یک شوالیه به حساب می‌آورد یا اینکه همه چیز را از قبل اندیشیده است و بلافاصله سایت را چک می‌کند و مات می‌کند؟ 🙂
در بسیاری از کشورها، تلفن های هوشمند بیشتر از رایانه ها برای گشت و گذار در اینترنت استفاده می شوند. بنابراین، تطبیق سایت برای دستگاه های تلفن همراه بسیار مهم است. با استفاده از یک ابزار ویژه در کنسول جستجو، ببینید آیا صفحات شما برای کاربران گوشی های هوشمند مناسب است یا خیر.
استفاده
بررسی اینکه آیا صفحه برای مشاهده در گوشی هوشمند مناسب است یا خیر آسان است: فقط URL کامل آن را مشخص کنید. تایید معمولا کمتر از یک دقیقه طول می کشد. در صورت وجود تغییر مسیر در صفحه، آنها نیز پردازش خواهند شد.
بر اساس نتایج بررسی، خواهید دید که صفحه در یک گوشی هوشمند چگونه به نظر می رسد و متوجه خواهید شد که چه مشکلاتی ممکن است هنگام مشاهده آن ایجاد شود. اغلب این عناصر چاپ کوچک (در یک صفحه کوچک خواندن آن دشوار است) و عناصر فلش (در اکثر دستگاه های تلفن همراه پشتیبانی نمی شوند) هستند.
مقدار متا تگ Viewport تنظیم نشده است
کد صفحه ویژگی viewport را مشخص نمی‌کند، که به مرورگر می‌گوید چگونه به درستی اندازه عناصر صفحه را متناسب با اندازه صفحه دستگاه تغییر دهد. برای اطمینان از اینکه سایت شما به درستی در اندازه های مختلف صفحه نمایش داده می شود، با استفاده از متا تگ viewport، نمای را تنظیم کنید. برای کسب اطلاعات بیشتر در مورد این، به بخش اصول طراحی وب واکنشگرا در راهنمای ما مراجعه کنید.
متا تگ viewport باید دارای مقدار عرض دستگاه باشد
تطبیق صفحه برای صفحات با اندازه های مختلف غیرممکن است، زیرا ویژگی viewport با عرض ثابت در کد آن مشخص شده است. در این مورد، باید با تنظیم مقیاس صفحه برای تناسب با صفحه، یک طراحی واکنش گرا اعمال کنید.
محتوا گسترده تر از صفحه نمایش است
این گزارش صفحاتی را شناسایی می کند که برای مشاهده متن و تصاویر به پیمایش افقی نیاز دارند. این مشکل زمانی رخ می‌دهد که ابعاد در سبک‌های CSS روی مقادیر مطلق تنظیم می‌شوند یا زمانی که از تصاویری استفاده می‌شود که برای عرض خاصی از پنجره مرورگر طراحی شده‌اند. مطمئن شوید که مقادیر عرض و موقعیت عناصر CSS نسبی هستند و تصاویر مقیاس بندی شده اند. برای جزئیات در این مورد، بخش اندازه های محتوا برای نمای پورت را در آموزش ما ببینید.
فونت خیلی کوچک
این گزارش صفحاتی را با حروف کوچک فهرست می کند که کاربران برای خواندن آنها باید از حرکات زوم استفاده کنند. پس از تنظیم ویوپورت، باید اندازه فونت ها را مشخص کنید تا به درستی در آن ظاهر شوند.
عناصر تعاملی خیلی نزدیک هستند
این گزارش صفحاتی را فهرست می‌کند که آیتم‌های ناوبری آنقدر به هم نزدیک هستند که لمس برخی از آنها بدون دست زدن به دیگران برای کاربر دشوار است. اطمینان حاصل کنید که دکمه ها، پیوندها و موارد مشابه، و فاصله و فاصله برای تعامل کاربران تلفن همراه بهینه باشد.
بعدش چی؟
- چگونه با استفاده از گزارش ویژه متوجه شویم که چه مشکلاتی در مشاهده سایت خود در دستگاه های تلفن همراه پیدا کرده ایم (برای این کار باید مالکیت سایت را در حساب کنسول جستجوی خود تأیید کنید)
- نحوه بهینه سازی سایت خود برای دستگاه های تلفن همراه (برای صفحات در وردپرس، جوملا! و سایر سیستم های مدیریت محتوا)
امروزه دیگر نیازی به متقاعد کردن کسی در مورد نیاز به نسخه موبایلی سایت نیست. از این گذشته، هر روز تعداد بازدیدکنندگان از گوشی های هوشمند و تبلت ها بیشتر و بیشتر می شود. در زمان نوشتن این مقاله، حدود 20 درصد از بازدیدکنندگان وبلاگ من از دستگاه های تلفن همراه برای مرور استفاده می کنند. یعنی هر پنجم از گوشی یا تبلت به سایت من می آید.
چندین سال پیش من حتی به چنین بازدیدکنندگانی فکر نمی کردم، اما وقتی تعداد آنها از 10٪ از تعداد کل فراتر رفت، شروع به استفاده از یک طرح پاسخگو کردم. این امر امکان نمایش صحیح محتوا در دستگاه های تلفن همراه و افزایش وفاداری بازدیدکنندگان و موتورهای جستجو به سایت را فراهم کرد.
نسخه موبایلی سایت و طراحی ریسپانسیو یکسان نیستند. هنگامی که طراحی سایت بسته به وضوح صفحه نمایش دستگاه بازدید کننده تغییر می کند، این مقاله بر روی آزمایش طرح بندی واکنش گرا تمرکز می کند.
برای اطمینان از اینکه سایت شما به درستی در دستگاه های تلفن همراه نمایش داده می شود، باید بررسی کنید و برای این کار چندین سرویس و ابزار مفید وجود دارد.
بررسی سریع برای طرح پاسخگو
مرورگر اینترنتی محبوب (مرورگر) موزیلا فایرفاکسمجهز به ابزارهای داخلی برای بررسی طراحی وب سایت برای مناسب بودن برای نمایش در دستگاه های تلفن همراه. برای استفاده از آن، به "منو" - "توسعه" - "طراحی پاسخگو" بروید. یا فقط سه کلید روی صفحه کلید را همزمان فشار دهید ++ [M]
شما باید چیزی شبیه به زیر را ببینید:
با تغییر وضوح و جهت صفحه نمایش، می توانید بررسی کنید که سایت شما چگونه برای بازدیدکنندگان موبایل نمایش داده می شود.
مرورگر گوگل کرومهمچنین دارای پشتیبانی داخلی برای بررسی پاسخگویی طراحی سایت است. برای انجام این کار، به منو بروید، آیتم "ابزارهای اضافی" و سپس "ابزار توسعه دهنده" را انتخاب کنید (یا کلید را فشار دهید ).
پس از آن، روی نماد طراحی واکنشگرا کلیک کنید (یا به طور همزمان روی صفحه کلید کلیک کنید ++ [M]):
در وسط صفحه، نحوه نمایش سایت شما بر روی صفحه نمایش دستگاه های تلفن همراه را مشاهده خواهید کرد:
تست طراحی موبایل سئو
همانطور که می دانید، دو رهبر جستجوی جهان، گوگل و یاندکس، نظر غیرقابل قبول خود را در مورد نحوه نمایش سایت در صفحه نمایش دستگاه های تلفن همراه دارند. و اگر سایت برای بازدیدکنندگان تلفن همراه ناخوشایند شناخته شود، در نتایج جستجو پایین می آید. بنابراین، از نظر سئو، اگر نمی‌خواهید بازدیدکنندگان موبایل را از دست بدهید، نه تنها باید یک طراحی واکنشگرا داشته باشید، بلکه موتورهای جستجو نیز باید آن را به این صورت، یعنی برای دستگاه‌های موبایل مناسب بدانند.
برای بررسی سازگاری با استفاده از سرویس گوگل، به آدرس زیر بروید و نام سایت خود را تایپ کنید: https://www.google.com/webmasters/tools/mobile-friendly/.
نتیجه بررسی وبلاگ من به این صورت است:
با Yandex کمی پیچیده تر است، برای تأیید لازم است در سرویس Yandex.Webmaster ثبت نام کنید و از نسخه بتا رابط استفاده کنید:
خدمات آنلاین برای تست سازگاری
وظیفه اصلی این خدمات ارائه (نشان دادن) نحوه ظاهر سایت شما در دستگاه تلفن همراه است. تعداد زیادی سایت با چنین عملکردی وجود دارد. من فقط تعدادی از آنها را می دهم. در بیشتر موارد، آنها عملکرد داخلی فایرفاکس و کروم را کپی می کنند.
تغییر اندازه گوگل
من دوباره با Google شروع می‌کنم، که سرویس نمایش واکنش‌گرای خود را دارد: http://design.google.com/resizer/#
Quirktools screenfly
دومین سرویس زیبا http://quirktools.com/screenfly/ است. این به شما نشان می دهد که سایت شما حتی در تلویزیون چگونه به نظر می رسد!
Symby.ru adaptest
خوب، برای اینکه "تولید کننده داخلی" را توهین نکنم، نمونه ای از سایت دیگر را ارائه می کنم: http://symby.ru/adaptest/. در یک صفحه، چندین نما را به طور همزمان با وضوح صفحه نمایش متفاوت خواهید دید.
سرعت نسخه موبایل سایت
پس از اینکه مطمئن شدید که سایت شما ریسپانسیو است و روی صفحه نمایش اکثر دستگاه ها به درستی نمایش داده می شود، باید سرعت کار آن را بررسی کنید. باز هم برای بازدیدکنندگان موبایل اعمال شد.
PageSpeed Insights
گوگل مثل همیشه جلوتر از بقیه است: https://developers.google.com/speed/pagespeed/insights/. این سرویس به شما نشان می دهد که چگونه سایت روی صفحه گوشی به نظر می رسد و توصیه هایی در مورد نحوه بهینه سازی کد برای افزایش سرعت بارگذاری در دستگاه های تلفن همراه ارائه می دهد.
WebPageTest
و در پایان، من نمونه ای از خدماتی را ارائه می کنم که نه تنها نحوه ظاهر سایت را در یک دستگاه تلفن همراه نشان می دهد، بلکه سرعت کار آن را نیز نشان می دهد: http://www.webpagetest.org/
نتیجه گیری
به نظر من در کارهای روزمره هنگام ایجاد تغییرات در طراحی سایت، استفاده از قابلیت های داخلی مرورگرهای فایرفاکس و کروم راحت تر است. پس از آن، البته، باید وفاداری موتورهای جستجو را به طراحی خود بررسی کنید. و تنها پس از آن، برای آرام کردن روح یا خودنمایی، می توانید از خدمات آنلاین استفاده کنید.
موتورهای جستجو برای بهبود نتایج جستجو برای کاربران دستگاه‌های تلفن همراه (تلفن‌های هوشمند، تبلت‌ها) تلاش می‌کنند، بنابراین سایت‌هایی که برای اندازه‌های مختلف صفحه نمایش بهینه‌سازی شده‌اند، بالاتر از سایت‌های بدون چنین بهینه‌سازی نمایش داده می‌شوند. این شامل نسخه های موبایلی سایت ها نیز می شود.
نشانه های یک سایت سازگار با موبایل:
- محتوای آسان برای خواندن (قابل خواندن بدون بزرگنمایی)، فیلدها و دکمه های فرم بزرگ.
- عدم وجود تصاویر "سنگین"، فلش - عناصر و انیمیشن بیش از حد.
- عدم وجود اپلت های جاوا و پلاگین های Silverlight.
- عدم وجود نوار اسکرول افقی.
- حداقل سرعت بارگذاری وب سایت
- ساده ترین ناوبری.
- متا تگ viewport ثبت شده است.
خدمات برای بررسی سایت برای "تحرک"
برای نشان دادن نحوه عملکرد خدمات، بیایید از سایت شرکای خوب من - آژانس ترجمه CONTEXT استفاده کنیم.
1. Google Mobile Friendly
شما می توانید هر سایتی را به سادگی با تایپ آدرس آن در خط بررسی کنید.
نحوه ظاهر سایت در تلفن هوشمند را روی صفحه نمایش می دهد و ارزیابی کلی از بهینه سازی آن برای دستگاه های تلفن همراه ارائه می دهد.
برخلاف سایر خدمات، در اینجا می توانید نه هر سایت، بلکه فقط سایت خود را بررسی کنید. یعنی پس از اینکه سایت با تایید حقوق مربوط به آن به رابط وب مستر اضافه شد.
این سرویس امتیاز کلی را نمایش می دهد، 6 امتیاز مطابقت را بررسی می کند و نشان می دهد که سایت در یک گوشی هوشمند چگونه به نظر می رسد.
3. جستجوگر بینگ
بهینه سازی کلی به علاوه مطابقت با 4 امتیاز بررسی می شود.
همچنین نحوه ظاهر سایت را بر روی صفحه نمایش گوشی هوشمند نشان می دهد (البته در ویندوزهای سیستم عامل، در حالی که سرویس های قبلی یک تلفن هوشمند اندرویدی را نشان می دادند =)).
4. جستجوگر موبایل از W3C
"طولانی ترین" از همه خدمات. آنقدر "طولانی" که منتظر پایان آزمون نشدم =)
من 5 دقیقه صبر کردم، در حالی که بقیه خدمات در 5-20 ثانیه تمام شد.
5. پاسخگو
بر خلاف بقیه، هیچ رتبه بندی نمی دهد، اما ظاهر سایت شما را در 6 دستگاه مختلف در دو جهت برای IOS و Android نشان می دهد که بسیار جالب است.
UPD1: 2017/07/20:
6. آداپتور
این سرویس در نظرات این مقاله پیشنهاد شده است. من شخصا از آن استفاده نکردم، اما به نظر می رسد همه چیز بسیار خوب است. احتمالات مشابه پاسخ دهنده است، اما ارزیابی نتیجه سازگاری نیز وجود دارد.
UPD2: 3.11.2017:
7. iloveadaptive.com
یک سرویس کاملاً جدید دیگر در نظرات پیشنهاد شده است. همانطور که برای من، کمی اضافه وزن و غیر عملی است، اما این بیش از آن است که با فرصت های عالی جبران شود. حتی مرتب سازی بر اساس سیستم عامل وجود دارد.
نتیجه
بدون شک، انطباق یک سایت برای دستگاه های تلفن همراه فقط یک ادای احترام به مد و زمان نیست، بلکه یک ویژگی ضروری یک سایت مدرن است که نه تنها به کاربر نهایی کمک می کند.
بنابراین، برای همه کسانی که می‌خواهند به مشتری نزدیک‌تر باشند و بازدیدها/سرنخ‌های بیشتری داشته باشند، توصیه می‌کنم در اسرع وقت سایت‌های خود را تطبیق دهند. از من یک سوال بپرس -
