بازگشت به بالا

ارسال پیام در واتس اپ

ارسال تیکت پشتیبانی

SabaHost Small Loding

در حال بررسی ...

اطلاعات دامنه

کپی کردن اطلاعات در حافظه

https://saba.host/license
https://saba.host/blog/how-to-design-website-using-drupal

چطور با دروپال یک وب سایت ریسپانسیو بسازیم

این روز ها تعداد زیادی از کاربران در سطح اینترنت برای وب گردی از گوشی های موبایل یا تبلت ها با اندازه و ابعاد متنوعی استفاده می کنند. در واقع، 52 درصد از کل ترافیک وب سایت ها از طریق تلفن همراه انجام می شود. اگر وب سایت دروپال شما برای دستگاه های موبایلی بهینه سازی نشده باشد، بدین معنی است، که نیمی از بازدیدکنندگان سایت شما ممکن است نسخه ای غیر کاربردی و با ظاهری بهم ریخته را مشاهده کنند.

خوشبختانه، ابزارهای بهینه سازی سایت برای موتورهای جستجو برای کمک به طراحی وب سایت های با سیستم مدیریت محتوای دروپال به شکل ریسپانسیو وجود دارد. توسعه دهندگان این CMS، ماژول هایی طراحی کرده اند که به ما امکان بهینه سازی آن را می دهد. بنابراین با کمی تلاش می توانیم سایت های دروپالی خود را برای نسخه های موبایلی به خوبی بهینه سازی و ریسپانسیو کنیم.

در این مقاله، نحوه بهینه سازی سایت دروپال برای دستگاه های تلفن همراه را در پنج مرحله توضیح خواهیم داد.

چرا بهینه سازی سایت برای موبایل اهمیت دارد؟

وب سایت هایی که برای استفاده در دسکتاپ طراحی شده باشد، ممکن است در موبایل یا تبلت به درستی قابل نمایش و استفاده نباشد. بنابراین، با توجه به الگوریتم های گوگل که به نسخه موبایلی سایت ها بسیار اهمیت می دهد، این مهم است که وضعیت نمایش سایت دروپال خود را در نسخه های موبایلی و تبلت چک کنید، که به بهترین شکل ممکن نمایش داده شود.

مزایای زیادی برای بهینه سازی سایت در نسخه های موبایلی وجود دارد:

  • بهبود زمان بارگذاری، که برای نسخه موبایلی بسیار مهم است.
  • عدم ترک سایت هایی که در کمتر از چند ثانیه بارگذاری می شوند، توسط کاربران.
  • بهرمندی سایت های بهینه برای نسخه های موبایلی از رتبه های بالای موتور های جستجو و بهبود سئو.

خوشبختانه، بهینه سازی وب سایت های دروپال برای دستگاه های موبایلی خیلی سخت نیست. تنها چیزی که نیاز است کمی زمان، و چند ماژول خاص برای انجام این کار می باشد.

نحوه طراحی یک وب سایت واکنش گرا با دروپال

نکات زیر به شما کمک می کند که وب سایت دروپال خود را برای نسخه های موبایلی بهینه سازی کنید، با فرض اینکه شما حداقل یک وب سایت طراحی شده با سیستم مدیریت محتوای Drupal دارید.

