چگونه می توان عملکرد سایت را افزایش داد چگونه می توان عملکرد سایت را افزایش داد

چگونه می توان عملکرد سایت را افزایش داد

طراحی سایت زمان مطالعه : ~ 14 دقیقه 27 مهر 1399

تا به حال به این موضوع فکر نکرده اید که ممکن است سایت شما به دلیل اینکه سریع بار گذاری نمی شود توسط کاربران زیادی بازدید نشود؟ 47 درصد از بازدید کنندگان شما انتظار دارند سایت شما ظرف دو ثانیه بارگیری شود , و اگر بیش از سه ثانیه طول بکشد 40 درصد آنها سایت را ترک خواهند کرد . دومین تاخیر، رضایت مشتری را حدود 16 درصد کاهش می دهد و فروش شما را 7 درصد کم می کند. به بیان صریح ، عملکرد و سرعت بارگیری سایت می تواند وب سایتی را محبوب یا تخریب کند.

برای افزایش سرعت سایت ، و در نتیجه افزایش رضایت مشتری ، دو روش وجود دارد:

  1. اندازه سایت خود را کاهش دهید: بارگیری یک سایت بزرگ زمان گیرتر است.
  2. از یک میزبانی (هاست) سریعتر استفاده کنید . یک سرور سریع زمان فشرده شدن دکمه اینتر توسط کاربر تا بارگذاری سایت را کاهش می دهد .

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

بهینه سازی سایت

کاهش اندازه سایت

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

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

تصاویر

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

می دانیم که شما می خواهید عکس های خود را در حداکثر کیفیت و در 5000px عرض نگه دارید ، اما این پرونده بیش از 10 مگابایت است و باعث می شود سایت شما در هنگام بارگذاری کاهش سرعت شدیدی داشته باشد . حتی برای یک تصویر پس زمینه تمام صفحه ، می توانید تصویر را به یک یا دو درصد از اندازه آن نوع فایل کاهش دهید ، و هنوز هم عالی به نظر برسد.

چگونه می توانیم اندازه تصاویر را کاهش دهیم؟

مرحله اول این است که تصاویر خود را در فتوشاپ باز کنید و سپس File> Save for Web را بزنید. با این کار یک صفحه ویژه با همه مواردی که برای بهینه سازی تصاویر و کاهش حجم تصویر نیاز دارید را می یابید . با تطبیق وضوح تصویر با اندازه ای که در سایت نشان می دهد شروع کنید. اگر تصویر را فقط با عرض 600 پیکسل نمایش می دهید ، پس چرا باید آن را در 1600 پیکسل نگه دارید؟ آن را کوچک کرده و از مزایای اندازه آن بهره مند شوید، تصویری با نصف عرض حتی کمتر از نصف اندازه خواهد بود. می توانید اندازه خود را دو برابر کنید (از 600 پیکسل به 1200 پیکسل) تا تصاویرتان در نمایشگرهای با وضوح بالا بسیار با کیفیت به نظر برسند ، اما نیازی به بالاتر رفتن نیست. هرچه وضوح تصویر بزرگتر باشد ، اندازه پرونده بزرگتر خواهد بود!

جدا از کاهش وضوح تصویر ، چگونه دیگر می توانیم اندازه پرونده آن را کاهش دهیم؟ روش اصلی این است که تصویر را به بهترین فرمت فایل برای کار تغییر دهید و سپس کیفیت تصویر را کاهش دهید بدون اینکه وضوح تصویر به میزان قابل توجهی کاهش یابد. انجام این کار با فقط چند کلیک ماوس نسبتاً آسان است.
JPEG ، GIF ، PNG و SVG چهار قالب اصلی فایل تصویری هستند که در وب استفاده می شوند و هر یک موارد استفاده خاص خود را دارند. اجازه دهید آنها را مرور کنیم و بیاموزیم که چگونه آنها را بهینه سازی کنیم.

JPEG

