با استفاده از نشانه گذاری نتایجگوگل و بنابراین جلب توجه کاربران می توانید به افزایش ورودی وبسایت خود کمک کنید. استفاده از ریچ اسنیپت ها باعث درک بهتر موضوع صفحه توسط کاربران می شود. محتوای تولید شده در وبسایت شما باید با اهداف و جستجوهای کاربران متناسب باشد، بنابراین این رنج اسنیپتها در گوگل مطابق محتوای موجود در طراحی سایت شما ایجاد شده که می تواند برای موضوعاتی مانند محصولات، کسب و کارها و غیره باشد.
لینک دادن به سایت های معتبر
link-building
در صورتی که به وبسایت های معتبر لینک دهید باعث افزایش ترافیک وبسایت شما خواهد شد. با اینکار می توانیدبک لینک هایی را برای وبسایت خود به دست بیاورید. از این طریق افرادی به شما لینک شده و محتوای شما را به اشتراک می گذارند.
رعایت تکنیک های سئو در ساختار آدرس صفحه یا URL
ساختار URL دارای اهمیت بسیار بالایی می باشد که می تواند در افزایش وررودی گوگل تأثیر زیادی داشته باشد.
ساده بودن URL
بدان معنا که به جای به کار بردن تک تک کلمات در آدرس، از کلمات کلیدی مؤثر در سئو سایت استفاده نمایید
عنوان با URL لازم نیست یکی باشد.
اگر عنوانی دارای کاراکترهای زیاد و طولانی باشد، اگر همان را دقیق در URL به کار ببرید خوانایی آن کاهش می یابد.
تفاوت URLها با هم
ممکن است گوگل به دلیل شباهت زیاد URLها با هم مطالب را کپی در نظر بگیرد.
سئو به روش هایی گفته می شود که بازدید سایت شما در گوگل از طریق آنها افزایش می یابد و در نتیجه افرادی که به دنبال خرید محصولات شما هستند، به سمت سایت شما هدایت می شوند.
در مورد تعیین بودجه برای پروژه سئو کسب و کارتان نیز هزینه با توجه به نوع خدماتی که انجام می شود مشخص می شود. قیمت طراحی سایت به نحوه انجام خدمات توسط شرکت های طراحی سایت(طراحی سایت شرکتی،طراحی سایت فروشگاهی) و سئو و همچنین هدف کسب و کار شما بستگی دارد. قیمت های سئو در ایران، بازه وسیعی را تشکیل می دهند، این موضوع دلایل مختلفی دارد که در ادامه به آنها می پردازیم
عدم تعریف مناسب از خدمات سئو و عدم هدفگذاری مناسب
خدمات سئو در بعضی شرکت ها، محدود به نصب یک پلاگیندر اسکریپت های آماده مانند وردپرس با انجام یک سری تنظیمات اولیه است.
قیمت سئو بر اساس کلمه کلیدی
برخی دیگر قیمت سئو را بر اساس کلمه کلیدی اعلام میکنند، بدون اینکه در نظر داشته باشند که سئو داخلی مشتری شامل چه شرایطی است و چه کارهایی باید بر روی آن انجام شود.
سئو سیاه در برابر سئو سفید
برخی دیگر قرارداد را به صورت کوتاه مدت منعقدکرده و نتیجه را منوط به قرار گرفتن در صفحه اول گوگل در کلمه خاصی می کنند.
رفع خطای Leverage browser caching و هر آنچه که باید درباره کش بدانید
در این مقاله قصد داریم درباره مشکل Leverage browser caching و حل اون در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در طراحی سایت(طراحی سایت شرکتی،طراحی سایت فروشگاهی) پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.
خلاصه‌ی از خطا Leverage browser caching
نام: Leverage browser caching نوع: مربوط به سرور اولویت: بالا میزان سختی: متوسط میانگین امتیاز: 59%
قطعا شما هم از ابزارهای پیج اسپید، جی تی متریکس یا Pingdom جهت تست سرعت سایت خودتان استفاده کردید و یکی از خطاهای معروف و ایرادهایی که این ابزارهای آنلاین می‌گیرید Leverage browser caching هست، حال با خواندن این پست وقت آن رسیده که مشکل را حل کنید. برای حل مشکل Leverage browser caching در این ابزارها راه‌کارهای ساده‌ای وجود دارد مخصوصا اگر از CMS های اماده و رایگان برای سایتتان استفاده کرده باشید. در این مقاله درباره معنی این اخطار، چه تاثیراتی بر سایت دارد، و گزینه‌های موجود برای رفع این خطا را به شما خواهیم گفت.
Leverage browser caching چیست (کش)
خطای Leverage browser caching که اسکرین‌شات آن را در Pagespeed گوگل مشاهده می‌کنید به کش مرورگر شما اشاره میکند درواقع باید گفت کش چیست ؟
هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل مشاهده باشد فایل‌هایی مانند، CSS، JS، HTML و عکس‌ها که در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره می‌شود. حال وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت میگیرد. پس به این ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.
این عمل هم باعث صرفه‌جویی در حجم اینترنت بازدیدکننده می‌شود و هم تعداد درخواست‌های سمت سرور را کاهش می‌دهد و صفحات سایت در دفعات بعدی سریع‌تر لود می‌شوند. این خطا این را می‌گوید که وقتی شما بازدیدی از سایت می‌کنید درخواست کش هدر HTTP به خوبی پیاده‌سازی نمی‌شود یا ممکن است درخواست کش هدر HTTP به خوبی ارسال شود و وجود داشته باشید ولی زمان کش بسیار کوتاه است.
اصولا به شکل درخواست Header دو روش یا متد اصلی برای کش کردن داریم. Expires Header و Cache-Control Header . هدر Cache-Control در HTTP/1.1 معرفی شد و اگر در سمت کاربر فعال باشد یک عدد بر حسب ثانیه برای کش کردن فایل در نظر میگیرد این عدد همان زمان انقضا فایل است، ولی Expires یک تاریخ را مشخص میکند که مثلا تا فعلان تاریخ فایل کش شود. Expires روشی ساده است. پس در هدر Cache-Controlمدت زمان انقضا را می‌دهیم و در هدر Expiresتاریخ زمان انقضا را می‌دهیم. اگر قصد دارید کنترل بیشتری بر روی کش داشته باشید و به دنبال آپشن بیشتر برای دسترسی به کش مرورگر دارید از دستور Cache-Control برای ذخیره سازی فایل‌ها در مرورگر است، میتوانید استفاده کنید. استفاده از هر دو هدر Expires و Cache-Control لازم نیست، ولی حداقل استفاده از یکی در جهت افزایش سرعت سایت لازم و ضروری است ولی اگر هر دو را اضافه کنید جز محکم‌کاری در جهت کش شدن فایل‌ها کار خاص دیگری نکرده‌اید ولی به شکل کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد. Cache-Control جدیدتر و معمولا این متد توصیه می‌شود ولی با این حال هنوز برخی سایت‌های آنالیز سرعت مثل Gtmetrix هدر Expires را چک میکنند.
جزئیات تفاوت هدر Expires و Cache-Control
Expires Header
Expires همان‌طور که گفتیم یک تاریخ برای کش کردن فایل‌ها میگیرد مثلا تا فعلان تاریخ یک فایل را کش میکند و تا آن تاریخ از کش مرورگر استفاده میکند و بعد از آن تاریخ دوباره درخواست برای دریافت آن فایل به سرور ارسال می‌شود. نمونه کد:
و مثلا خروجی که در هدر HTTP مرورگر می‌توان دید:
expires-header
Cache-Control Header
همان‌طور که گفتیم Cache-Control به ما اجازه بیشتری می‌دهد برای کش کردن در مرورگرها پیدا کنیم. اساس هدر Cache-Controlمقدار زمان و روشی که باید کش شود را تعریف میکند. وقتی به یک فایل به‌وسیله مرورگر دانلود و در لوکال دسترسی پیدا کند، هدر HTTP آن فایل نیز مورد ارزیابی قرار میگیرد. وقتی محتویات هدر Cache-Control را مرورگر بخواند،کش آن فایل را اعمال میکند. اگر یک مرورگر بعد از ارزیابی ببیند که یک فایل باید برای یک روز کش شود، آن فایل در کش مرورگر برای یک روز می‌ماند و اگر آن فایل بعد از یک روز دوباره فراخوانی شود مرورگر دوباره آن فایل را از سرور درخواست میکند و منتظر پاسخ سرور می‌شود. به‌طور مثال تصویر لوگو سایت شما که اصولا در صفحات مختلف ثابت است و اگر یک بازدیدکننده به یک صفحه از وبسایت شما بیاید و تصویر لوگو سایت شما را دانلود کند، هنگامی‌که بازدیدکننده به صفحات دیگر سایت شما برود، تصویر لوگو دوباره دانلود نمی‌شود، و از کش مرورگر فراخوانی می‌شود این روند همینطور ادامه دارد تا وقتی که مدت زمان انقصا تمام شود.
به کد زیر توجه کنید:
کد بالا تنظیمات Cache-Control است که به شکل هدر HTTP ارسال می‌شود. و اعمال این کد بستگی به نوع فایل‌هایی که تعریف میکنیم، دارد.
حال به بررسی خط به خط دستور بالا می‌پردازیم
خط یک هیچ عملی را انجام نمی‌دهد جز اینکه یاداور برای شما است درواقع دستورات را تشریح میکند و .htaccess آن را نادیده میگیرد چرا که با # شروع شده است. به شکل خلاصه کامنتی جهت آگاهی و یاداوری برای استفاده کننده از کد بالا است.
خط دو که قسمت مهم دستور ما است میگه “اگر فایل‌ها از این نوع بودند ما یک سری عملیات را انجام می‌دهیم” . درواقع عمل کش فقط برای این نوع فایل‌ها صورت میگیرد. شما اگر تمایلی ندارید مثلا فایل gif کش شود کافیست آن را از لیست نوع فایل‌ها بردارید و یا اگر تمایل دارید فایل‌های HTML کش شود کافیست آن را به لیست نوع فایل‌ها اضافه کنید تا آن عمل خاص که در اینجا کش کردن است اعمال شود.
خط سه همان عملیاتی هست که باید انجام شود، هدر Cache-Control مقداری را میگیرد. Header set Cache-Control نام هدری است که به شکل HTTP در مرورگر فراخوانی می‌شود و max-age=2592000 بمدت زمان برحسب ثانیه است و اشاره میکند که فایل باید چه مدت در کش مرورگر بازدیدکننده ذخیره شود و مقدار 2592000 برابر با یک ماه است یعنی همان زمان انقضا یک فایل. مقادیر رایج، موارد زیر هستند: یک دقیقه: MAX-AGE=60 یک ساعت: MAX-AGE=3600 یک روز: MAX-AGE=86400 یک هفته: MAX-AGE=604800 یک ماه: MAX-AGE=2628000
یک سال: MAX-AGE=31536000و یکی از دستورات کش ممکن است Public باشد یعنی کش مورد نظر به شکل عمومی است اگر شما در جهت افزایش سرعت سایت خود قرار هست کش را به هاست اضافه کنیدو اطلاعات موجود خصوصی نیست میتوانید از Public استفاده نمایید که اصولا اکثر فایل‌ها از این نوع دستور هستند. می‌توان به جای Public دستورات دیگر هم درج کرد، به شکل کلی سه دستور دیگر هم در Cache-Control وجود دارد:
PUBLIC در بالا توضیح داده شد.
PRIVATE دستور Private به این معناست که کش شدن برای یک کاربر خاص است. مثلا اگر من به حساب فیسبوک خود بروم قطعا مواردی برای من کش خواهد شد که اگر شما به آن آدرس بروید، برای شما کش نخواهد شد چرا که من وارد اکانت خود شده و دارای حریم اطلاعاتی هستم که فیسبوک تعیین کرده و همین موضوع برای شما هم هست و وقتی شما وارد اکانت خود می‌شوید و به آدرس فیسبوک خود مراجعه می‌کنید مواردی که برای شما کش می‌شود لزوما همه آنها برای من کش نمی‌شود.
NO-STORE دستور No-Store یک دستور قوی‌تری است که از کش شدن تحت هر شرایطی جلوگیری میکند.
خط چهار هم جمله را به پایان می‌رساند و اعلام میکند دستورات به پایان خود رسیدند و آماده برای دستورات بعدی می‌شوند (اگر موجود داشته باشد).
کد برای حل مشکل Leverage browser caching در .htaccess
حل مشکل کش با متد Expires
کد زیر از نوع متد Expires است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.
کد یک:
کد دو:
یکی از کدهای بالا را استفاده کنید یعنی یا کد یک یا کد دو
حل مشکل کش با متد Cache-Control
کد زیر از نوع متد Cache-Control است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.
کد برای حل مشکل Leverage browser caching در Nginx
حل مشکل کش با متد Expires
کد زیر از نوع متد Expires است. کد را میتوانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.
حل مشکل کش با متد Cache-Control
کد زیر از نوع متد Cache-Control است. کد را میتوانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.
نحوه چک کش اعمال شده
شما میتوانید بعد از اعمال کدهای بالا در ساخت سایت خود، کش طراحی سایت خود را توسط مرورگرها بررسی کنید که آیا به درسی تنظیم شده‌اند یا خیر، به این منظور بر روی سایت خود کلیک راست کرده و وارد بخش DevTools گوگل کروم شوید و سپس وارد تب Network شده و سایت خود را دوباره رفرش کنید و یکی از فایل‌های سمت چپ را انتخاب کرده و در سربرگ Response Header کش‌های اعمال شده را مشاهده کنید. البته میتوانید از ابزارهای آنلاین Gtmetrix هم استفاده کنید.
netword-developers-tools
نکات تکمیلی:
اگر در لیست شما html یا عکس‌هایی برای یک دوره زمانی در مرورگر کاربر کش می‌شوند به این معنی است که شما اگر خواستید تغییراتی در صفحه اعمال کنید ممکنه خیلی از این تغییرات برای کاربران قابل مشاهده نباشند. این به این علت که کاربران به جای فایل‌های فعلی، به فایل‌های ذخیره شده نگاه میکنند یعنی همان کش محلی. البته با روش‌هایی می‌توان این مشکل را رفع کرد که یکی از رایج‌ترین آنها URL fingerprinting است. مثلا شما فرض کنید یک فایل CSS دارید و قصد تغییرات آن را دارید، این فایل قبلا در کش محلی کاربران با نام main.css ذخیره شده است، حال شما تغییراتی در آن فایل CSS اعمال می‌کنید و نام آن main_1.css می‌شود و اگر دوباره تغییراتی اعمال کنید نام به main_2.css تغییر میکند. روش URL fingerprinting برای تغییرات ناگهانی مفید است. که در پست رفع خطای Riove query strings from static resources بیشتر درباره این روش صحبت کرده‌ایم. نکته یک در بالا می‌تواند به شکل دیگری به کمک درخواست‌های شرطی صورت بپذیرد، درخواست‌های شرطی (Conditional requests) درخواست‌هایی هستند که مرورگر می‌تواند از سرور بپرسد که آیا فایل کپی ذخیره شده در کش مرورگر با فایل موجود در سرور فرق دارد یا خیر؟ ایا فایل موجود در سرور دست‌خوش آپدیت و یا تغییرات بوده است یا نه؟ مرورگر اطلاعاتی را که درباره‌ی فایل کپی ذخیره شده در کش را ارسال میکند و سرور تعیین میکند که آیا فایل اپدیت شده و فایل جدید باید ارسال گردد یا نه همان فایل کپی ذخیره شده در مرورگر است؟ اگر مورد دوم باشد در این حالت وضعیت 304 (HTTP 304 Not Modified status) بازگشت داده می‌شود. ETag یا یا entity tag یک نوع HTTP Header یکی از این نوع درخواست‌های شرطی است.
Conditional-requests
توجه داشته باشید که ما چندین نمونه کد خط در این مقاله به شما معرفی کردیم، گاهی ما در پروژه‌های افزایش سرعت سایت پیش می‌آید که برخی کدها با سرور ناسازگار است و ممکن است به خوبی اعمال نشود و یا مشکلاتی را به وجود اورد بنابراین قبل از هر عملی و تغییراتی، حتما بک آپ گرفته شود و سپس کدها را تست و بهترین را برای سایت خود انتخاب نمایید. به این نکته اشاره کنیم که شما فقط میتوانید فایل‌هایی را کش کنید که در سرور شما موجود باشد و فایل‌ها در سرورهای دیگر را نمی‌توان کش کرد، همانند Analytics گوگل یا فایل‌های سایت‌های مشابه مانند OneSignal که یک سری فایل را سرورهای خود در سند HTML شما برای اجرا در سایت فراخوانی میکنند را نمی‌شود کش کرد.
رفع ارور Leverage browser caching برای Google Analytics
یکی از خطاهای رایج و سوال‌های زیادی که از بنده می‌شود نحوه بهینه سازی و کش کردن لینک JS آمارگیر گوگل آنالیتیکس در سایت است. چرا که این فایل فقط ۲ ساعت کش می‌شود و به همین خاطر ابزارهای آنلاین نیز یک نوع خطا حساب میکنند زیرا مدت زمان انقضا دو ساعت بسیار کم می‌باشد به مانند اسکرین شات زیر که مشاهده می‌کنید. علت آن این است که گوگل می‌خواهد اگر تغییراتی اعمال کرد این تغییرات سریع برای همه کابران صورت بپذیرد و در این پست گفته از روش انتقال آنالیتیکس به لوکال اجتناب کنید و اشاره میکند که:
Referencing the JavaScript file from Google’s servers ensures that you get access to new features and product updates as they become available, giving you the most accurate data in your reports.
به هر حال یک راه برای تغییر زمان کش فایل جاوا اسکریپت Google Analytics موجود دارد.
به کمک افزونه Complete Analytics Optimization Suite به سادگی میتوانید کش آمارگیر گوگل آنالیتیکس را در لوکال دست خوش تغییرات دهید، این افزونه را از مخزن وردپرس دانلود و نصب کنید و سپس اطلاعات لازم برای چنین عملی مثل Google Analytics Tracking ID را به این پلاگین بدهید، Position of traking code را هم توصیه میکنیم Footer را انتخاب نمایید و بعد سیو کنید. تغییرات انجام شد و لذت برید
local-analytics-settings
افزونه کش وردپرس
پیشنهاد ما برای کش کردن در وردپرس استفاده از روش‌های بالا است، چرا که نصب هر افزونه باعث کاهش سرعت سایت وردپرس می‌شود، به هر حال اگر مایل به استفاده ازکدهای بالا نیستید میتوانید از افزونه‌های زیر برای فعال سازی کش در وردپرس استفاده نمایید.
در این پست قصد داریم درباره مشکلات Inline small CSS و Inline small JavaScript در GTmetrix صحبت کنیم و بررسی کنیم که Inline small ها چطورند و چه زمانی مفید هستند و برای افزایش سرعت سایت تاثیر خوبی دارند و چه زمانی باعث کندی سایت می‌شوند.
خلاصه‌ی از خطا Inline small CSS and Inline small JavaScript
نام: Inline small CSS
نوع: CSS اولویت: بالا میزان سختی: راحت میانگین امتیاز: 94%
نام: Inline small JavaScript
نوع: JS اولویت: بالا میزان سختی: راحت میانگین امتیاز: 95%
به شکل کلی سه شیوه برای استفاده از کدهای CSS در یک سند Html وجود دارد Inline، Internal و External که هرکدام دارای مزایا و معایب خاص خود در شرایط مختلف را داراست. باید توجه داشته باشید که تگ‌های HTML ابتدا کدهای External را لود میکند، پس‌ازآن به سراغ کدهای Internal و درنهایت کدهای نوع Inline را مورداستفاده قرار می‌دهد. درنتیجه کدهای Inline در اولویت قرار می‌گیرند. به‌عنوان‌مثال اگر در یک فایل External رنگ آبی برای یک تگ و در کدهای Internal رنگ زرد و بالاخره در کدهای Inline رنگ بنفش برای همان تگ انتخاب‌شده باشد، در چنین حالتی Html رنگ بنفش را مدنظر قرار خواهد داد.
کدهای JS برای فراخوانی کدهای JS هم همانند CSS از سه روش بالا استفاده می‌شود
نکته بالا صرفا جهت اطلاع بود و مربوط به خطای GTmetrix نمی‌شود ولی توجه داشته باشید که خطایInline small CSS به معنی روش Inline در CSS که در بالا اشاره کردیم نیست. اگر به متن توضیحات سایت GTmetrix توجه کرده باشید به عبارت “Inlining small external CSS files” اشاره میکند و منظورش فایل‌های CSS با حجم بسیار کمی که با روش External در سند HTML فراخوانی می‌شوند را می‌گوید، ولی متاسفانه در اکثر طراحی سایت‌های ایرانی به اشتباه و به دلیل تشابه اسمی عبارت Inline فکر میکنند منظور روش Inline در CSS هست درحالی که عبارت “Inlining small external CSS files” در اینجا به معنی یک خط کردن کدهای CSS با حجم کم است. مقاله‌های سایت‌های معتبر keycdn ، گوگل و varvy گواهی این موضوع هستند.
درباره مشکل Inline small CSS
مرورگرها، قبل از اعمال استایل‌دهی محتوا، فایل External مربوط به کدهای CSS را مسدود میکنند. این امر باعث ایجاد تاخیر اضافی و افزایش مدت زمان لازم برای نمایش محتوا می‌گردد. و اگر تعداد فایل‌های external CSS زیاد باشد قطعا زمان تاخیر افزایش یافته و این امر ضربه‌ای به تجربه کاربری و فروش محصولات و خدمات شما خواهد زد. و همین موضوع برای Inline small JS صدق میکند
راه حل Inline Small
به منظور بهینه سازی لود سایت و زمان باز شدن صفحه، در صورتی که کدهای CSS موجود در فایل External، دارای حجم کمی باشند، شما می توانید آنها را به طور مستقیم در سند HTML، وارد کنید و یا با دیگر فایل‌های CSS ادغام نمایید.
گوگل در مقاله‌ای با عنوان Inline Small Resources به اهمیت استفاده از روش Internal اشاره کرده است. در مقاله اشاره شده گوگل عنوان میکند که استفاده از روش Internal در فایل‌های CSS و JS با حجم کم و همینطور استفاده از تصاویر به شکل Inline (روش Base64) باعث کاهش تعداد درخواست‌ها به شکل مستقیم در سند HTML می‌شود. در ادامه بیشتر درباره این موضوعات صحبت میکنیم.
قسمتی از مقاله گوگل:
This rewriter reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTMLdocument. This can reduce the time it takes to display content to the user, especially in older browsers.
inline-small-css
Inline CSS
اگر محتوای فایل CSS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد بهتر است یا آن را با دیگر فایل‌های external CSS ادغام نماییم یا به شکل مستقیم و Internal درون سند HTML استفاده کنیم.
برای مثال به سند HTML زیر توجه کنید:
و فایل small.css با محتوای فرضی زیر:
میتوانید از روش نه چندان جالب بالا برای لود قسمتی از استایل خود استفاده کنید ولی برای بهینه سازی سایت باید هوشمندانه و از بهترین روش ممکن بهره ببرید. روش بهینه سازی شده در چنین شرایطی که یک فایل CSS با حجم کم دارید به شکل زیر است:
ولی اگر تعداد زیادی فایل CSS با حجم کم در صفحات شما فراخوانی می‌شوند بهتر است آنها را ادغام کنید
Inline JS
درباره فایل‌های JS هم همانند CSS باید عمل کرد، در این پست سایت GTmetrix بیان میکند:
Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files.
و اگر توجه کرده باشید به فایل‌های External JS که حجم بسیار کمی دارند اشاره کرده که اگر طراحی سایت شما دارای فایل‌های External JS است و تعداد قابل توجه‌ای دارند بهتر است آنها را ادغام نمایید ولی اگر تعداد کم باشید میتوانید از راه حلی که گوگل اشاره کرده استفاده نمایید.
از مقاله گوگل اشاره شده که اگر محتوای فایل JS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد به شکل مستقیم و Internal درون سند HTML استفاده کنیم تا در جهت بهینه سازی سرعت سایت تعداد درخواست‌های سمت سرور کاهش یابد.
برای مثال به سند HTML زیر توجه کنید:
و فایل small.js با محتوای فرضی زیر:
روش بهینه سازی شده در شرایطی که یک فایل JS با حجم کم دارید به شکل زیر است:
اگر تعداد فایل‌های زیادی از نوع js و css در سند html شما فراخوانی می‌شود میتوانید برای ادغام کردن فایل‌ها از پلاگین‌های وردپرس زیر استفاده نمایید.
Inline Images عکس هایی هستند که به صورت inline و از طریق کار با base64 آنها را می‌سازیم. به این منظور که عکس‌ها را می‌توانند در بین کدهای HTML قرار دهید و بر اساس کدگذاری بر مبنای 64 عکس‌ها بخشی از HTML شوند و بدون بارگذاری شدن نمایش داده می‌شوند، در عوض مرورگر کد بر مبنای 64 را به عکس تبدیل میکند. یکی از محاسن مهم این کار، کاهش تعداد درخواست است که این امر نقش موثری در بهینه‌سازی سئو سایت و سرعت آن دارد. ولی توجه داشته باشید که این روش بهتر است فقط برای عکس‌هایی استفاده شود که اندازه و حجم بسیار کمی دارند چرا که وقتی عکس‌ها حجم متوسط به بالایی داشته باشند با روش کدگذاری بر مبنای 64 حجم تصاویر بیشتر از حالت معمول بوده و اگر برای تمام عکس‌ها از این روش استفاده کنیم به جای بهینه سازی و افزایش سرعت سایت نتیجه‌ای عکس را دریافت خواهیم کرد.
گوگل هم در این پست به اهمیت تصاویر به شکل Inline اشاره کرده است و گفته:
When this rewriter is enabled, the contents of small external images are written directly into the HTML document by an inline data: URL
برای مثال به سند HTML زیر توجه کنید:
در سند بالا تصویر کوچک با حجم اندک به شکل معمولی در صفحه بارگذاری می‌شود و حاوی یک درخواست دیگر برای لود شدن در صفحات کاربران است ولی روش زیر که برمبنای base64 است درگیر درخواست اضافی بر روی سرور متحمل نمی‌شود:
در پست جداگانه‌ای در آینده توضیحات بیشتری درباره تصاویر base64 یا Inline Images خواهیم داد. این خطا باعث کاهش تعداد درخواست های HTTP هم نیز می‌شودو شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید. سعی شده در این آموزش‌ها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در افزایش رتبه سایت در گوگل می‌باشد، کمک شایانی کنیم، در انتهای این آموزش باید توانید فایل css و js خود را با هم ادغام کنید و آنها را یکی کنید.
در این مقاله قصد داریم درباره مشکل Enable Keep-Alive در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.
خلاصه‌ی از خطا Enable Keep-Alive
نام: Enable Keep-Alive
نوع: مربوط به سرور اولویت: بالا میزان سختی: راحت میانگین امتیاز: 93%
Keep Alive چیست؟
Keep Alive نحوه درخواست بین سرور و مرورگر کاربر است که می‌گوید: مرورگر می‌تواند بیش از یک فایل را بگیرد یا نگیرد.
Deselect
به منظور نمایش صفحات وب در مرورگر باید فایل‌ها از یک وب سرور درخواست شوند. هنگامی که مرورگر درخواست فایل میکند و وب سرور جواب بله یا خیر می‌دهد.
صفحات وب معمولا مجموعه‌ای از تعداد زیادی فایل هستند و اگر لازم باشد برای هر یک از این فایل ها ارتباط جدیدی ایجاد شود، مدت زمان زیادی برای نمایش صفحات طول خواهد کشید.
طبیعتا مرورگر، برای نشان دادن صحیح صفحاتطراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی،قیمت طراحی سایت) ما باید همه فایل‌ها را دریافت نماید. در قدم اول برای باز کردن یک سایت مرورگر فایل HTML را دریافت کرده و آن را می‌خواند. سپس مرورگر موارد دیگری مانند CSS، JavaScript و تصاویر را که فایل HTML به آنها اشاره میکند را درخواست میکند. اگر Keep Alive فعال نباشد این مفهوم را می‌رساند که مرورگر بیش از یک فایل را در آن واحد نمی‌تواند درخواست کند آن موقع مرورگر برای دریافت همه فایل‌ها هر بار درخواست جداگانه ارسال میکند و اگر سرور هر بار جداگانه پاسخ بدهد حاصل آن، زمان زیادی برای دریافت تمام فایل‌ها تلف خواهد شد.صفحات وب معمولا مجموعه‌ای از تعداد زیادی فایل هستند و اگر لازم باشد برای هر یک از این فایل‌ها ارتباط جدیدی ایجاد شود، مدت زمان زیادی برای نمایش صفحات طول خواهد کشید و این فرایند می‌تواند زمان دانلود صفحه و هدر رفتن منابع سرور را افزایش دهد. ولی می‌توان با فعال کردن Keep Alive به این قابلیت رسید که سرور بتواند به مرورگر بگوید که “هر چه فایل نیاز داری را درخواست کن یک جا.”
تعریف آکادمیک Keep Alive HTTP این است: “روشی که اجازه می‌دهد درخواست HTTP در کانکشن tcp به جای باز کردن درخواست جدید، هر چه فایل می‌خواهد دریافت کند.” به زبان ساده‌تر،بستری را فراهم میکند تا ارتباطی بین وب سرور و مروگر برقرار شود و اجازه می‌دهد که بیش از یک فایل را در آن واحد مرورگر دریافت کند.گاهی در برخی از مقالات Keep Alive به عنوان persistant connection هم صدا زده می‌شود.
keep-alive-enabled
آیا Enable Keep Alive به طور پیشفرض فعال نیست؟
برخی افراد به طور اشتباه باور دارند که Enable Keep Alive به شکل پیشفرض فعال است و لازم نیست در این باره نگران باشند زیرا امروزه keep alive در ارتباطات HTTP فعال است.
اگرچه این گفته درست می‌باشد، اما تعداد زیادی از افراد از هاست‌های اشتراکی استفاده میکنند که ممکن است با توجه به سیاست‌های مربوطه ارتباط با کاربر را بسته باشند. و از آنجا که میلیون‌ها صفحه از هاست‌های اشتراکی استفاده میکنند، دانستن اینکه ارتباطات شما keep alive هستند امری ضروری است. برای فهمیدن این موضوع می توانید از page speed tool گوگل یا سایت GTmetrix استفاده کنید.
چگونه Keep Alive را فعال کنیم
Keep Alive با استفاده از HTTP هدر Connection: Keep-Alive فعال می شود.
اگر Keep Alive فعال نشد، احتمالا HTTP Header های شما وضعیت connection: close را دارند.
برای فعال شدن Keep Alive وضعیت آن را به connection: Keep-Alive تغییر دهید.
فعال سازی Keep Alive وابسته به سرور مورد استفاده توسط شما و دسترسی هایی است که دارید. به بیشتر موارد در ادامه خواهیم پرداخت.
فعال سازی Keep Alive با استفاده از htaccess
اگر به فایل config وب سرور خود دسترسی ندارید، می توانید Keep Alive را با استفاده از فایل .htaccess فعال کنید.
افزودن کد بالا به فایل htaccess باعث می‌شود تا در header ها Keep Alive را به درخواست های شما اضافه کند، که البته بیشتر وب سرورها یا محدودیت‌هایی را تعیین کردن تا کد بالا را بازنویسی (override) میکند. لطفا توجه داشته باشید که ممکن است بعد از وارد کردن دستور بالا با ارور 500 روبه‌رو شوید و علت این است که سرور شما با دستور بالا سازگاری لازم را ندارد.
فعال سازی Keep Alive در Apache
اگر به فایل پیکربندی Apache دسترسی دارید، می توانید Keep Alive را در آنجا فعال کنید. قسمت های مربوطه در زیر نشان داده شده اند.
فعال سازی Keep-Alive در NGINX
مشکلات Keep Alive را می‌توان با HTTPCoriodule برطرف کرد. دستور keep-alive-disable وجود دارد که باید مراقب آن باشید، اگر این دستور را مشاهده کردید، مطمئن شوید قبل از حذف آن دلیل غیر فعال بودنش توسط هاستینگ را می‌دانید.
فعال سازی Keep-Alive در Litespeed
Keep Alive به صورت پیشفرض فعال می‌باشد، اما ممکن است سرور شما از چیز دیگری به اسم smart keep-alive استفاده می کند. smart keep-alive یکی از تنظیمات داخل Litespeed است که به طور مشخصی برای وبسایت‌های با حجم بالا مورد استفاده قرار میگیرد. هنگامی که این گزینه فعال باشد، در قسمت page speed tools گزینه‌ای ظاهر می‌شود که نشان می‌دهد Keep Alive غیر فعال است.
smart keep-alive فایل اولیه را با connection close در HTTP header درخواست خواهد میکند. سپس فایل‌های دیگر را با فعال کردن Keep Alive درخواست میکند. این گزینه باعث می‌شود هنگامی که درخواست‌های زیادی وجود دارند، کاربران بیشتری بتوانند همزمان متصل شوند.
نکته: بجز در مواقعی که ترافیک سایت بالایی دارید، میتوانید smart keep-alive را در config غیر فعال کنید و هنگامی که این کار را انجام دادید تمام ارتباطات شما از Keep Alive استفاده خواهند کرد.
اگر مطمئن نیستید که آیا برای شما از نوع smart هست و یا یقین دارید که این ویژگی غیرفعال است بهتر است به هاستینگ خود تیکت ارسال نمایید
