بررسی ریسپانسیو ( واکنشگرا ) بودن موبایل سایت

بررسی ریسپانسیو ( واکنشگرا ) بودن موبایل سایت

فهرست مطالب

ارزیابی عملکرد نسخه موبایل سایت ( واکنش گرا / ریسپانسیو )

اولین گام برای بهبود عملکرد واکنشگرا و یا ریسپانسیو بودن نسخه موبایل سایت ، بررسی این موضوع است که از کجا و با چه چیزی کار را شروع کنید. منابع عالی رایگان و پولی متعددی برای این کار وجود دارد، اما دو ابزار بسیار عالی Developer Tools مربوط به گوگل کروم (که بصورت توکار در آن تعبیه شده) و WebPageTest می باشد. به خاطر سادگی، در این مقاله ابزار Developer Tools گوگل کروم را استفاده میکنیم.

اگر یک طراح سایت و یا توسعه دهنده نیستید نگران نباشید کار با ابزار گوگل کروم بسیار راحت هستش.

  1. کروم را باز کنید. (اگر گوگل کروم را ندارید لینک مستقیم دانلود گوگل کروم و یا از این سایت دانلود کنید)
  2. منوی “hamburger” (همون سه تا خط افقی کنار مرورگر) در گوشه بالای سمت راست را باز کنید.
  3. More Tools و سپس Developer Tools را انتخاب کنید.

یک صفحه جذاب همراه با اطلاعات بسیار خوبی را ملاحظه خواهید کرد. از همه مهمتر، در آن بالا یک منوی  drop-down به همراه نسخه های مختلف تبلت و موبایل وجود دارد که در نوع خودش کاملا بی نظیر هست .

از منوی مورد نظر یک ابزار اینترنت مانند Apple iPhone 6 را انتخاب کنید. آدرس سایت خود را در مرورگر وارد کنید، اینتر را بزنید. شما اکنون سایتتان را بصورتی که در iPhone 6 قابل نمایش است می بینید. پایین تر بروید تا آمار جالبی از کارایی مثل کل زمان بارگزاری صفحه، اندازه صفحه، و تعداد کل درخواست ها را مشاهده کنید. تب “Network” را باز کنید تا یک نمودار مشخصات را که بسیار مفید است ببینید(شکل زیر).

بررسی نسخه موبایل سایت

بهینه سازی تصاویر برای موبایل

بر اساس HTTP Archive، به طور متوسط، تصاویر یا عکس ها بیش از 60 درصد از کل محتوای صفحات وب را تشکیل می دهند. موردی که احساس میشود این است که تصاویر در حال حکمرانی بر وب هستند. در ادامه صفحه خود را با ابزار Chrome Developer Tools باز کنید، احتمالا به اعدادی نزدیک آنچه که گفته شد خواهید رسید. وقتی با سرعت نسبتا آهسته موبایل دانلود می کنید، تاثیر تصاویر بزرگ در عملکرد سایت شما قابل ملاحظه است.

اگرچه همیشه یک تجربه خوب برای استفاده از تکنیک های بهینه سازی تصویر بصورت با اتلاف(lossy) یا بدون اتلاف(lossless) وجود داشته، اما در مورد موبایل باید به یک مورد دیگر دقت کرد: آیا شما در هنگام باز کردن یک سایت با موبایل باید عکس های آن سایت را دانلود کنید؟ وقتی شما از تصویر “hero” (منظور بنرهای با حجم زیاد است) با پهنای 1600 پیکسل برای نسخه دسکتاپ سایت خود استفاده می کنید، تقریبا همۀ آن در یک گوشی موبایل یا تبلت دیده نمیشود و به هدر می رود، مگر اینکه تبلت شما دارای ریزولوشون بالا بوده و یا صفحۀ “retina” داشته باشد.

راه حل چیست؟ بارگذاری یک تصویر کوچکتر برای کاربران موبایل. اما مواظب باشید، یک راه اشتباه و یک راه صحیح برای انجام این کار وجود دارد.

برای این مثال، و در کل سایت موبایلتان، مطمئن شوید که viewport meta tag را در بخش head صفحه خود تعیین کرده اید. در اصل، این به مرورگر تلفن همراه موبایل شما می گوید که یک سایت موبایل واکنش گرا دارید، و دیگر سعی نمیکند که بطور اتوماتیک تصویر دسکتاپ بزرگی را برای ریزولوشن موبایل شما بیاورد که سایت شما بذقواره شود. به علاوه اگر این تگ ارائه نشود، بصورتی که در زیر می بینید، نتایج متفاوتی را در هر بار آزمایش در کروم ملاحظه خواهید کرد.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

راه اشتباه برای این کار

