چگونه درخواست های HTTP کمتری در طراحی وب سایت ایجاد کنیم به راحتی سرعت طراحی وب سایت را افزایش دهیم

هرچه طراحی وب سایت شما درخواست های HTTP بیشتری داشته باشد، سرعت بارگذاری طراحی وب سایت کندتر خواهد بود. بنابراین اگر بتوانید تعداد درخواست های HTTP طراحی وب سایت را کاهش دهید و نحوه بارگذاری طراحی وب سایت ها را بهینه کنید، می توانید عملکرد طراحی وب سایت خود را بهبود ببخشید.

در این پست، همه چیزهایی را که باید در مورد نحوه ایجاد درخواست های HTTP طراحی وب سایت کمتر در asp.net بدانید، به شما معرفی خواهیم کرد.

ما با مقدمه ‌ای مقدماتی در مورد درخواست‌ های طراحی وب سایت HTTP، چرایی اهمیت آنها و نحوه تجزیه و تحلیل درخواست‌ های طراحی وب سایت asp.net خود شروع می ‌کنیم.

سپس، نکات و استراتژی هایی را به اشتراک می گذاریم که می توانید برای کاهش درخواست های v خود پیاده سازی کنید. این استراتژی طراحی وب سایت ‌ها علاوه بر کمک به شما با پیام «دریافت درخواست‌ های HTTP کمتر» در GTmetrix، به پیام «اجتناب از زنجیره درخواست ‌های حیاتی» در Google PageSpeed Insights نیز کمک می ‌کنند.

فهرست مطالب طراحی وب سایت

درخواست های HTTP طراحی وب سایت چیست؟

چرا کاهش درخواست های HTTP طراحی وب سایت مهم است؟

چگونه درخواست های HTTP طراحی وب سایت خود را مشاهده و تجزیه و تحلیل کنیم

نحوه بهینه سازی و درخواست کمتر HTTP در طراحی وب سایت asp.net

بهترین افزونه های asp.net برای درخواست کمتر HTTP

درخواست های HTTP طراحی وب سایت چیست؟

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

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

به عنوان مثال، ممکن است بگوید، "هی سرور، من به فایل coolimage.png نیاز دارم" و "هی سرور، من همچنین به شیوه نامه CSS برای آن افزونه فرم تماس نیاز دارم". سپس سرور با فایل های مورد نظر به آن درخواست طراحی وب سایت ها پاسخ می دهد.

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

HTTP، مخفف Hypertext Transfer Protocol، نحوه ارتباط این کامپیوترها (مرورگر بازدیدکننده و طراحی وب سایت سرور شما) است.

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

به طور مشابه، اگر از چهار افزونه asp.net استفاده می‌ کنید و هر افزونه استایل شیت CSS طراحی وب سایت خود را اضافه می‌کند، مرورگر بازدید کننده طراحی وب سایت باید چهار درخواست HTTP طراحی وب سایت جداگانه، یکی برای صفحه طراحی وب سایت سبک هر افزونه، ایجاد کند.

چرا کاهش درخواست های HTTP طراحی وب سایت مهم است؟

به طور کلی، هرچه طراحی وب سایت شما درخواست های HTTP بیشتری داشته باشد، کندتر بارگذاری می شود. بنابراین اگر می خواهید طراحی وب سایت خود را سریعتر بارگذاری کنید، باید تعداد درخواست های HTTP طراحی وب سایت مورد نیاز طراحی وب سایت خود را بهینه سازی کرده و کاهش دهید.

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

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

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

خط آخر این است: زمانی که درخواست های HTTP کمتری ارائه می کنید، سرعت بارگذاری طراحی وب سایت خود را افزایش می دهید.

چگونه درخواست های HTTP طراحی وب سایت خود را مشاهده و تجزیه و تحلیل کنیم