JPEG نوع اصلی پرونده است که دوربین های دیجیتال از آن استفاده می کنند. در این قالب تصویر برای کاهش شدید اندازه فایل ، داده های تصویر ساده می شوند. در این فرآیند ، کیفیت تصویر کاهش می یابد (البته به میزان تنظیمات شما بستگی دارد). برای ایجاد تعادل بین اندازه و وضوح ، شما می توانید کیفیت تصویر را در مقیاس 100-1 تنظیم کنید.
JPEG ها به دلیل ضعف اجرا شده توسط آن ها، دارای مزایای قابل توجهی در اندازه پرونده نسبت به سایر قالب ها هستند ، به همین دلیل شما باید برای 90٪ تصاویر سایت خود از JPEG استفاده کنید. PNG و GIF فقط وقتی تعداد رنگ را به شدت محدود می کنید کوچکتر هستند.
با این حال به یاد داشته باشید که شما هنوز تصاویر زیبا و با وضوح قابل قبولی می خواهید بنابراین با کاهش کیفیت تصاویر نگران نباشید. به طور کلی درصد کیفیت JPEG بین 30 تا 60 به خوبی وضوح تصویر و اندازه ی پرونده را متعادل می کند. بهتر است بررسی کنید چه چیزی برای تصاویر سایت شما بهتر است.

متأسفانه JPEG اجازه ایجاد پس زمینه شفاف را نمی دهد. این یعنی چی؟ برای مثال شما می خواهید پس زمینه یک تصویر شفاف باشد تا رنگ ناحیه پشت آن روشن شود. این با JPEG امکان پذیر نیست. در عوض ، فضای خالی پشت آرم به طور پیش فرض سفید خواهد بود. برای داشتن پس زمینه شفاف ، باید از PNG یا GIF استفاده کنید. به همین دلیل است که آرم های شرکت اغلب در قالب فایل های PNG و GIF ذخیره می شوند.

GIF

GIF یک فرمت تصویری بدون ضرر است (هیچ اطلاعات تصویری در ایجاد آن از بین نمی رود). GIF اجازه شفافیت می دهد ، اما بزرگترین مزیت آنها نمایش انیمیشن (با مدت زمان کوتاه) است. GIF معمولاً به عنوان "مینی فیلم" برای اهداف کمدی یا تصویری استفاده می شود.
GIF ها اغلب دانه دانه و با نمایش رنگی عجیب به نظر می رسند زیرا طراحان به طور کلی تعداد کل رنگ های GIF را بین 2 تا 256 مورد محدود می کنند. کاهش تعداد رنگ می تواند منجر به صرفه جویی در اندازه پرونده شود. بنابراین ، هنگام ایجاد GIF ، اگر وضوح تصویر خیلی مهم نیست ، تا آنجا که ممکن است تعداد رنگ را کاهش دهید تا اندازه پرونده آن کاهش یابد!

PNG

PNG یک قالب بدون ضرر است و دارای بالاترین کیفیت تصویر در بین تمام قالب های تصویر وب است. همانطور که قبلا ذکر شد ، PNG ها از شفافیت پشتیبانی می کنند و این دلیل اصلی استفاده از آنها در سایت شما است.
PNG ها در دو فرمت فرعی وجود دارند: PNG-24  و PNG-24 . PNG-8 بالاترین کیفیت نسخه است ، در حالی که PNG-8 با کاهش تعداد رنگ تصویر ، دقیقاً مانند GIF ها ، امکان ایجاد اندازه های کوچکتر را فراهم می کند. بنابراین ، اگر یک تصویر فقط چند رنگ برای شروع دارد (به عنوان مثال یک آرم ساده شرکت در مقابل عکس دقیق یک گل) ، از PNG-8 استفاده کنید.
می توانید از ابزارهای مختلف برای تغییر نوع استفاده کنید , این ابزار ها به طور خودکار PNG شما را به PNG-8 تبدیل کرده و هر رنگی را که تصویر در واقع استفاده نمی کند ، از بین می برد. این روند می تواند اندازه PNG های شما را تا 80٪ کاهش دهد بدون اینکه شفافیت یا کیفیت تصویر را از بین ببرد. بازدیدکنندگان شما همچنان همان تصاویر زیبا را مشاهده خواهند کرد ، و سرعت بارگذاری تصاویر را کاهش می دهند.

SVG

