بهبود سرعت سایت

بهبود سرعت سایت با ۴ روش نوآورانه

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

۱. بهبود سرعت سایت : نگاه تازه به بهینه سازی تصاویر

از svg به جای png استفاده کنید

فرمت svg نیز یک فرمت برای تصاویر است که با توجه به اینکه برداری است، برای آیکون ها و موارد این چنینی بسیار مناسب است. اگر از آیکون هایی با فرمت png استفاده می کنید، شاید بهتر باشد که از طراح خود بخواهید که فرمت svg را به جای آنها به شما بدهد. چرا که به طور متوسط، این فرمت حدود ۶۰ درصد کمتر از فرمت png فضا اشغال می کند. در حالت قبل آیکون ها حدود ۱.۲ کیلوبایت حجم خواهند داشت که بسیار کوچک است. این مقدار کم معمولا از دید کسانی که به دنبال بهبود سرعت سایت هستند، پنهان می ماند و هیچکدام از مقالاتی که در این زمینه نوشته شده اند، به این پارامتر مهم اشاره نمی کنند.

البته ممکن است فکر کنید که با این حجم کم از تصاویر، چه فرقی می کند از کدام فرمت استفاده کنیم؟ در پاسخ باید گفت که مزیت svgها تنها در سایز آنها محدود نمی شود. بلکه شما می توانید از ابزار ake Archibald’s SVG نیز استفاده کنید. این ابزار رایگان، کمک می کند که تصاویر svg با حجم بالا را نیز فشرده کرده و بتوانید در ذخیره سازی فضا، به میزان زیادی صرفه جویی کنید. این ابزار همچنین این امکان را می دهد که شما هیچگونه افت کیفیتی در اثر کاهش حجم تصاویر نداشته باشید.

بهبود سرعت سایت

تصاویر inline

جی متریکس توصیه هایی متعددی در مورد بیت های کوچکی از CSS یا جاوا اسکریپت پیشنهاد می دهد؛ اما هرگز به تصاویر این لاین اشاره ای نمی کند. اما ما به شما می گوییم که تصاویر نیز می توانند این لاین شوند و  گاهی اوقات این رویکرد می تواند بسیار تاثیرگذار باشد. اگر بدانید که تصاویر حتی فایل های تصویری کوچک نیز لازم است روند پیچیده ای را طی کنند تا به نمایش در بیایند، متوجه می شوید که تصاویر می توانند تاثیرات کاملا واقعی روی سرعت سایت داشته باشند. بیایید به صورت عملی با تاثیرات تصاویر بر سرعت سایت آشنا شویم. در آزمایش زیر، با اتصال به اینترنت پر سرعت ۳G، یک سایت خاص مورد بررسی قرار گرفته است:

بهبود سرعت سایت

این سایت از HTTP2 استفاده نمی کند، بنابراین زمان طولانی طول می کشد که تصویر لود شود. دقت کنید که حجم تصویر ۱.۲ کیلو بایت است و بارگذاری آن حدود ۶۰۰ میلی ثانیه طول می کشد. اگر در صفحه مورد نظر ما ۳ عدد از این تصاویر وجود داشته باشد، زمان قابل توجهی طول می کشد تا تصاویر لود شوند. حال فرض کنیم که ما تصاویر این وبسایت را به فرمت svg جایگزین کرده ایم که تنها چند صد بایت حجم دارند. مزیتی که در مورد این تصاویر وجود دارد این است که شما می توانید آنها را مستقیما درون یک سند HTML قرار دهید. در این حالت، HTML فشرده شده برای این صفحه که از سرور به مرورگر ما ارسال می شود، از ۳۱۱۸۲ بایت به ۳۱،۵۳۲ بایت افزایش می یابد؛ یعنی فقط ۳۵۰ بایت افزایش برای هر ۳ تصویر!

بیشتر بخوانید: راهنمای کامل نگارش تیتر مقاله

خب حالا در نظر بگیرید که هر تصویر در ابتدا حدود ۱.۵ کیلوبایت از شبکه را به خود اختصاص می داد. در حدود ۳۵۰ بایت هدرهای HTTP برای مجموعاً ۳ تصویر در حدود ۵.۵ کیلوبایت منتقل شدند. بنابراین، به طور کلی ما مقدار محتوا را در شبکه کاهش داده ایم. این همچنین به این معنی است که بیش از ۲۰ بازدید از صفحه می تواند از ذخیره شدن این مقدار اضافی از حافظه سود ببرد. بنابراین به طور خلاصه باید گفت که سعی کنید به جای تصاویر png از svg استفاده کنید. سپس با استفاده از ابزاری که معرفی کردیم، این تصاویر را بهینه کنید. درج تصاویر با حجم کم می تواند باعث افزایش عملکرد سایت شما به میزان زیادی شود.

بهبود سرعت سایت

۲. بهبود سرعت سایت : جاوا اسکریپت را فراموش کنید! HTML همه این کارها را می تواند انجام دهد!

امروز به لطف گسترش بسیار زیاد کتابخانه های جاوا اسکریپت که راه حل های نوآورانه را پیشنهاد می دهند، تقریبا همه از آن استفاده می کنند. اما بهتر است بدانید که بیشتر کتابخانه های جاوا اسکریپت بارگیری بیشتر، سفرهای طولانی به سرور برای پرونده های اضافی و زمان اجرای بالاتری را نیاز دارند. با این وجود، HTML و CSS پیشرفت های زیادی داشته اند که بهبود عملکرد سایت را در بر دارند.