اگر در این زمینه تازه کار هستید، حتماً با یک توسعه دهنده متخصص دروپال مشورت کنید. با این حال، این آموزش می تواند، راهنمایی برای شروع بهینه سازی برای مدیران سایت ها و توسعه دهندگان باشد.

  1. نصب منوی موبایلی

    در ابتدا، داشتن منویی که برای دستگاه های موبایلی بهینه سازی شده باشد، بسیار مهم است. این منو می تواند پیوند های ناوبری سایت را به درستی در صفحه های باریک نمایش دهد.
    احتمالاً محبوب ترین سبک منوی موبایلی، آیکون hamburger باشد. در این حالت زمانی که صفحه به اندازه مشخصی کوچک می شود، منو با نماد ساده ای به شکل سه خط افقی زیر هم نمایش داده می شود. وقتی روی این آیکون کلیک کنیم، منوی اصلی سایت در یک دسته بندی زیبا نمایش داده می شود:
    نحوه طراحی یک وب سایت واکنش گرا با نصب ماژول Responsive Menus می توانید این منو را بر روی سایت خود نصب نمایید. در صفحه این ماژول، فایل با پسوند tar.gz file را دانلود کنید. سپس در داشبورد دروپال، روی سربرگ Extend کلیک کنید:
    نحوه طراحی یک وب سایت واکنش گرا سپس، دکمه Install New Module را انتخاب کرده و فایل tar.gz را بارگذاری کنید. در نهایت با اعمال پیکربندی و تنظیم ماژول می توانید این منو را فعال کنید.
  2. Minify کردن کد ها

    همانطور که گفته شد، بارگذاری سریع سایت در نسخه های موبایلی بسیار مهم است، بنابراین بهتر است فایل هایی مثل فایل های جاوا اسکریپت، CSS، و HTML که در برخی مواقع می توانند، بسیار حجیم باشند، Minification کنیم. با این عمل، تمامی این فایل ها، کم حجم شده و عناصر غیر ضروری از کد های سایت حذف خواهند شد. در نتیجه بارگذاری سایت با سرعت بسیار بیشتری انجام می شود.
    با نصب ماژول Minify در داشبورد دروپال، می توانید این کار با به طور خودکار انجام دهید. در صفحه این ماژول فایل tar.gz را دانلود کنید:
    نحوه طراحی یک وب سایت واکنش گرا سپس، فایل نصب ماژول را در مسیر modules قرار می دهیم. حالا به راحتی می توانیم، در داشبورد دروپال، از قسمت Administration > Modules و انتخاب Enable Newly Added Modules آن را فعال کنید.
    در ادامه با فعال کردن چک باکس کنار گزینه Minify می توانید تنظیم کنید، که عملیات کم حجم سازی به طور خودکار انجام شود. به منظور دسترسی به تنظیمات ماژول، می توانید به مسیر Administration> Configuration> Performance مراجعه نمایید. اگر در خصوص این تنظیمات اطلاعات کافی ندارید، حتماً از یک توسعه دهنده متخصص دروپال کمک بگیرید.
  3. فعال کردن Browser Caching

    در مرحله بعدی، کش مرورگر را برای ذخیره سازی داده های سایت فعال می کنیم. این قابلیت به این صورت عمل می کند، که بعد از اولین بارگیری سایت، داده های سایت را در مرورگر به اصلاح cache می کند، سپس در دفعات بعدی که کاربر به سایت مراجعه می کند، فایل های کش شده را با سرعت بیشتری برای کاربر نمایش می دهد.
    این ویژگی برای سایت هایی که بروزرسانی زیادی ندارند، بیشتر کاربردی است. بنابراین با هربار بازدید از سایت، تمامی داده ها از سرور بر روی مرورگر بارگیری نخواهند شد.

    برای مثال، اگر سایت شما دارای یک تصویر پس زمینه بسیار بزرگ باشد، ممکن است بارگذاری صفحه را با تأخیر مواجه کند. حالا اگر این تصویر در کش مرورگر ثبت شود، در کامپیوتر شخصی بازدیدکننده ذخیره می گردد.
    بنابراین فقط برای بار اول بارگیری می شود، و در دفعات بعدی از تصویر ذخیره شده برای بارگذاری سایت با سرعت بالایی استفاده می شود.
    در دروپال، کش مرورگر یک ابزار داخلی است، و نیازی به نصب ماژول ندارد. بدین منظور با مراجعه به مسیر Administration > Configuration > Development > Performance می توانید به این قسمت دسترسی پیدا کنید:
    نحوه طراحی یک وب سایت واکنش گرا
  4. بهینه سازی تصاویر

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

    روش های زیادی برای بهینه سازی تصاویر قبل از بارگذاری آن ها در سایت وجود دارد. علاوه بر این می توانید با استفاده از ماژول ImageAPI Optimize، تمامی تصاویر بارگذاری شده در دروپال را بهینه سازی کنید:
    بهینه سازی تصاویرمشابه سایر ماژول ها، ابتدا باید فایل tar.gz این ماژول را از صفحه آن دانلود کنید، سپس آن را در داشبورد دروپال نصب و فعال کنید.سپس به قسمت Administration > Settings > Imageapi مراجعه نموده، و ImageAPI Optimize را فعال می کنیم. در بخش تنظیمات این افزونه می توانیم، گزینه بهینه سازی خودکار را نیز فعال کنیم.
  5. افزودن قوانین @media برای سایز تصاویر

    بهینه سازی تصاویر، حجم آن ها را کاهش می دهد، اما میزان فضایی که یک تصویر بر روی دیسک ذخیره سازی اشغال می کند، نیز مهم است. یک تصویر با ابعاد 600*800 پیکسل ممکن است، در صفحه لپ تاپ خوب به نظر برسد، اما در صفحه 700*400 پیکسل موبایل چطور؟