در بالا، شما یاد گرفتید که اگر همه چیز برابر باشد، کاهش تعداد درخواست های HTTP سرعت طراحی وب سایت شما را افزایش می دهد. با این حال، همه درخواست‌ های HTTP طراحی وب سایت همیشه «برابر» نیستند. برخی از درخواست های HTTP طراحی وب سایت بزرگتر از سایرین هستند. برخی از آنها کندتر از دیگران هستند.

به عنوان مثال، درخواست یک فایل تصویری عظیم 3 مگابایتی بسیار بیشتر از درخواست یک تصویر کوچک 20 کیلوبایتی طول می کشد.

اگر می ‌خواهید بیشترین پیشرفت را در طراحی وب سایت خود ایجاد کنید، تمرکز بر درخواست‌ های HTTP طراحی وب سایت با بارگذاری آهسته در ابتدا بیشترین بازده سرمایه ‌گذاری شما را خواهد داشت.

برای تجزیه و تحلیل درخواست های HTTP طراحی وب سایت خود، می توانید از چیزی به نام تجزیه و تحلیل آبشار استفاده کنید.

اکثر ابزارهای تست سرعت طراحی وب سایت این را ارائه می دهند، اما رابط های GTMetrix و Pingdom بسیار راحت هستند. همچنین می توانید از ابزارهای توسعه دهنده طراحی وب سایت مرورگر خود استفاده کنید. با این حال، ما از GTmetrix برای اسکرین شات های خود استفاده خواهیم کرد

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

برای تجزیه و تحلیل درخواست های طراحی وب سایت فردی خود، به تب Waterfall در زیر بروید.

در اینجا، فهرستی از هر درخواست HTTP منفرد در طراحی وب سایت خود را به همراه اطلاعاتی درباره مدت زمان دانلود درخواست HTTP طراحی وب سایت مشاهده خواهید کرد:

می توانید ببینید که چگونه همه درخواست های HTTP طراحی وب سایت برابر نیستند. برای مثال، تصویر 839.3 کیلوبایتی 1.12 ثانیه طول می کشد در حالی که تصویر 57.6 کیلوبایت فقط 87.5 میلی ثانیه طول می کشد:

همچنین می ‌توانید درخواست‌ های HTTP را از افزون ه‌های مختلف asp.net که استفاده می ‌کنید، با جستجوی نام پوشه آن افزونه در سرور خود بیابید. به عنوان مثال، می توانید ببینید که WooCommerce هفت درخواست HTTP طراحی وب سایت خود را اضافه می کند:

به این ترتیب، می‌توانید ببینید که آیا افزونه‌هایی که استفاده می‌کنید، درخواست‌های HTTP زیادی را اضافه می ‌کنند (مخصوصاً درخواست طراحی وب سایت ‌های با بارگذاری آهسته).

نحوه بهینه سازی و درخواست کمتر HTTP طراحی وب سایت در asp.net

در سطح بالا، دو استراتژی گسترده برای ایجاد درخواست های HTTP طراحی وب سایت کمتر وجود دارد:

درخواست های HTTP طراحی وب سایت را حذف کنید. در صورت امکان، باید هر درخواست غیر ضروری HTTP طراحی وب سایت را به طور کامل حذف کنید. برای مثال، اگر افزونه‌ای دارید که ارزشی به طراحی وب سایت شما نمی‌دهد و CSS طراحی وب سایت و جاوا اسکریپت خود را بارگذاری می ‌کند، کافی است آن افزونه را کاملاً حذف کنید تا از شر تمام درخواست‌ های HTTP طراحی وب سایت خلاص شوید.

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

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

1. افزونه های غیر ضروری asp.net را حذف کنید

برای شروع، می‌خواهید از تجزیه و تحلیل آبشار استفاده کنید تا تمام درخواست طراحی وب سایت ‌ها را از افزونه ‌های خود دریافت کنید. شما می توانید این کار را با جستجوی “plugins” انجام دهید، که هر درخواست HTTP طراحی وب سایت را که از پوشه wp-content/plugins نشات می گیرد، باز می کند.

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