بهبود سرعت سایت

Combo box برای جستجو

کومبو باکس هایی که گزینه جستجوی متن را دارند، عناصر نسبتا ساده و متداولی در وبسایت ها هستند. کومبو باکس ها عناصر UI مفیدی هستند که کمک زیادی به کاربران وبسایت می کنند. در عین حال به کتابخانه های جاوا اسکریپت متکی هستند که به نوبه خود از CSS و JQuery نیز استفاده می کنند. یعنی برای جمع آوری دسته ای از پرونده ها باید سه رفت و برگشت مختلف به سرور صورت بگیرد:

JQuery – 101kb

Select2 JavaScript – 24kb

Select2 CSS – 3kb

 

بیشتر بخوانید: ۱۰ رویکرد برتر بازاریابی در سال ۲۰۲۰

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

بهبود سرعت سایت

جزئیات/ خلاصه

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

با این حال HTML دارای برچسب های داخلی به نام جزئیات (Details) و خلاصه (Summary) است که دقیقا برای پیاده سازی همین عملکرد طراحی شده اند. HTML این امکان را به سادگی و بدون سنگین کردن سایت به شما ارائه می دهند. این برچسب ها به روش های انعطاف پذیری می توانند با استفاده از CSS به جای نسخه های قبلی جاوا اسکریپت جایگزین شوند. شما یک نسخه ساده از آن را در این لینک می توانید مشاهده کنید.

… و چیزهای دیگر

بهبود سرعت سایت

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

 

 

۳.بهبود سرعت سایت : تنظیمات شبکه

بهبود سرعت سایت

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

TLS 1.3

TLS 1.3 یا SSL فناوری رمزگذاری است که اتصالات HTTPS را برقرار می کند. از نظر تاریخی، دو دور تنظیم مختلف بین مرورگر و سرور صورت گرفته است تا این رمزگذاری انجام شود. در واقع اگر کاربر ۵۰ میلی ثانیه از سرور فاصله داشته باشد، ۲۰۰ میلی ثانیه هر اتصال طول می کشد. استاندارد TLS 1.3 که اخیراً تعریف شده است، به جای دو مسیر رفت و برگشت، تنها یک بار این کار را انجام می دهد که باعث می شود مقدار زیادی از زمان گرانبهای کاربران هنگام اتصال اولیه به وبسایت شما ذخیره شود.

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

بهبود سرعت سایت

QUIC / HTTP 3

در طی ۲ -۳ سال گذشته، تعداد زیادی از وبسایت ها از HTTP 1.1 به HTTP 2 منتقل شده اند که می تواند یک پیشرفت واقعی برای سرعت بخشیدن به عملکرد وبسایت باشد. اما در این میان یک استاندارد با نام QUIC / HTTP 3 نیز وجود دارد که ارتباط بین مرورگر و سرور را بهینه می کند و باعث کاهش تعداد مسیرهای رفت و برگشت به سرور می شود.

دقت کنید که TLS 1.3 در حال حاضر به میزان زیادی پشتیبانی می شود و پیشرفت های قابل توجهی را برای اتصالات فراهم می کند. از طرف دیگر، QUIC / HTTP 3 تمام مزایای TLS 1.3 را شامل می شود و گزینه های دیگری را هم فراهم می کند. تنها مشکل این است که QUIC / HTTP 3 به میزان کافی پشتیبانی نمی شود و باید در ماه های آینده منتظر پیشرفت این استاندارد و امکانات آن باشیم.

Super routing

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

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

بهبود سرعت سایت

۴. بهبود سرعت سایت : اجازه بدهید که CSS کارهای بیشتری برای وبسایت شما انجام بدهد

در مقاله قبلی در مورد اینکه چطور HTML می تواند در بهبود عملکرد سایت شما مفید باشد، صحبت کردیم. در اینجا چند مثال می آوریم که نشان می دهند CSS می تواند همین کار را انجام بدهد.

استفاده مجدد از تصاویر

غالباً در چندین صفحه مواردی را پیدا می کنید که از تصاویر مشابه استفاده می کنند. به عنوان مثال، یک لوگو با رنگ های متفاوت یا فلش هایی که در هر دو جهت وجود دارند. به عنوان تصاویر منحصر به فرد (هر چند که ممکن است شبیه هم باشند)، هر یک از این تصاویر باید جداگانه بارگذاری شوند.

بهبود سرعت سایت

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

بیشتر بخوانید: ۵ راه برای استفاده ۸۰/۲۰ در گوگل ادز

 

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

بهبود سرعت سایت

عناصر تعاملی (مانند منوها و تب ها)

اغلب عناصر ناوبری مانند منوها و تب ها در جاوا اسکریپت پیاده سازی می شوند؛ اما این موارد را می توان به صورت ساده تر با CSS نیز انجام داد. برای این منظور کد موجود در این لینک را می توانید بررسی کنید.

 

انیمیشن ها

CSS3 قابلیت انیمیشن سازی قدرتمندی را در CSS ایجاد کرد. اغلب استفاده از این موارد نه تنها سریعتر از نسخه های جاوا اسکریپت هستند، بلکه می توانند با کیفیت تر هم باشند؛ زیرا می توانند به جای جاوا اسکریپت در کد بومی سیستم عامل اجرا شوند.

بهبود سرعت سایت

جمع بندی

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