طراحان و برنامه نویسان وب در طول طراحی و پیاده سازی وب سایت با آیتم های متنوعی از قبیل تصاویر، فایل های css و js و موارد دیگر این چنینی مواجه هستند که برای طراحی بهتر و با کیفیت تر وب سایت حرفه ای خود باید با ابزارهایی آشنا شوند که بتوانند از آنها برای بهبود کیفیت طراحی سایت خود استفاده نمایند.
در این مقاله به معرفی ابزارهای مهم و کاربردی در زمینه طراحی وب خواهیم پرداخت. 5 گروه از ابزارهای بهینه سازی در ادامه معرفی شده اند.
1-فشرده سازی تصاویر
همیشه در طراحی وب سایت ها تصاویر نقشی بسیار پررنگ دارند و تقریبا همه وب سایت ها دارای تعدادی تصاویر در ابعاد و سایزهای مختلف می باشند. در مقاله اندازه و حجم تصاویر در طراحی و پیاده سازی وب سایت ها(قسمت اول) با انواع تصاویر و مدیریت آنها در وب سایت ها کاملا آشنا شدیم.هدف ما در این قسمت حجم تصاویر می باشد که می تواند برای ما در طراحی وب سایت ها مشکل کندی ایجاد نماید.
برای این کار ابزارهای آنلاینی وجود دارد که می توانیم براحتی تصاویر خود را در این سرویس آنلاین آپلود کرده و با تصویر نهایی را با حجم بسیار پایین تر و با همان کیفیت به صورت رایگان دریافت نماییم.
وب سایت های compressjpeg.com و compresspng.com از بهترین ها در این زمینه می باشند که یکی برای فایل های jpg و دیگری برای فشرده سازی فایل ها با فرمت png می باشد.
2- فشرده سازی فایل css و js
به دلیل حرفه ای شدن و زیباترشدن وب سایت ها تعداد و حجم فایل های css و js رو به افزایش است. همگی می دانیم که برای هر کدام از این فایل ها درخواستی از مرورگر کاربر به سمت سرور ارسال می شود تا فایل مورد نظر را دریافت نماید. ما باید پس از نهایی شدن طراحی سایت خود به سراغ minify کردن و همچنین یکی کردن فایل ها css و js با یکدیگر برویم. بهتر است در صورت امکان تعداد فایل ها نیز کاهش پیدا کند. مثلا 4 فایل css در یک فایل قرار گیرد و با یک درخواست انجام گیرد. این عمل در asp.net mvc با نام bundle شناخته می شود.
برای فشرده کردن فایل های css می توان از وب سایت cssminifier.com استفاده کرد. شما کدهای خود را در آن کپی می نمایید و در نهایت کدهای فشرده سازی شده css خود را مشاهده می نمایید.
برای فایل های js نیز می توانید از وب سایت jscompress.com استفاده نمایید و حجم فایل های خود را کاهش دهید. حتی می توانید چندین فایل js را اضافه نموده و در نهایت یک خروجی دریافت نمایید. فقط باید مراقب ترتیب و الویت فایل ها باشید. اگر این ترتیب بهم بریزد و فایل jquery.js در آخر این فایل باشد امکان دارد متدهای فایل های دیگر از کار بیفتد(البته در صورتیکه در متدهای خود از توابع jquery استفاده شده باشد).
3- تولید تصاویر در اندازه و شکل دلخواه
در طراحی وب سایت ها همیشه در طراحی اولیه یک مشکل اصلی برای همگی ما به وجود می آید. شما در حال طراحی قسمت های مختلف هستید و عموما تصاویری با اندازه های دلخواه ندارید تا به صورت موقت در این قسمت ها قرار دهید تا طرح شما تکمیل گردد. عموما در اینترنت جستجو می کنید تا تصاویر پیدا شود و در نهایت تصاویری مناسب و با اندازه دلخواه در آن لحظه پیدا نخواهید کرد.
وب سایت هایی وجود دارند که برای ما تصاویر مختلف در اندازه های دلخواه تولید می نمایند. یکی از بهترین ها وب سایت placeimg.com می باشد که شما می توانید سایز تصویر، نوع تصویر و چیزهای مختلف را انتخاب و در نهایت تصویر دلخواه را دانلود و در سایت خود قرار دهید.
4- وب سایت طراحی شده را در ابعاد مختلف تست نماییم.
امروزه طراحی به صورت Responsive (قابلیت نمایش با کیفیت مناسب در ابعاد مختلف) یکی از مهم ترین ویژگی وب سایت ها می باشد.بیش از 60 درصد کاربران با گوشی ها هوشمند خود وب سایت ها را مشاهده می کنند. برای همین باید وب سایتی که طراحی می شود در نهایت بر روی ابعاد مختلف تست گردد. با وجود اینکه امکان تست سخت افزاری و واقعی بر روی ابعاد مختلف به سادگی امکان پذیر نیست، از شبیه سازها برای تست استفاده می شود.
ما می توانیم هم از شبیه سازهای خود مرورگرها مثلا گوگل کروم استفاده نماییم و هم از شبیه سازهای آنلاین برای تست وب سایت خود استفاده کنیم. یکی از شبیه سازهای خوب وب سایت quirktools.com/screenfly می باشد. شما می توانید در ابعاد و گوشی های مختلف، وب سایت خود را تست نمایید. وب سایت خوب دیگر برای شبیه سازی ابعاد مختلف وب سایت ready.mobi می باشد که با ظاهری زیبا وب سایت شما را در ابعاد مختلف نمایش می دهد.
5- ابزارهای تست سئو و نکات فنی وب سایت
در مرحله نهایی طراحی وب سایت، بعد از اینکه مراحل بالا را انجام دادیم و وب سایت آماده قرارگرفتن در دسترس عموم شد، باید چندکار مهم دیگر انجام شود. امروزه بحث سئو (رتبه و جایگاه در موتورهای جستجو) یکی از مهم ترین مسائل در طراحی وب سایت ها می باشد. برای بهینه سازی رتبه وب سایت در موتوهای جستجو و بهتر دیده شدن بحث های مفصلی باید انجام شود که شما می توانید در مقالات بهینه سازی وب سایت آنها را مطالعه نمایید. اما در اینجا هدف و منظور ما کارهای فنی (on-page seo) است که باید در طراحی و پیاده سازی وب سایت از طرف طراح انجام شود. برای چک کردن سئوی on-page باید به سراغ ابزارهای آنلاین برویم و صفحات وب سایت خود را توسط آنها تست نماییم. سپس از گزارش هایی که این وب سایت ها به ما می دهند به سراغ کدهای خود رفته و مشکلات را برطرف نموده و مجدد صفحات خود را توسط این ابزارهای آنلاین تحیل سئو، تست نماییم.
- ابزار بهینه سازی gtmetrix.com : این وب سایت یکی از کامل ترین گزارش های تحلیلی سئو را در بین ابزارهای آنلاین سئو دارد. در گزارش نهایی این وب سایت شاخص YSlow مهم تر از سایر شاخص ها می باشد. این شاخص دلایلی که باعث شده اند وب سایت ما کند باشد را نشان می دهد. به وب سایت امتیازی از نمره 100 می دهد که این نشان دهنده سرعت لود صفحه می باشد. عدد نرمال برای این شاخص 79 می باشد. شما می توانید در لیستی که زیر شاخص YSlow نمایش داده می شود دلایل کندی صفحه مورد نظر از وب سایت خود را مشاهده نمایید و آن مشکلات را برطرف نموده و مجدد روی وب سایت خود تحلیل سئو انجام دهید.
- ابزار بهینه سازی seositecheckup.com : با گرفتن آدرس وب سایت شما، گزارش کاملی از وضعیت سئوی درون صفحه ای شما نمایش می دهد که می توانید موارد را مورد به مورد مشاهده کرده و مشکلات را برطرف نمایید و در نهایت امتیاز سئوی وب سایت خود را افزایش دهید.
- نرم افزار دسکتاپ Screaming Frog : به کمک این نرم افزار که به صورت نرم افزار دسکتاپ می باشد و باید برای استفاده بر روی سیستم عامل شما نصب شود. با گزارش هایی که این نرم افزار در رابطه با مسائل فنی وب سایت شما می دهد می توانید بسیاری از مشکلات را برطرف نموده و وب سایت خود را با سئوی بهتری راه اندازی نمایید.
- ابزار بهینه سازی tools.pingdom.com : وب سایت pingdom سال های زیادی است که در زمینه مانیتورینگ وب سایت ها و ارائه سرویس های بهینه سازی وب سایت فعالیت می نماید. سرویس گزارش گیری وضعیت سئو و عملکرد این وب سایت کامل بوده و به ترتیب به شما نشان می دهد که وب سایت در چه بخش هایی چه امتیازی دارد.
شما با استفاده از ابزارهایی که معرفی شد می توانید کیفیت وب سایتی که طراحی می کنید را تا حد خیلی زیادی افزایش دهید و باعث رضایت مندی بیشتر کاربران از کاربری و سرعت وب سایت خود شوید. همچنین با رعایت اصول سئو و بهینه سازی صفحات وب سایتی که طراحی کرده اید، می توانید رتبه وب سایت را در موتورهای جستجو افزایش دهید.
امیدوارم در مطالب آینده بتوانیم تعدادی از این سرویس ها، مخصوصا در بخش بهینه سازی وب سایت را به صورت کامل معرفی نماییم.