طراحی واکنش گرا شما را مجبور می کند که از پرس و جوهای رسانه ای css (CSS media queries) زیادی برای استایل بخشیدن به سایت خود در حالت کوچک شده برای موبایل استفاده کنید، بنابراین یک رویکرد واضح برای تعویض عکس ها می تواند بصورت زیر باشد:

<!-- DON'T DO THIS -->
<style> 
    @media (min-width:376px) {
        .mobile_image {
            display: none;
        }
        .desktop_image {
            display: inline;
        }
    }
    @media (max-width:375px) {
        .mobile_image {
            display: inline;
        }
        .desktop_image {
            display: none;
        }
    }
</style> 
<img src="mobile.png" class="mobile_image" />
<img src="desktop.png" class="desktop_image" />

 این کد یک تصویر را زمانی که ریزولوشون نمایش زیاد است و همچنین زمانی که کم است نشان می دهد.

این در صفحه ای که بارگزاری شده است خوب به نظر می رسد امّا یک مشکل بزرگ وجود دارد: هر دو تصویر دانلود می شود! برای تایید این حرف، اگر همین را در کروم بارگزاری کنید چیزی مثل این را ملاحظه خواهید کرد:

بررسی نسخه موبایل سایت

پس این خوب نیست؛ در حقیقت غلطه! وقت و پهنای باند صرف عکسی میشه که اصلا قرار نیست در نسخه موبایل نمایش داده بشه!

راه صحیح

در عوض، با استفاده از استایل background-image برای یک DIV می توان به افکت مشابهی رسید، برای مثال:

<!-- DO THIS -->
<style>
    @media (min-width:376px) {
        .myimage {
            background-image: url("desktop.png");
            width: 700px;
            height: 550px;
        }
    }
    @media (max-width:375px) {
        .myimage {
            background-image: url("mobile.png");
            width: 350px;
            height: 130px;
        }
    }
</style>
<div class="myimage"></div>

با بارگزاری در ابزارهای کروم، تصویر زیر را ملاحظه خواهید نمود:

بررسی نسخه موبایل سایتتنها تصویر موبایل بارگزاری خواهد شد… چه بهتر! البته یک اخطار: برای استفادۀ background-image در یک DIV، باید در css برای کلاس آن یک طول و یک عرض تعریف کنید. این ممکن است وقتی که تصاویر زیادی دارید و زمانی که اندازۀ یک تصویر مکررا تغییر می کند شما را به زحمت بیاندازد، اما اگر تصاویر “hero” شما استاتیک هستند، استفادۀ استراتژیک از این تکنیک به بهبود کارایی سایت موبایل شما کمک زیادی می کند.

کاری که باید انجام بدید: در صورت امکان از CSS media queries و background-image بصورت مشروط برای نمایش تصاویر موبایل استفاده کنید. این امر یک هوشمندی برای بزرگترین تصاویر شما به همراه خواهد داشت.

 jquery را فراموش کنید

 jQuery یک کتابخانه انتخابی برای نوشتن JavaScript است، اصلا زندگی بدون جی کوئری معنا ندارد!

jQuery کاملا مفید و کاربردیه، اما باید چیزی فراخوانی شود که اهداف اصلی طراحی آن فراهم کردن یک واسط پایدار سازگار با APIهای پیشنهاد شده توسط W3C و استفاده شده در انواع مرورگرها با استانداردهای مختلف باشد. jQuery به شما این امکان را می دهد که از کدهایی نظیر “if Internet Explorer do this، else do that” استفاده کنید.

اما نیاز به واسط واحد jQuery در موبایل بسیار کم است. موبایل ها بیشتر تحت سلطۀ مرورگرهای بر پایۀ WebKit مانند کروم و Safari هستند، بنابراین مسائل انتزاعی کمتری دارند. jQuery با وزنی حدود 200 کیلوبایت هنوز هم یک کتابخانۀ مهم برای دانلود می باشد، و از قابلیت کش کردن(caching) نیز بخوبی بهره می گیرد. حتی پس از فشرده و کوچک سازی jQuery، با فایلی با حجم حدود 30 کیلوبایت سروکار خواهید داشت.

گر به دنبال واسط جاوا اسکریپتی ساده تر هستید Zeptojs را ببینید. اگرچه تمام ویژگی های jQuery را در خودش ندارد، اما حجمش 5 کیلوبایت هست و در واقع 6 برابر کمتر از jQuery حجم دارد! چون که Zepto یک API سازگار با jQuery است شما نیاز به بازنویسی کدها برای استفاده از آن نخواهید داشت. برای بیشتر سایت های برپایۀ جاوااسکریپت، Zepto کفایت میکنه.

کاری که باید انجام بدید: کتابخانه های third party که استفاده می کنید را بهینه (Minimize) کنید، و اگر سایت شما مبتنی بر جاوا اسکریپت است، استفاده از Zeptojs را به عنوان جایگزینی برای jQuery در نظر داشته باشید.

