(2 votes, average: 5٫00 out of 5)

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

طراحی سایت کم حجم

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

مولتی مدیا در طراحی سایت:

بخش بسیار مهمی از یک قالب سایت را تصاویر و عناصر گرافیکی تشکیل میدهد که از این تصاویر در زیباسازی منو ها , تصویر زمینه , لوگو ها , بنر ها و … استفاده میشود. در مقاله استفاده از تصاویر در طراحی سایت خواندید که سایز تصویر باید به اندازه بخش مورد نظر تعیین شود و حجم آن تیز بوسیله فتوشاپ یا ابزارهای دیگر کاهش پیدا کند. برای تصاویری که در سایت استفاده میکنید حجم زیر ۵۰ کیلیوبایت و فرمت های jpeg یا png پیشنهاد میشود تا بتوانید به کم ترین حجم ممکن برسید.

اگر از سیستم مدیریت محتوی وردپرس استفاده میکنید حتما افزونه Smushit را نصب و فعال کنید. این افزونه رایگان به صورت اتوماتیک تصاویر آپلود شده توسط شما را فشرده و کم حجم میکند بدون اینکه تغییری در کیفیت آن انجام شود

غیر از تصاویر بخش دیگری که باعث کاهش سرعت سایت و افزایش حجم صفحات سایت میشود استفاده از فایل فلش است. فایلهای فلش حجم بسیار بالایی دارد و اگر مجبور نیستید از آنها استفاده نکنید. فایلهای فلش علاوه بر اینکه حجم صفحات را بالا میبرد برای نمایش داده شدن نیز با مشکلاتی همراه است چون ممکن است شما بخشهای مهمی از مطالب سایت را بصورت فلش در سایت قرار داده باشید و به دلیل نبودن پلاگین فلش در مرورگر کاربر یا استفاده کاربر از مویابل برای دیدن سایت شما , او نتواند بخش فلش را مشاهده کند و نهایتا بدون کسب نتیجه سایت شما را ترک کند

تکنیک های برنامه نویسی :

جالب است بدانید نوع و تکنیک برنامه نویسی شما هم در کاهش حجم طراحی سایت شما موثر است.به عنوان مثال تقریبا در ۹۰ درصد قالبهای امروزی ار فایل CSS و جاوا برای بهینه سازی و زیبایی بصری سایت و همچنین اضافه کردن بخشهای جانبی به سایت استفاده میشود. اگر بخواهیم سایت از نظر کد نویسی سبک باشد باید استاندارد هایی رعایت شود از جمله اینکه اگر شما چند فایل css برای بخشهای مختلف سایت دارید میتوانید تمام آنها را با هم ادغام کرده و یک فایل نهایی داشته باشید. با این کار وقتی کاربری به سایت شما مراجعه میکند فقط یک بار برای خواندن فایل css به هاست شما درخواست ارسال میکند و با این روش سرعت سایت بسیار زیاد میشود.

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

فشرده سازی سایت :

وقتی شما قصد دارید وارد یک سایت شوید و آدرس آن سایت را در مرورگر خود وارد میکنید.چند مرحله انجام میشود تا آن سایت برای شما نمایش داده شود.در ابتدا مرورگر شما (Internet explorer , Firefox ,….) یک پیام به وب سرور میفرستد و در خواست میکند تا آن صفحه از سرور برای مرورگر شما بارگذاری شود. در مرحله بعد سرور در فایلهای خود به دنبال صفحه مورد نظر شما میگردد و در نهایت آن صفحه را به مرورگر شما میفرستد تا شما بتوانید سایت مورد نظرتان را ببینید.هر چه این مراحل سریعتر انجام شود , سایت مورد نظر زودتر برای شما بارگذاری میشود. که همه کاربران به دنبال همین هستند

طبیعی است که هیچ کاربری دوست ندارد چند دقیقه برای بارگذاری سایت شما وقت بگذارد و هرچه سایت شما سریعتر باشد کاربر پسند تر میشود و در نتیجه موتورهای جست و جو به این سایتها امتیاز بیشتری میدهند.امروزه سایتهای معتبر به دنبال زمان لود شدن زیر ۵ ثانیه هستند. اما مشکل اینجا آغاز میشود که حجم سایت مورد مورد نظر زیاد شود . برای این سایتها زمان زیادی طول میکشد تا فایلها از سرور خوانده شود و به مرورگر فرستاده شود و در نتیجه زمان انتظار کاربر برای مشاهده سایت زیاد میشود که نتیجه آن در اکثر مواقع این است که کاربر از مشاهده سایت انصراف میدهد و به سراغ سایت دیگری میرود. با استفاده از gzip میتوانید حجم صفحات سایت را تا ۷۰% کاهش دهید که این یعنی کاهش چشمگیر زمان لود شدن سایت

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

انواع فشرده سازی در وب Deflate یا gzip :

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