خوشبختانه، با استفاده از قوانین @media در دروپال می توانیم، برای تصاویر بسته به اندازه صفحه نمایش هر بازدیدکننده، ابعاد تصاویر را محدود کنیم. برای این کار:

  • مطمئن شوید، ماژول های Breakpoint و Responsive Images فعال شده باشند.
  • نقاط شکست را با استفاده از ماژول breakpoints تنظیم می کنیم. به این صورت که می توانیم مشخص کنیم، نقطه شکست در نمایشکر لپ تاپ، تبلت و موبایل به چه صورت باشد.
  • برای مشخص نمودن استایل تصاویر برای هر نقطه شکست، به بخش مدیریت تصاویر ریسپانسیو مراجعه می کنیم، در این بخش می توانیم نحوه نمایش تصاویر در صفحات کوچکتر را مدیریت کنیم.

جمع بندی

بنابراین، یاد گرفتیم که بهینه سازی وب سایت های مبتنی بر Drupal برای دستگاه های موبایلی بسیار مهم است. تعداد زیادی از کاربران برای مرور وب سایت ها از گوشی موبایل خود استفاده می کنند، و اگر زمان بارگذاری سایت شما طولانی شود، یا طراحی سایت ریسپانسیو نباشد و با ظاهری نامناسب نمایش داده شود، کاربران سایت را ترک خواهند کرد، و این آسیب جدی به سئوی سایت شما وارد می کند.

همانطور که توضیح داده شد، با پنج مرحله ساده می توانیم وضعیت بهینه بودن و ریسپانسیو سایت دروپال خود را بررسی و بهبود دهیم. این پنج مرحله شامل موارد زیر می شود:

  1. نصب منوی موبایلی
  2. Minify کردن کد ها
  3. فعال کردن Browser Caching
  4. بهینه سازی تصاویر
  5. افزودن قوانین @media برای سایز تصاویر

امیدواریم این مقاله برایتان مفید واقع شده باشد. اگر سوالی دارید که در این مقاله پاسخش را پیدا نکردید، در قسمت کامنت ها سوال خود را مطرح کنید، کارشناسان ما در کمتر از چند دقیقه به سوالات پاسخ خواهند داد.
این مقاله را با دوستان خود به اشتراک بگذارید.
موفق باشید.


پرسش ها و پاسخ های متداول

اگر سوالی دارید که پاسخش را در زیر پیدا نکرده اید، آن را با واحد پشتیبانی یا فروش ما در میان بگذارید.

اگر قابلیت کش مرورگر فعال باشد، بروز رسانی های سایت برای مخاطبین نمایش داده می شود؟

بله، بسته به تنظیماتی که اعمال نموده اید، در بازه زمانی مشخصی داده های کش ها بروزرسانی خواهند شد.

بجز نصب ماژول می توان از روش دیگری برای minify کردن کد های جاوا اسکریپت استفاده کرد؟

بله از طریق وب سایت هایی که مخصوص انجام این کار هستند، مانند minifier.org یا اینکه اگر در زمینه کد نویسی تخصص کافی دارید، به طور دستی نیز می توان کد ها را فشرده سازی و کم حجم نمایید.

چگونه تصاویر سایت را قبل از بارگذاری بهینه سازی کنیم؟

از طریق ابزار های آنلاین مانند سایت tinypng.com می توانید تصاویر را بهینه سازی کنید.

مطالب مرتبط

سیستم مدیریت محتوا چیست؟
صباهاست

کاربر: صباهاست

12856

سیستم مدیریت محتوا چیست؟

CMS چیست؟ این واژه مخفف عبارت Content Management System و به معنی یک سیستم مدیرت محتوا است. این نرم افزار برای مدیریت تولید و اصلاح محتوای دیجیتال استفاده می شو...

ابزارهای طراحی سایت در سال 2021
صباهاست

کاربر: صباهاست

12856

ابزارهای طراحی سایت در سال 2021

ابزارهای ساخت سایت در سال 2021 می توانند برای هر کسب و کاری مفید و کاربردی باشند. طراحی وب سایت که یک مقوله بسیار مهم است که ما در مراحل اولیه شروع کسب و کار خو...

MySql چیست و چه کاربردهایی دارد؟
صباهاست