SVG در دسته کاملاً متفاوت از سه قالب دیگر قرار دارد ، زیرا آنها در واقع گرافیک برداری هستند – برای ایجاد SVG از نرم افزار هایی مانند Adobe Illustrator یا Sketch استفاده می کنند. اما به چه دلیل SVG با سایر فرمت ها متفاوت است ؟ خوب ، شما می توانید SVG را چندین برابر اندازه اصلی خود گسترش دهید . اندازه آنها نیز بسیار کم است و کاملاً روی نمایشگرهای با وضوح بالا ارائه می شوند و حتی می توانید با استفاده از CSS آنها را شخصی سازی کنید! در اینجا نحوه استفاده از آنها را بیشتر بیاموزید.
چگونه این همه امکان پذیر است؟ برخلاف سایر تصاویر که از پیکسل های مشخص شده تشکیل شده اند ، گرافیک برداری (SVG) از مجموعه اشکال ایجاد شده در XML (یک زبان نشانه گذاری HTML مانند) تشکیل شده است. با تغییر اندازه یک تصویر متشکل شده از پیکسل ها به راحتی کیفیت خود را از دست می دهد و پیکسل های آن نمایش داده خواهد شد ، اما تغییر اندازه در یک تصویر با فرمت SVG شکل پایه را بدون اندکی تغییر در کیفیت تصویر کاملاً حفظ می کند.

اما تصاویر SVG مناسب برای ایجاد همه تصاویر نیستند زیرا معمولا تنها از چند رنگ ساده برای نمایش تصاویر استفاده می کنند. از این رو مناسب برای طراحی لوگو , ایجاد آیکون و ... می باشد. اما می توانید عناصر متحرک بسیار جذابی را با آنها بسازید این کار از طریق CSS و JavaScript امکان پذیر می باشد .
برای ایجاد SVG ، باید از برنامه طراحی گرافیک برداری مانند Adobe Illustrator یا Sketch استفاده کنید. برای کاهش اندازه پرونده یک تصویر SVG بالاتر و فراتر از آنچه Illustrator می تواند به تنهایی انجام دهد ، از یک ابزار هوشمندانه مانند SVG-Optimizer استفاده کنید.

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

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

آیا فکر می کنید که یک تلفن 3 اینچی باید تصویری به اندازه مانیتور 32 اینچ داشته باشد تا واضح به نظر برسد؟ جواب منفی! قطعا نه. احتمالاً می توانید وضوح تصویری که در تلفن ارائه می شود را به میزان قابل توجهی کاهش دهید اما هنوز به وضوح به نظر می رسد و کاهش اندازه تصویر بسیار زیاد خواهد بود . دستگاه های تلفن همراه اغلب به اتصالات نسبتاً کند متکی هستند ، 50 درصد افراد سایت شما را با تلفن همراه مشاهده می کنند پس باید با کاهش تصاویر سایت را برای مشاهده این افراد بهینه کنید .
از دستورات CSS استفاده کنید , در واقع برای صفحه نمایش دستگاه های مختلف که سایت شما در دسترس است تصاویر پس زمینه متفاوت ارائه دهید به این معنی که تصاویر خود را در اندازه های مختلف ذخیره کنید این روند برای هر تصویر فقط چند ثانیه طول می کشد .

فشرده سازی تصاویر

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

  • اگر می خواهید در یک تصویر شفافیت ایجاد کنید ، از PNG استفاده کنید
  • برای تصاویر دارای انیمیشن ، از GIF استفاده کنید
  • برای نمادها ، آرم ها و تصاویر ساده ، از SVG ها استفاده کنید
  • اگر تصویر رنگ بسیار کمی دارد ، از PNG-8 یا GIF با تعداد رنگ کاهش یافته استفاده کنید
  • در صورت لزوم ، تصاویر ساده را از عکسهای بسیار دقیق انتخاب کنید
  • برای تصاویر رنگارنگ ، از JPEG با کیفیت تصویر پایین تر (30-60) استفاده کنید
  • تغییر اندازه تصویر نزدیک به اندازه ای که در سایت شما نمایش داده می شود. اگر با رزولوشن 50 پیکسل ارائه می شود از یک تصویر 5000 پیکسل استفاده نکنید
  • تصاویر پس زمینه کوچکتر را روی دستگاه های کوچکتر نمایش دهید. این بخشی از مفهوم طراحی تعاملی است.

غیر از موارد ذکر شده می توانید از سایر سرویس ها و خدمات موجود در وب برای بهینه سازی تصاویر مورد استفاده در سایت استفاده کنید

فشرده سازی کد های CSS و JavaScript

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

هاست سریعتر

فراتر از کوچک کردن سایت ، دو روش دیگر برای افزایش سرعت بارگذاری سایت وجود دارد:

  • اتصال به اینترنت سریعتر
  • استفاده از سرویس دهنده هایی با هاست سریعتر

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

سایر نکات بهینه سازی سایت

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

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

صفحات مشابه

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