Deflate به صورت پیش فرض به همراه سرورهای آپاچی Apache نصب میشود و پیکربندی آن بسیار آسان است اما gzip باید توسط کاربر نصب شود و راه اندازی آن سخت تر است. اما کارآیی بسیار بیشتری دارد و فشرده سازی قوی تری انجام میدهد که خصوصا برای سایتهایی که مقدار زیادی تصویر و فایلهای حجیم در صفحات سایت خود دارند کاربرد دارد.

به بیان دیگر اگر شما بیش از ۲۰۰۰ بازدید یکتا در روز دارید Deflate برای شما بهتر است زیرا منابع کمتری برای فشرده سازی فایلها نیاز دارد و در نتیجه حجم زیاد کاربران باعث کند شدن سایت شما نخواهد شد. اما استفاده از gzip در سایتهایی که بازدید بالایی دارند باعث کند شدن سایت میشود خصوصا در هاست اشتراکی. اگر سرور اختصاصی دارید میتوانید به فکر استفاده از gzip هم باشید.

تنظیمات فشرده سازی فایل با deflate :

فعال سازی این نوع فشرده سازی بستگی به نوع وب سروری دارد که شما استفاده میکنید. معمولا از وب سرور آپاچی استفاده میشود که در آن میتوان با افزودن چند خط کد جدید به فایل .htaccess عملیات فشرده سازی را فعال کنید.
برای دسترسی به این فایل از طریق پنل مدیریت هاست خود یا از طریق اف تی پی وارد قسمت مدیریت فایلهای سرور شوید و در پوشه اصلی میتوانید فایل .htaaccess را ببینید. برای مثال اگر ادرس سایت شما www.sample.com باشد. آدرس این فایل به صورت www.sample.com/.htaaccess است.

این نکته را به خاطر داشته باشید که فایل .htaaccess توسط مرورگر و با تایپ کردن آدرس آن قابل دسترسی نیست و فقط باید وارد قسمت میدیریت فایل سرور شوید تا بتوانید این فایل را ببینید.

پس از اینکه این فایل را در قسمت روت یا پوشه اصلی سرور خود پیدا کردید میتوانید توسط یک ویرایشگر متنی ساده مانند notepad آن را باز کنید و طبق نیاز خود کدهای زیر را به آن اضافه کنید و سپس مجددا فایل را ذخیره کنید.

اگر میخواهید تمام فایلهای متن و html سایت شما فشرده شوند از کد زیر استفاده کنید :

AddOutputFilterByType DEFLATE text/plain


AddOutputFilterByType DEFLATE text/html

اگر میخواهید فایل های xml سایت شما فشرده شوند از کد زیر استفاده کنید :

AddOutputFilterByType DEFLATE text/xml


AddOutputFilterByType DEFLATE application/xml


AddOutputFilterByType DEFLATE application/xhtml+xml


AddOutputFilterByType DEFLATE application/rss+xml

اگر میخواهید فایل های javascript و css سایت شما فشرده شوند از کد زیر استفاده کنید :

AddOutputFilterByType DEFLATE text/css


AddOutputFilterByType DEFLATE application/javascript


AddOutputFilterByType DEFLATE application/x-javascript

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

برای فشرده سازی فایل html :

<Files *.html>


SetOutputFilter DEFLATE


</Files>

علامت ستاره * نشان دهنده تمامی فایلها است. در کد بالا یعنی تمامی فایلهایی که پسوند html دارند.

و اگر میخواهید تمامی فایلهای css را فشرده کنید از کد زیر استفاده کنید :

<Files *.css>


SetOutputFilter DEFLATE


</Files>

اگر نگران این هستید که انجام دادن این تنظیمات باعث بوجود آمدن مشکل برای هاست شما شود و یا توانایی انجام ان را ندارید میتوانید از شرکت سرویس دهنده خود کمک بگیرید و از آنها بخواهید این تنظیمات را برای شما انجام دهند.

توجه داشته باشید فعال کردن فشرده سازی بر روی سرور تاثیرات شگفت انگیزی برای بهبود سئو سایت شما دارد چون هم سرعت سایت شما را افزایش میدهد و هم باعث کاهش Bounce rate سایت شما خواهد شد. در کنار فعال سازی فشرده سازی بر روی سرور میتوانید از پلاگین بسیار قدرتمند w3 total cache برای سیستم مدیریت محتوی وردپرس و حتی از یک CDN استفاده کنید.

استفاده از این تکنیک ها در طراحی سایت باعث میشود که سایت شما و قالب طراحی شده به کمترین حجم ممکن برسد و با بیشترین سرعت در مرورگر کاربر نمایش داده شود. شاید در ابتدا انجام دادن این تکنیک ها کمی گیج کننده به نظر برسد ولی با چند بار تمرین خواهید دید که چقدر آسان است و چه تاثیری در طراحی سایت شما دارد.

دسته بندی : مقالات طراحی سایت
برچسب ها : انواع فشرده سازی در وب Deflate یا gzip, تکنیک های برنامه نویسی, طراحی سایت کم حجم, فشرده سازی سایت, مولتی مدیا در طراحی سایت, کاهش حجم طراحی سایت

طراحی سایت کم حجم

مولتی مدیا در طراحی سایت:

تکنیک های برنامه نویسی :

مقالات مرتبط :