بررسی تنظیمات کش(cache)

توسعه دهندگان وب هوشمند برای کاهش زمان بارگزاری صفحات وب خود، حجم یا اندازۀ منابع آن را کاهش می دهند. در واقع توسعه دهندگان وبِ هوشمند در وهلۀ اول سعی می کنند صفحات را از دانلود منابع بی نیاز کنند. این دقیقا جایی است که بحث کش کردن(caching) وارد می شود. اگر عکس ها، css، یا جاوا اسکریپت شما به ندرت تغییر می کند، آن ها را کش کنید. به این ترتیب کاربران فقط بار اول منابع را دانلود می کنند و در دفعات بعدی سایت شما از موبایل و یا تبلت آنها بالا خواهد آمد، پس فقط برای استفاده از آن باید منتظر بود، نه  اینکه با هر بار باز کردن سایت کل صفحه بارگزاری شود.

Mobify یک آغازگر زیبا در تنظیمات caching headers خود دارد، ابزارهای خیلی زیادی هم وجود دارد که می توانید از آنها برای تست کردن تنطیمات کش استفاده کنید، مانند super cool  REDbot، WooRank، و Zoompf اگر شما از وب سرورهای آپاچی یا nginx استفاده می کنید توجه داشته باشید که برای ساده تر شدن انجام تنظیمات کش، mod_pagespeed را فعال کنید. اگر هم یک سایت وردپرس دارید، پلاگین W3 Total Cache  استفاده کنید که واقعا بینظیر هستش ما در سئوموز در مقاله های بهینه سازی وردپرس و  بهینه سازی وردپرس ۲ آموزش استفاده و تنظیم کامل افزونه W3 Total Cache را توضیح داده ایم و همچنین معرفی و تنظیم چند افزونه دیگر در مورد بهینه سازی تصاویر و تنظیمات کش سایت های وردپرسی را نیز میتوانید مطالعه نمایید.

کاری که باید انجام بدهید:

کش کردن ، یکی از بهینه سازی های تاثیرگذار در کارایی به خصوص در سایت های موبایل می باشد. سیاست های(policies) کش خود را بررسی کنید و آن را بر تصاویر و کتابخانه هایی که حجم بزرگی دارند و کمتر استفاده می شوند اِعمال کنید.

عاشق انیمیشن های GIF هستید؟ اما مرورگر شما اینگونه نیست!

شاید به نظر برسد که انیمشین های gif متعلق به همین اواخر هستند اما قدمت این انیمیشن ها به حدود 30 سال می رسد. انیمیشن های gif برای دانلود شدن بسیار سنگین و حجیم هستند بخصوص زمانی که انیمیشن gif شما یک کلیپ کوتاه باشد. می توانید به جای استفاده از انیمیشن gif، از قابلیت ویدئوی html5 استفاده کنید. تمام مرورگرهای مدرن از آن پشتیبانی می کنند، همچنین ویدئوهای html5 حدود 10 درصدِ حجم انیمیشن های gif معادل خود را دارا می باشند.

روشی دیگر سایت، Imgur است. وقتی که انیمیشن های gif را در Imgur آپلود می کنید، آنها انیمیشن شما را به فایلی با فرمت GIFV تبدیل می کنند. GIFV در واقع یک ویدئوی html5 است، اما با حجم بهینه تر یا کمتر. Imgur میزبانی ویدئوی شما را مدیریت می کند، و ویدئوی شما را چه با فرمت GIFV و چه با فرمت gif به کاربران شما نمایش میدهد و این بستگی به مرورگر کاربران دارد که کدام فایل نمایش داده شود(اگرچه تقریبا همۀ مرورگرهای مدرن از html5 پشتیبانی می کنند).

کاری که باید انجام بدید: برای کلیپ های تصویری و انیمیشن های پیچیده از فرمت GIF استفاده نکنید. پروتکل های ویدئوی مدرن از ویدئوهای html5 و GIFV استفاده می کنند کمک زیادی به بهبود کارایی و کاهش زمان دانلود کاربران می کند.

آینده: HTTP/2

وب به آرامی در حال حرکت به سوی HTTP/2 است. HTTP/1.1 حدود 15 سال عمر دارد و به نظر میاد که پیر شده باشد، بخصوص زمانی که اتصالات غیرقابل اعتماد و ضعیف(یا قطع شونده) موبایل ها را می بینیم. در حال حاضر، سرورها و مرورگرهای زیادی از HTTP/2 پشتیبانی می کنند. البته توصیه می کنم که برای سازگاری موبایل 21 آوریل عجله کنید(گوگل اخیرا اعلام نموده از تاریخ April 21 سال 2015 سازگاری وب سایت با موبایل را به یکی از فاکتورهای رنک دهی خود اضافه خواهد نمود). اما در آینده حرکت بسوی این پروتکل باید در نقشۀ راه شما قرار داشته باشد. در این لینک (earlier post) شما می توانید دربارۀ HTTP/2 و تاثیرات آن در آیندۀ SEO و کارایی وب بیشتر مطالعه کنید.