بررسی های بیشتر نشان می دهد که Slider Revolution سه درخواست HTTP خود را اضافه می کند، حتی اگر این صفحه طراحی وب سایت آزمایشی حاوی هیچ لغزنده ای نباشد:

اگر از Slider Revolution برای یک کلید لغزنده استفاده می کنید، شاید لازم باشد آن را نگه دارید. اما اگر آن را برای آزمایش آن نصب کرده ‌اید، سپس لغزنده را حذف کرده ‌اید، و اکنون واقعاً از آن استفاده نمی ‌کنید... پس باید آن را حذف کنید تا از شر آن درخواست‌های HTTP طراحی وب سایت خلاص شوید.

اساساً، شما می‌خواهید کل فهرست را مرور کنید و از خود بپرسید که آیا هر افزونه واقعاً به طراحی وب سایت شما ارزش می‌افزاید یا خیر. اگر افزونه ای نیست (اما درخواست های HTTP طراحی وب سایت را اضافه می کند)، بهتر است آن را حذف کنید.

2. پلاگین های سنگین را با پلاگین های سبک تر جایگزین کنید

هنگامی که پلاگین های غیر ضروری را حذف کردید، گام بعدی این است که ببینید آیا می توانید افزونه هایی را که استفاده می کنید با جایگزین های سبک تر جایگزین کنید.

به عنوان مثال، فرض کنید می خواهید دکمه های اشتراک گذاری اجتماعی را به طراحی وب سایت خود اضافه کنید. این ویژگی خوبی است، اما برخی از افزونه های اشتراک گذاری اجتماعی می توانند درخواست های HTTP طراحی وب سایت زیادی را اضافه کنند.

به عنوان مثال، افزونه محبوب AddThis شش درخواست HTTP طراحی وب سایت خود را اضافه می کند (از جمله برخی از درخواست های خارجی - بیشتر در مورد درخواست ها در یک ثانیه):

3. اسکریپت هایی را که در سرتاسر طراحی وب سایت مورد نیاز نیستند، مشروط بارگیری کنید

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

به عنوان مثال، افزونه محبوب فرم تماس ۷ را انتخاب کنید. احتمالاً فقط در چند صفحه طراحی وب سایت (به عنوان مثال صفحه طراحی وب سایت "تماس با ما") به این افزونه نیاز دارید. با این حال، فرم تماس 7 اسکریپت های خود را در هر صفحه در طراحی وب سایت شما بارگیری می کند. بنابراین، برای مثال، فرم تماس 7 هنوز هم برخی از درخواست‌های HTTP طراحی وب سایت را به پست‌های وبلاگ شما اضافه می‌کند، حتی اگر پست‌ های وبلاگ طراحی وب سایت شما هیچ فرم تماسی ندارند.

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

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

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

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

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

4. تصاویر غیر ضروری را حذف کنید (و بقیه را بهینه کنید)

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

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

به عنوان مثال، آیا آن GIF خنده دار ارزشش را دارد؟ ممکن است ... اما ممکن است نه - هر زمان که تصاویر بیشتری به محتوای طراحی وب سایت خود اضافه می کنید، باید در مورد معاوضه ها فکر کنید.

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

5. از Lazy Loading برای تصاویر و ویدیوها استفاده کنید

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

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

از asp.net اکنون شامل بارگذاری تنبل بومی برای تصاویر با استفاده از ویژگی بارگذاری HTML طراحی وب سایت است. برای برخی از روش‌ های دیگر برای اجرای بارگذاری تنبل (از جمله برای فایل ‌های ویدیویی)، می ‌توانید راهنمای کامل ما برای بارگذاری تنبل asp.ne t را بررسی کنید.

6. محدود کردن فونت های سفارشی طراحی وب سایت استفاده و/ یا استفاده از فونت های طراحی وب سایت سیستم (همانطور برای فونت های نماد)

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

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