کاربر: صباهاست

12856

MySql چیست و چه کاربردهایی دارد؟

معروفترین سیستم مدیریت پایگاههای داده mySQL که به صورت متن باز بوده و از زبان SQL برای انجام کارها بهره میبرد، یکی از پرطرفدارترین و کاربردی ترین ابزارها در حوز...

hellobar جایگزینی برای پاپ‌آپ
صباهاست

کاربر: صباهاست

12856

hellobar جایگزینی برای پاپ‌آپ

hello bar چیست؟Hellobarیکی از خدماتی است که در قالب وبسایت عرضه میشود. از طریق این سرویس قادر خواهیم بود تا پیامهای مورد نظر خود را برای بازدیدکنندگان مدیریت و...

الگوریتم MUM گوگل چطور کار می کند؟
صباهاست

کاربر: صباهاست

12856

الگوریتم MUM گوگل چطور کار می کند؟

پس از الگوریتم اخیر گوگل یعنی BERT هم اکنون گوگل آماده می شود تا به تدریج الگوریتم جدید و بسیار قدرتمند خود یعنی MUM را به جهان آنلاین معرفی کند.این به روزرسانی...

فایل زیلا چیست؟ و چه کاربردی دارد؟
صباهاست

کاربر: صباهاست

12856

فایل زیلا چیست؟ و چه کاربردی دارد؟

بروزرسانی قالب سایت و استفاده از ابزارهایی مانند فایل زیلااز جمله فنونی است که وبمستران و مدیران سایت باید بر آن تسلط کافی داشته باشید، ابزار Filezillaابزاری بس...

چگونه رتبه سایت خود را در کوتاه ترین زمان ممکن بهبود دهیم؟
صباهاست

کاربر: صباهاست

12856

چگونه رتبه سایت خود را در کوتاه ترین زمان ممکن بهبود دهیم؟

بهبود رتبه سایتهمواره یکی از دغدغه های اساسی صاحبان وب سایت است. تصور کنید یک وبسایت تاسیس کرده و محصولی را به صورت آنلاین می فروشیم. حدی از ترافیکی وارد سایت ش...

ساخت صفحه سوالات متداول در وردپرس با کمک Yoast SEO
صباهاست

کاربر: صباهاست

12856

ساخت صفحه سوالات متداول در وردپرس با کمک Yoast SEO

یکی از صفحاتی که در برخی سایت ها دیده می شود و بسیار صفحه مفیدی است صفحه پرسش و پاسخ های رایج است. این صفحه را می توان در وردپرس و یا سی ام اس های دیگر طراحی کر...

چطور یک نام مناسب برای دامنه انتخاب کنیم؟
صباهاست

کاربر: صباهاست

12856

چطور یک نام مناسب برای دامنه انتخاب کنیم؟

یکی از کارهای بسیار مهمی که در ابتدای کسب و کار و زمانی که در حال تأسیس وب سایت هستیم، باید انجام شود، انتخاب دامنه وب سایت است.انتخاب دامین همیشه یکی از دغدغه...

تخمین پهنای باند مورد نیاز وب سایت
صباهاست

کاربر: صباهاست

12856

تخمین پهنای باند مورد نیاز وب سایت

اگر قصد داشته باشیم که برای کسب و کارمان یک وب سایت تأسیس کنیم، یکی از مواردی که باید هنگام خرید به آن توجه شود انتخاب شرکت میزبانیوب یا هاستینگ و پلن مناسب است...

تأثیر میزان رم و سی پی یو بر سایت
صباهاست

کاربر: صباهاست

12856

تأثیر میزان رم و سی پی یو بر سایت

سرعت وب سایتدر افزایش بازدید از سایت تأثیر بسیار زیادی دارد. سایت هایی کهلود تایم بالایی دارند، معمولاً با آمار بالای شاخص بانس ریت مواجه هستند. عوامل متعددی در...

معرفی برخی ابزارهای مهم چک سئو
صباهاست

کاربر: صباهاست

12856

معرفی برخی ابزارهای مهم چک سئو

استفاده از ابزارهای چک سئو به صورت مداوم و منظم باعث کشف و رفع مشکلات مرتبط با سئوی onpage، offpage و تکنیکال شده و به ما در بهبود وضعیت سئوی سایت و در نهایت کس...

آموزش forward کردن ایمیل در سی پنل و دایرکت ادمین
صباهاست

کاربر: صباهاست

12856

آموزش forward کردن ایمیل در سی پنل و دایرکت ادمین