کاری که باید انجام بدید: سازگاری با HTTP/2 را در نقشۀ راه خود قرار دهید.

در اینجا باید نمونه جالبی از ریسپانسیو بودن سایت سئوموز که تاثیر آن در نتایج جستجو کاملا مشخص میباشد را ببینید:

سئوموز سازگار با دستگاه همراههمینطور که میبینید در زیر نتایج جستجوی گوگل نوشته شده سازگار با دستگاه همراه که این اتفاق مهم میتواند ورودی های خوبی برای شما به ارمغان بیاورد. همانطور که برای ما در سئوموز داشته است برای تست این مورد میتوانید seomoz را با تلفن همراه خود در گوگل سرچ کنید و و نتایج جستجوی مورد نظر را مشاهده نمایید.در پایان این مقاله نمونه عکسهایی از سایتهای ریسپانسیو برای درک بهتر از نوع نمایش سایتها در نسخه های مختلف موبایل دسکتاپ و تبلت را مشاهده کنید.

در پایان

ساخت وبسایت های واکنش گرا و متناسب با موبایل ها، بیشتر از استایل های افزایش سرعت و تگ ها مدنظر خزنده (crawler) گوگل می باشد. باید توجه کرد که موبایل ها دارای ویژگی های متنوعی هستند که اگر نادیده گرفته شوند سایت موبایل شما به کندی عمل خواهد کرد و کاربران تجربۀ خوبی از سایت شما نخواهند داشت. اما خوشبختانه ابزارهای رایگان متنوعی برای ارزیابی کارایی سایت های موبایل وجود دارد، مانند WebPageTest، Chrome Developer Tools، Google PageSpeed Insights، و Zoompf’s Free Report. و البته، توجه داشته باشید که از ابزار  mobile-friendly test tool مربوط به خود گوگل نیز استفاده کنید.

 ریسپانسیو و واکنشگرا بودن سایت سازگار با دستگاه همراهریسپانسیو و واکنشگرا بودن سایت سازگار با دستگاه همراهریسپانسیو و واکنشگرا بودن سایت سازگار با دستگاه همراهریسپانسیو و واکنشگرا بودن سایت سازگار با دستگاه همراه

9 دیدگاه
  1. سلام یه سئوال داشتم اینکه اگه ما ساب دامنه تعریف کنیم و خبر خوان بندازیم داخلش و در سایت اصلی خودمون مطلب بزاریم تاثیر داره یعنی گوگل منفی میده؟ و اینکه آیا ساب دامنه برای گوگل به صورت جدا محصوب میشه؟ مثل سرویس های وبلاگ دهی؟
    1. سلام دوست گرامی از نظر گوگل هر سادامنه سایت جداگانه محسوب میشه و شما میبایست مجزا از دامنه اصلی نیز در وبمستر تولز ثبتش کنید. منظورتون رو از اون بخش اول سوال متوجه نشدم . خبرخوان نصب کنید و خودتون مطلب بذارید روی سایت اصلی
  2. سلام خسته نباشید من رو سایتم یه افزونه نصب کردم که وقتی با اندروید وارد میشن نسخه اندروید هست ولی در ظاهر اصلی قالب تو کامپیوتر هیچ تغییر نکرد به نظرتون این نسخه اندروید تاثیر تو رتبه گوگل با رنک داره؟؟؟
    1. سلام قطعا اگر قالب سایتتون ریسپانسیو بشه ورودیهای بیشتری از نسخه های موبایل ، از طرف گوگل وارد سایت شما خواهد شد. ریسپانسیو بودن سایت در ظاهر سایت در کامپیوتر تغییری ایجاد نمیکند.
  3. سلام خسته نباشید اتفاقا اخیر ورودی از گوگل بالا رفت ولی نمیدونم ریسپانسیو هست یا نه اگه میشه یه نگاه بندازین من متوجه نمیشه هست یا نه بهم همینجا بگین
    1. سلام بررسی شد در حال حاضر گوگل سایت شما را ریسپانسیو میداند اگر با تلفن همراه خود در گوگل دامنه خود را سرچ کنید میبینید که همانند عکسی که از سئوموز در این مطلب قراردادیم برای سایت شما هم نوشته شده سازگار با دستگاههای همراه - درود بر شما قدم مثبتی در ارتقا سایت خود برداشتید
  4. سلام، میشه توضیح بدید چطور میتونم قالبم رو ریسپانسیو کنم. آیا فقط باید تو کدهای css تغیر ایجاد کنم؟ لطفا بگید دقیقا باید چیکار کنم. ممنون
دیدگاه ها بسته شده اند.