همین امر در مورد فونت های طراحی وب سایت نماد مانند Font Awesome و IcoMoon نیز صدق می کند. فونت های طراحی وب سایت نماد می توانند مفید باشند، اما احتمالاً نیازی به بارگیری چندین کتابخانه فونت طراحی وب سایت آیکون ندارید. بهتر است فقط یک کتابخانه فونت طراحی وب سایت آیکون را انتخاب کنید و به آن پایبند باشید.

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

7. ایموجی های asp.net را غیرفعال کنید

به طور پیش فرض، asp.netدرخواست HTTP طراحی وب سایت خود را برای ایموجی ها اضافه می کند. در حالی که این تنها یک درخواست HTTP.1 کیلوبایتی است، این فایل مدت هاست که خاری در چشم طرفداران عملکرد asp.net بوده است. اینجا در webever.ir، ما عاشق عملکرد asp.net هستیم، به همین دلیل است که راهنمای کاملی در مورد نحوه غیرفعال کردن ایموجی های asp.net داریم.

ساده ترین گزینه این است که فقط افزونه رایگان غیرفعال کردن ایموجی (GDPR friendly) را نصب و فعال کنید. با این حال، می توانید راهنمای کامل ما را برای برخی از گزینه های دیگر بخوانید.

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

8. کاهش/ حذف درخواست های HTTP طراحی وب سایت شخص ثالث

تا کنون، ما عمدتاً بر روی کاهش درخواست ‌های HTTP طراحی وب سایت برای فایل‌ها در سرور طراحی وب سایت asp.net شما تمرکز کرده‌ ایم. با این حال، مرورگرهای بازدیدکنندگان طراحی وب سایت شما همچنین ممکن است نیاز به درخواست فایل ‌ها از سرورهای شخص ثالث داشته باشند.

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

چند نمونه:

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

ویدیوهای یوتیوب جاسازی شده - تعداد زیادی درخواست HTTP طراحی وب سایت را به سرورهای YouTube خواهید دید.

خدمات تبلیغات شخص ثالث - تعداد زیادی درخواست شخص ثالث را در رابطه با ارائه تبلیغات طراحی وب سایت خود مشاهده خواهید کرد.

فونت‌های Google در CDN Google – درخواست ‌های شخص ثالث به سرورهای Google برای بارگیری فایل‌ های فونت طراحی وب سایت خود را خواهید دید.

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

به یک راه حل میزبانی نیاز دارید که به شما مزیت رقابتی بدهد؟ webever.ir با سرعت باورنکردنی، امنیت پیشرفته و مقیاس ‌بندی خودکار شما را تحت پوشش قرار می‌دهد. برنامه های ما را بررسی کنید

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

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

برای اسکریپت‌ های شخص ثالث که ضروری هستند، مانند Google Analytics یا Facebook Pixel، می ‌توانید میزبانی محلی آن اسکریپت طراحی وب سایت ‌ها را آزمایش کنید.

WP Rocket دارای افزونه ‌های داخلی برای میزبانی Google Analytics و Facebook Pixel به صورت محلی است یا می ‌توانید از افزونه ‌ای مانند CAOS (مجموعه بهینه‌ سازی تحلیل کامل) استفاده کنید.

ما همچنین راهنماهایی داریم که ممکن است کمک کند:

نحوه میزبانی فونت طراحی وب سایت ها به صورت محلی

نحوه میزبانی طراحی وب سایت Google Analytics به صورت محلی

9. تصاویر را با CSS Sprites ترکیب کنید

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

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

CSS sprites برای تصاویر تزئینی مانند تغییرات لوگو یا نمادها بهترین کار را دارد. شما نباید از CSS sprites برای تصاویر اطلاعاتی (مانند تصاویر در بدنه یک پست وبلاگ طراحی وب سایت) استفاده کنید زیرا دو اشکال بزرگ وجود دارد:

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

