صفحه اصلی
>
طراحی سایت
>
برای کاهش حجم طراحی سایت چکار باید بکنیم

برای کاهش حجم طراحی سایت چکار باید بکنیم

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

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

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

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

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

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

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

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

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

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

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

کاهش حجم طراحی سایت از طریق تکنیک های برنامه نویسی :

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

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

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

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

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

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

طبیعی است که هیچ کاربری دوست ندارد چند دقیقه برای بارگذاری سایت شما وقت بگذارد و هرچه سایت شما سریعتر باشد کاربر پسندتر میشود. در نتیجه موتورهای جستجو به این سایتها امتیاز بیشتری میدهند. امروزه سایتهای معتبر به دنبال زمان لود شدن زیر ۵ ثانیه هستند.

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

با استفاده از gzip میتوانید کاهش حجم طراحی سایت را تا ۷۰% داشته باشید. این یعنی کاهش چشمگیر زمان لود شدن سایت.

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

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

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

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

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

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

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

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

پس از اینکه این فایل را در قسمت روت یا پوشه اصلی سرور خود پیدا کردید میتوانید توسط یک ویرایشگر متنی ساده مانند 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 استفاده کنید.

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

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

سایر مقالات مرتبط

طراحی سایت و استانداردهای صفحات فرود

تفاوت UI با UX در طراحی سایت

نقش فرمها در طراحی سایت

کنترل کیفیت در طراحی سایت

اهمیت طراحی سایت در شبکه های اجتماعی

طراحی وب سایت و تاثیرات منفی خرید لینک

نقش طراحی سایت در سئو و رنکینگ

فاکتورهای مهم بهینه سازی سایت

صفر تا صد راه اندازی و طراحی سایت

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