سی پنل و دایرکت ادمین دو نرم افزار لینوکسی هستند که برای مدیریت کنترل پنلهاستمورد استفاده قرار میگیرند. این دو نرم افزار قابلیت های بسیاری داشته و از محبوبیت با...

همه چیز درباره کار با سی پنل
صباهاست

کاربر: صباهاست

12856

همه چیز درباره کار با سی پنل

سی پنل یکی از معروفترین نرم افزار کنترل پنل سایت های لینوکسی است و تقریبا پر استفاده ترین آنها. در مجموعه ذیل به بررسی بخش های مختلف سی پنل می پردازیم. ساخت دیت...

چگونه یک وب سایت ریسپانسیو داشته باشیم؟
صباهاست

کاربر: صباهاست

12856

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

طراحی وب سایت واکنش گرا یا RWD یک استراتژی طراحی صفحات وب است که هدف آن سازگاری و نمایش مناسب صفحات وب در دستگاه های مختلف همچون تلفن همراه، تبلت و دسکتاپ و مرو...

اصلاح پیوند های شکسته وب سایت
صباهاست

کاربر: صباهاست

12856

اصلاح پیوند های شکسته وب سایت

اگر صاحب یک وب سایت هستید، اصلی ترین الویت شما باید ارائه یک تجربه کاربری یا UX ( User Experience ) عالی به کاربران باشد. متأسفانه لینک های شکسته در سایت ها می...

آموزش ساخت صفحات ارور اختصاصی
صباهاست

کاربر: صباهاست

12856

آموزش ساخت صفحات ارور اختصاصی

صفحات خطا از نظر بهینه سازی برای موتور های جستجو و سئو گزینه مناسبی نیستند، و هیچ پوئن مثبتی نیز برای وب سایت ها ندارند. با این حال هر وب سایتی ممکن است بنابر د...

فشرده سازی Gzip چیست؟
صباهاست

کاربر: صباهاست

12856

فشرده سازی Gzip چیست؟

شاید دو ثانیه زمان زیادی به نظر نرسد. با این حال، وقتی نوبت به وبسایت شما می رسد، اتفاقات زیادی در این مدت کوتاه میتواند رخ دهد.به گفته گوگل، افزایش زمان بارگذا...

به روزرسانی نسخه PHP
صباهاست

کاربر: صباهاست

12856

به روزرسانی نسخه PHP

PHP امروزه یکی از محبوب ترین زبان های برنامه نویسی در وب است. بر اساس گزارش W3Techs، بیش از 78٪ از وب سایت ها از PHP به عنوان زبان برنامه نویسی سمت سرور استفاده...

آموزش دریافت درگاه پرداخت اینترنتی برای سایت
صباهاست

کاربر: صباهاست

12856

آموزش دریافت درگاه پرداخت اینترنتی برای سایت

امروزه، افراد زیادی ترجیح می دهند زمان خود را برای خرید به صورت حضوری صرف نکنند و در عوض خرید کالاها یا خدمات را به صورت آنلاین و از خانه خود انجام دهند. این مو...

آموزش صفر تا صد ساخت فروشگاه اینترنتی
صباهاست

کاربر: صباهاست

12856

آموزش صفر تا صد ساخت فروشگاه اینترنتی

برای ساخت سایت فروشگاهی، استفاده از وردپرس یکی از گزینه های مناسب است. در حال حاضر بیش از 40.6٪ از وب سایت ها با استفاده از وردپرس طراحی شده اند. بسیاری از این...

شبکه تحویل محتوا ( CDN )  و کاربردهای آن چیست؟
صباهاست

کاربر: صباهاست

12856

شبکه تحویل محتوا ( CDN ) و کاربردهای آن چیست؟

آیا می دانید cdn یا شبکه توزیع (تحویل) محتوا چیست و چه کاربردی دارد؟ در این مقاله ابتدا به طور مفصل در خصوص چیستی، مزایا، کاربردها و تاثیر cdn بر سئو توضیح خواه...

آموزش نصب وردپرس روی لوکال هاست xampp
صباهاست

کاربر: صباهاست

12856

آموزش نصب وردپرس روی لوکال هاست xampp

وردپرس به عنوان محبوب ترین پلتفرم وب شناخته می شود. بیش از یک سوم کل وب سایت ها با استفاده از وردپرس ساخته شده اند.نصب وردپرس بر روی رایانه به ما کمک می کند ورد...