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

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

 

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

 

 

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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

وقتی به دنبال فشرده سازی صفحات وب هستید دو انتخاب پیش روی شماست. استفاده از Deflate و دیگری استفاده از gzip است. Deflate به صورت پیش فرض به همراه سرورهای آپاچی Apache نصب میشود و پیکربندی آن بسیار آسان است. اما 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>

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

 

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

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

طراحی سایت و نکات اصلی آن

۷ نکته مهم در طراحی سایت

قیمت طراحی سایت

 

جهت آشنایی بیشتر با خدمات و محصولات شرکت طراحی سایت فراکارانت مشاهده صفحات زیر توصیه شده است…

 

مقایسه پلان های هاست   
مقایسه پلان های طراحی سایت       
مقایسه پلان های پشتیبانی       
مقایسه پلان های بسته خدمات امنیت SSL     
نمونه کارهای طراحی سایت        

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

روابط عمومی 5 مرداد 1401


whatsapp

برای طراحی سایت نیاز به کمک دارید؟

closewhatsapp
onewhatsapp

سلام خوش آمدید!
برای ارائه خدمات بهتر در زمینه طراحی سایت و سئو مشاوران ما در واتس اپ در خدمت شما هستند.

فهرست