دسترس ‌پذیری – چون نمی ‌توانید متن جایگزین به تصاویر اضافه کنید، افرادی که دارای صفحه‌ خوان طراحی وب سایت هستند نمی ‌توانند تصاویر بارگذاری ‌شده طراحی وب سایت با sprites CSS را درک کنند (اگرچه تاکتیک طراحی وب سایت ‌هایی برای رفع این مشکل وجود دارد).

اگر هنوز در مورد این موضوع سردرگم هستید، در اینجا مثالی از فایل CSS sprite آمازون آمده است – می توانید ببینید که چگونه شامل تعدادی از تغییرات لوگو و همچنین برخی از نمادها می شود. آمازون از CSS طراحی وب سایت استفاده می کند تا مطمئن شود که فقط «بخش» مربوط به آن فایل تصویری در هر مکان نمایش داده می شود:

متأسفانه، هیچ افزونه طراحی وب سایت asp.net «تنظیم و فراموش کن» برای CSS sprites وجود ندارد. با این حال، می توانید ابزارهایی برای کمک پیدا کنید، مانند این ابزار CSS Sprite:

تصاویری را که می خواهید ترکیب کنید در ابزار آپلود کنید.

سپس این ابزار یک فایل تصویر ترکیبی به همراه مقداری کد CSS طراحی وب سایت برای هر تصویری که آپلود کرده اید به شما می دهد.

فایل تصویر ترکیبی را در طراحی وب سایت asp.net خود آپلود کنید.

از کد CSS طراحی وب سایت برای نمایش تصویر در محتوای طراحی وب سایت خود استفاده کنید. CSS طراحی وب سایت ارائه شده به طور خودکار فقط بخش مناسبی از فایل تصویر ترکیبی را انتخاب می کند.

10. فایل های CSS و JavaScript را با هم ترکیب کنید

بین قالب asp.net و افزونه‌ طراحی وب سایت های شما، احتمالاً طراحی وب سایت شما چندین استایل شیت CSS طراحی وب سایت و فایل‌های جاوا اسکریپت را بارگیری می‌ کند، به این معنی که چندین درخواست HTTP طراحی وب سایت فقط برای مرورگر برای دانلود CSS طراحی وب سایت و جاوا اسکریپت مورد نیاز برای ارائه صفحه طراحی وب سایت.

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

بسیاری از افزونه های کش طراحی وب سایت asp.net دارای ویژگی هایی برای ترکیب فایل های CSS طراحی وب سایت و جاوا اسکریپت هستند. به عنوان مثال، WP Rocket، که می توانید در webever.ir از آن استفاده کنید، به شما امکان می دهد هر دو را با چند کلیک فعال کنید.

در تنظیمات WP Rocket به تب File Optimization بروید. سپس، minification را فعال کنید و سپس فایل طراحی وب سایت ها را ترکیب کنید:

برای نگاه دقیق تر، راهنمای کامل WP Rocket ما را بررسی کنید.

همچنین می توانید از Autoptimize برای ترکیب فایل های CSS و JavaScript استفاده کنید. برای ترکیب فایل‌ ها، به تنظیمات → Autoptimize بروید و گزینه‌های زیر را انتخاب کنید:

• جمع آوری فایل های JS طراحی وب سایت
• جمع آوری فایل های CSS طراحی وب سایت

برای مشاهده جزئیات بیشتر، آموزش کامل Autoptimize ما را بررسی کنید.

مزایای ترکیب فایل با HTTP/2 کمتر مشخص است، این همان چیزی است که طراحی وب سایت شما در صورت میزبانی در webever.ir از آن استفاده می کند. HTTP/2 طوری طراحی شده است که در انتقال چندین فایل کوچک کارآمدتر باشد، به این معنی که تفاوت کمتری بین یک فایل بزرگ CSS/JS و چندین فایل کوچک طراحی وب سایت وجود دارد.

