یکی از خطاهایی که هنگام تست سرعت سایت با GTmetrix بیشتر به چشم می‌خورد، با نام Enable Keep Alive هست. این قابلیت مربوط به تعداد درخواست‌ها از سرور برای لود فایل‌ها و داده‌ها از سایت است. این قابلیت با عنوان keep alive شناخته شده که در این بخش به توضیح اینکه keep alive چیست و چطور می‌توانیم keep alive را در سایت فعال کنیم خواهم پرداخت. این قابلیت به مرورگر اجازه می‌دهد تا به صورت همزمان بتواند بیش از یک فایل را از سمت سرور دریافت کند. به عبارت دیگر وقتی آدرس صفحه سایتی رو باز می‌کنید و فایل‌های CSS، جاوا اسکریپت، تصاویر و… شروع به لود شدن می‌کنند تا بعد از لود کامل ظاهر یک سایت و محتویاتش به شما نشان داده شود، فعال بودن keep alive این امکان را می‌دهد که همه این فایل‌ها به صورت همزمان شروع به لود کنند. نه اینکه لازم باشد مثلا در یک مرحله فایل‌های css به نوبت لود شوند، در مرحله بعد تصاویر و به همین ترتیب پیش برود تا سایتی کامل بالا بیاد.
- یک نکته! برای فعال‌سازی این مورد نیاز به دسترسی کامل سرور دارید و اگر مدیر سرور نیستید، لازم است تا به پشتیبان هاستینگ خود بگویید این مورد را فعال کنند.
- رفع خطاهای GTmetrix و افزایش سرعت بارگذاری – بخش دهم
هنگامی که به بخش waterfall مراجعه کنید، داده‌هایی رو میبینید که هر فایلی که در سایت لود می‌شود را مشخص کرده که چه مقدار زمان برای لود هر کدام مورد نیاز هست. یک خط زمانی برای هر فایل بسته به حجم آن به شما نمایش داده می‌شود که این فایل‌ها بسته به تنظیمات سرور می‌توانند همگی در یک آن واحد شروع به دریافت از سرور کنند یا این که به صورت تک تک این کار انجام بگیرد. بهترین راه کار این است که این کار همزمان انجام بگیرد تا مدت زمان لود سایت زیاد طول نکشد، اما برخی شرکت‌های هاست ممکن است تا بنا به سیاست کاری که دارند، این قابلیت رو غیرفعال کرده باشند.
Keep-Alive چیست؟
در صورت فعال نبودن قابلیت Keep-Alive در سایت فایل‌های CSS، جاوا اسکریپت، html و… به صوت جدا از هم بارگذاری خواهند شد. یعنی هنگامی که شما سایتی را وارد می‌کنید، ابتدا اون صفحه در حالت HTML شروع به دریافت در پس زمینه مرورگر می‌کند و بعد آدرس‌هایی که داخل این صفحه html وجود دارد و شامل فایل‌های css و js می‌شود یک به یک بررسی شده و در هر بار که به آدرس یکی از این فایل‌ها برسد، یک درخواست برای بارگذاری هر کدام به سرور ارسال خواهد شد. در این صورت اگر چندین فایل وجود داشته باشد و از طرف دیگر به خاطر بازدید همزمان بالا این درخواست‌ها مدام از طرف کاربرها به سرور ارسال شوند، سایت با کندی مواجه می‌شود. چرا که باید همه این درخواست‌ها تک به تک بررسی شده و پاسخ مناسب به شما داده شود.
وقتی قابلیت Keep-Alive فعال باشد، همه فایل‌ها css و js در دو درخواست جدا از هم از سرور خواسته می‌شود و یک باره شروع به دریافت در یک خط زمانی خواهند کرد. پس در این صورت کاهش تعداد درخواست در سایت ایجاد شده و باعث افزایش سرعت سایت و رفع کندی در سایت خواهد شد.
فعال کردن Keep Alive از طریق htaccess. در وردپرس
حالا برای این که این قابلیت را در وردپرس فعال کنید، کافیست کد زیر را در انتهای فایل htaccess. هاست خودتان قرار داده و ذخیره کنید تا قابلیت Keep Alive در سایت فعال شود! همه فایل‌های css، js، تصاویر و… در یک بار درخواست از سرور شروع به دریافت کنند. برای این منظور وارد هاست خود شده و روی گزینه File Manager کلیک کنید. سپس در مسیری که وردپرس نصب شده به دنبال فایل htaccess. گشته و روی فایل راست کلیک کرده و گزینه Edit رو انتخاب کنید. در نهایت کدهای زیر رو کپی کرده و به انتهای فایل اضافه کنید.
<IfModule mod_headers.c> Header set Connection keep-alive </IfModule>
بعد از ذخیره کردن فایل قابلیت keep alive در سایت فعال می‌شود و باعث می‌شود که فایل‌های سایت شما به صورت همزمان شروع به دریافت از سمت سرور کنند که این کار باعث لود سریع‌تر و افزایش سرعت سایت خواهد شد.
آموزش فعال کردن Keep Alive در سرور آپاچی
در صورتی که به سرور دسترسی دارید و از نوع آپاچی است می‌توانید از کد زیر استفاده کنید:
# # KeepAlive: Whether or not to allow persistent connections (more than # one request per connection). Set to "Off" to deactivate. # KeepAlive On # # MaxKeepAliveRequests: The maximum number of requests to allow # during a persistent connection. Set to 0 to allow an unlimited amount. # We recommend you leave this number high, for maximum performance. # MaxKeepAliveRequests 100 # # KeepAliveTimeout: Number of seconds to wait for the next request from the # same client on the same connection. # KeepAliveTimeout 100
رفع خطای Inline small CSS and JavaScript در GTmetrix
قبل از معرفی روش‌های رفع خطا باید ببینیم که Inline small چیست و قرار است با انجام این کار چه اتفاقی برای سایت ما بیفتد! اگر با روش‌های مختلف کدنویسی css در html کار کرده باشید در حالت کلی ما می‌توانیم از سه روش برای استفاده از این کدها انتخاب کنیم که شامل موارد زیر هستند:
- معرفی برترین افزونه‌های افزایش سرعت سایت و کش در وردپرس
- Inline: در این روش کدها به صورت درون خطی هستند و دقیقا داخل فایل html که داریم، قرار گرفتند.
- Internal: در این روش هم کدها در فایل جداگانه با فرمت css. قرار دارند که بعد از فراخوانی کردن داخل سند html بارگذاری خواهند شد.
- External: در این روش هم کدها در یک منبع خارجی دیگر که جدا از دامنه و هاست ما است، قرار دارد و ما فقط از این منابع بارگذاری می‌کنیم.
استفاده از هر کدوم از روش‌های بالا یک سری مزایا و معایب خاص خود را دارد و از طرف دیگر می‌توان گفت که سند html اولویت‌بندی برای هر کدوم هم خواهد داشت. یعنی به عنوان نمونه اگر شما برای یک کلاس خاصی از قالب با استفاده از سه روش گفته شده یک رنگ خاص یا فونت دلخواهی رو انتخاب کنید، داخل سند html اولویت با کد استایلی است که به صورت Inline مشخص شده باشد. اگر این حالت وجود نداشت در مرحله بعدی حالت Internal و در نهایت حالت External در اولویت خواهد بود. برای فایل‌های JS هم دقیقاً همین موضوع اتفاق می‌افتد!
حالا با این توضیحات که در بالا نسبت به اولویت بندی روش‌های لود فایل و مسدود شدن سورس‌های خارجی گفته شد، به نظر شما نمی‌شود این نتیجه رو گرفت که اگه ما بیایم و این کدهای خارجی رو از داخل خود سایت لود کنیم سایت بهینه شده و این خطا هم برطرف خواهد شد؟ جواب مثبت است! کاری که شما باید کنید، این است که کدهایی که مربوط به سورس‌های خارجی هست و اکثرا هم به صورت خلاصه و حجم بسیار کمی هستند را بردارید و داخل خود سایت قرار دهید. برای این حالت هم دو انتخاب دارید. یکی این است که مستقیماً کد را داخل صفحات لود کنید و راه دیگر این است که با ترکیب کردن و قرار دادن داخل فایل css یا js بارگذاری کنید. بعد از آن که، این کار را انجام دادید خطای Inline small CSS and JavaScript در GTmetrix برطرف شده و بخاطر کاهش تعداد درخواست http و قرار گرفتن کدها در مسیر بهتر سرعت لود سایت هم افزایش پیدا خواهد کرد. برای فایل‌های JS هم دقیقا همین اتفاق می‌افتد که بهتر است به جای بارگذاری فایل از سورس خارجی، با ترکیب کردن در فایل‌های js خود سایت یا قرار دادن در جایی که قصد استفاده داریم این مشکل را برطرف کنیم. حالا وقتی شما سایتی رو باز می‌کنید، مرورگرها در اولین لحظه ورود منابع CSS و JS که به صورت External لود میشن رو مسدود خواهند کرد. چرا که اولویت با لود سورس‌هایی هست که داخل خود هاست و دامنه شما قرار داره، بعد از اینکه سورس‌های داخلی لود شدند، سورس خارجی از حالت مسدود خارج شده و شروع به لود شدن میکنه که در نهایت با تکمیل شدن این مرحله شما ظاهر کامل یک سایت رو میبینید. اتفاق بدی که در این حالت پیش می‌آید همین مرحله مسدود سازی و رفع مسدودیت هست. چرا که تو این برهه زمانی هرچند خیلی کوتاه، وقفه‌ای در لود سایت میفته و مرورگر همچنان در حال تلاش برای لود کامل سایت هست. همین مسئله باعث افزایش لود سایت می‌شود که نتیجش کاهش سرعت سایت و بالا رفتن تعداد درخواست HTTP خواهد بود. در مقاله بعدی به بررسی ادامه این بحث می‌پردازیم.