اساساً، اگر در webever.ir میزبانی می کنید، ممکن است نیازی به انجام این مرحله برای بهبود زمان بارگذاری صفحه طراحی وب سایت خود نداشته باشید. به این دلیل که مشتریان webever.ir می ‌توانند مستقیماً در داشبورد webever.ir به ویژگی کوچک ‌سازی کد دسترسی داشته باشند. این به افزایش بهینه‌ سازی کلی کمک می ‌کند و به مشتریان طراحی وب سایت اجازه می‌ دهد تا CSS طراحی وب سایت و جاوا اسکریپت کوچک ‌سازی خودکار را با یک کلیک ساده فعال کنند.

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

با این حال، بسیاری از ابزارهای تست عملکرد طراحی وب سایت مانند GTmetrix هنوز HTTP/2 را تشخیص نمی‌ دهند، بنابراین GTmetrix ممکن است همچنان پیام «کمتر کردن درخواست‌ های طراحی وب سایت HTTP» را نمایش دهد و امتیاز شما را کاهش دهد. با این حال، به یاد داشته باشید - امتیازها به اندازه زمان بارگذاری واقعی صفحه طراحی وب سایت مهم نیستند.

11. Render-Blocking JavaScript را به تعویق بیندازید

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

همچنین می ‌تواند به پیام «جلوگیری از زنجیره درخواست ‌های حیاتی» در Google PageSpeed Insights/Lighthouse کمک کند.

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

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

سپس، می ‌توانید راهنمای دقیق ما را برای حذف منابع مسدودکننده رندر در asp.net دنبال کنید.

بهترین افزونه های asp.net برای درخواست کمتر HTTP

اگر به دنبال چند افزونه طراحی وب سایت asp.net «همه در یک» هستید تا درخواست‌های HTTP کمتری داشته باشید، دو مورد از افزونه ‌های آموزش بالا را توصیه می ‌کنیم:

WP Rocket-

Perfmatters-

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

درخواست های HTTP بیشتر = زمان بارگذاری طراحی وب سایت کندتر.

خلاصه

هر منبع جداگانه در طراحی وب سایت شما یک درخواست HTTP اضافه می کند. یک تصویر یک درخواست HTTP طراحی وب سایت ، یک شیوه نامه CSS یک درخواست طراحی وب سایت HTTP، یک فایل فونت یک درخواست HTTP طراحی وب سایت و غیره است.

اگر از asp.net استفاده می کنید، موضوع شما مطمئناً درخواست های HTTP طراحی وب سایت خود را اضافه می کند و بسیاری از افزونه طراحی وب سایت ها نیز درخواست های HTTP طراحی وب سایت خود را اضافه می کنند. همچنین درخواست‌ های HTTP طراحی وب سایت از هر تصویری که استفاده می‌کنید و اسکریپت ‌های شخص ثالثی که اضافه می‌ کنید (مانند ابزار های تحلیلی) خواهید داشت.

درخواست های HTTP طراحی وب سایت بیشتر و/ یا بزرگتر منجر به کندی طراحی وب سایت می شود. به همین دلیل است که وقتی از ابزارهای تست سرعت طراحی وب سایت مانند GTmetrix یا PageSpeed Insights استفاده می‌کنید، معمولاً پیام‌ هایی مانند «درخواست ‌های HTTP کمتر» یا «بهینه ‌سازی درخواست ‌های HTTP » یا «اجتناب از زنجیره درخواست‌ های حیاتی» را می ‌بینید.

برای کاهش تعداد درخواست های HTTP در طراحی وب سایت خود، می توانید مراحلی را که در بالا توضیح دادیم دنبال کنید.

آیا هنوز در مورد نحوه ایجاد درخواست های HTTP طراحی وب سایت کمتر در asp.net سؤالی دارید؟ در نظرات به ما اطلاع دهید!