آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Reduce the number of DOM elements صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

طراحی سایت فروشگاهی

طراحی سایت شرکتی

خلاصه‌ای از خطا Reduce the number of DOM elements

نام: Reduce the number of DOM elements
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

طراحی سایت

مدل DOM چیست ؟

مدل DOM مخفف عبارت Document Object Model است که برای دسترسی به اشیا و عناصر موجود در یک سند HTML یا صفحه HTML است، این مدل از یک سری درخت سلسله مراتبی برای این دسترسی استفاده می‌کند. این درخت از شی Window به عنوان عنصر مادر یک صفحه HTML شروع شده و به ترتیب به عناصر رده پایین تر ادامه پیدا می‌کند، تا به پایین‌ترین رده عناصر یعنی متن و نوشته برسد . شکل زیر یک نمای کلی از درخت سلسله مراتب در مدل DOM است:

مدل DOM چیست

قیمت طراحی سایت

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

تاثیر خطای Reduce the number of DOM elements در سرعت سایت

ولی استفاده بیشتر این عناصر DOM باعث کند شدن سایت می‌شود، و همان‌طور که نوشته شده Reduce the number of DOM elements یعنی کاهش دهید تعداد المان‌های DOM را، و برای این کاهش باید زبان جاواکسریپت و DOM آشنایی داشته باشید. مشکل سرعت وردپرس خیلی از دوستان که از قالب‌های اماده استفاده می‌کنند می‌تواند این خطا هم باشد هر چند اگر بقیه موارد بهینه سازی شده باشند خطای Reduce the number of DOM elements را بهتر است نادیده بگیرید.

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use a Content Delivery Network صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود. توجه داشته باشید که ما در ادامه هم از عبارت CDN (شبکه توزیع محتوا) استفاده خواهیم کرد و هم از عبارت CDN Public (شبکه توزیع محتوا عمومی) که این دو عبارت برای اهدافی متفاوت ایجاد شده اند، بنابراین این دو عبارات را یکی ندانید.

خلاصه‌ای از خطا( Use a Content Delivery Network (CDN

نام: (Use a Content Delivery Network (CDN
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

CDN چیست؟

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

CDN چیست

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

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

مزایای استفاده از CDN

افزایش سرعت سایت : طبق توضیحات بالا استفاده از شبکه توزیع محتوا باعث بهبود سرعت سایت و سریع‌تر لود شدن صفحات برای کاربران می‌شود.
کاهش مصرف پهنای باند سرور اصلی : زمانی که شما از CDN استفاده می‌کنید سرورهای CDN یک نسخه کپی از محتویاتی که تقریبا ثابت هستند (فایل‌های CSS ، جاوااسکریپت، عکس‌ها، فونت‌ها و …) در سرور خود ذخیره می‌کنند و زمانی که کاربر درخواستی را برای باز شدن صفحات سایت شما ارسال می‌کند به جای ارسال درخواست به سرور اصلی به سرورهای CDN ارسال می‌شود که باعث کاهش مصرف پنهای باند سرور اصلی می‌شود.
کاهش مصرف منابع سرور اصلی: استفاده از شبکه توزیع محتوا باعث کاهش تعداد درخواست‌های HTTP از سمت کاربران می‌شود و این عمل بار بسیاری را از دوش سرور اصلی کم می‌کند که نتیجه آن کاهش مصرف منابه سرور اصلی می‌باشد.
افزایش رتبه سایت در گوگل : یکی از موارد بهبود سئو سایت بالا بردن سرعت سایت است و گوگل اعلام کرده است که سرعت سایت یکی از فاکتورهای مهم در رتبه‌بندی نتایج خواهد بود.
بهبود تجربه کاربری : سرعت سایت و بارگذاری سریع صفحات سایت ارتباط مستقیمی با تجربه کاربری (UX) خواهد داشت، چرا که کاربران زمان کمتری را برای لود شدن فایل‌های لازمه یک صفحه صرف خواهند کرد و تاخیر در بارگذاری تا حد بسیار زیادی کاهش پیدا می‌کند، همین موضوع می‌تواند باعث کاهش نرخ دفع کاربری هم شود.
۱۰۰ درصد بالا بودن سرور : زمان که شما از شبکه توزیع محتوا یا CDN استفاده می‌کنید حتی زمانی که سرور اصلی قطع شود نسخه کپی موجود در سرورهای CDN به کاربران نمایش داده می‌شود تا با قطعی سرور کاربران شما برخورد نکنند.
افزایش امنیت سایت : استفاده از CDN باعث افزایش امنیت سایت و جلوی حملاتی نظیر DDoS را میگیرد چرا که شبکه توزیع محتوا به راحتی می‌تواند با استفاده از پهنای باند نامحدود خود بار حملات DDoS خنثی کند.

معایب استفاده از CDN

هزینه CDN : یکی از معایب استفاده از شبکه توزیع محتوا هزینه نسبتا بالای برخی از ارائه دهنده‌گان CDN است، هر چند برخی از ارائه دهنده‌گان دارای پنل رایگان هستند همانند سایت cloudflare ولی استفاده از پنل رایگان با توجه به محدودیت های فراوانی که دارند، برای سرورهای داخل ایران توصیه نمی‌شود که در ادامه علت آن را خواهیم گفت، از بین سایت های ارائه دهنده شبکه توزیع محتوا خارجی می‌توان سایت MaxCDN را اشاره کرد که دارای پنل‌هایی با قیمت مناسب است. در ادامه انواع سایت‌های ارائه دهنده CDN را نام خواهیم برد.
مسدود شدن برخی کاربران : گاهی پیش آمده دسترسی برخی کاربران به سایت مسدود شده چرا که برخی سازمان‌ها و یا حتی کشورها دسترسی‌ها را به برخی کاربران محدود می‌کنند و درنتیجه بسیاری از دامنه ها در این سازمان ها و کشورها غیر قابل دسترسی می گردد. یا برخی CDNها حساسیت بالایی به تعداد درخواست‌های HTTP دارند و اگر حتی یک کاربری صفحات زیادی از یک سایت را باز کند ممکن است CDN واکنش نشان دهند و تصور کند که سایت مورد حمله است و ای پی آن شخص را مسدود کند (این موضوع برای خوده بنده بسیار پیش آمده)

معرفی برخی از CDNهای معروف

برخی از CDNهای معروف عبارت اند از:

• Amazon Cloudfront
• MaxCDN
• Cloudflare
• Arvancloud

چند نکته:

• سرور Cloudflare پنل رایگانی دارد که اکثر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) های ایرانی برای استفاده از CDN از این سایت استفاده می‌کنند ولی اگر سرور اصلی سایت شما در ایران است توصیه نمی‌شود از این پنل رایگان استفاده کنید چرا که در بیشتر موارد مشاهده شده به جای بهبود سرعت سایت باعث کاهش سرعت سایت برای کاربران ایرانی می‌شود.
• سایت Arvancloud توسط یک شرکت ایرانی تاسیس شده است و خدمات مناسبی را ارائه می‌دهد، پیشنهاد ما استفاده از این CDN است هر چند استفاده از این شبکه توزیع محتوا باعث رفع خطای Use a Content Delivery Network در جی تی متریکس نمی‌شود که نشانه ضعف این ابزار آنلاین است.
• سایت MaxCDN نسبت به CDNهای خارجی دیگر پنلی ارزان‌تر دارد و اگر قصد خرید سی دی ان خارجی با هزینه مناسب هستید می‌تواند گزینه مناسبی باشد.
• اگر از سیستم مدیریت محتوا وردپرس استفاده می‌کنید می‌توانید از افزونه رایگان Jetpack استفاده کنید که امکان استفاده از شبکه توزیع محتوا یا CDN اختصاصی را به شما می‌دهد.

شبکه توزیع محتوا عمومی چیست؟

استفاده از سرویس رایگان شبکه توزیع محتوای عمومی (Free Public CDN Services) باعث افزایش سرعت سایت، ذخیره پهنای باند سرور اصلی، بهبود تجربه کاربری می‌شود، در سرویس‌های رایگان توزیع محتوای عمومی کتابخانه‌های معروف جاوااسکریپت و CSS قرار دارند تا برنامه‌نویس ها به جای اپلود کردن این کتابخانه های مهم و معروف در سرور اصلی سایت، از سرورهای رایگان توزیع محتوای عمومی استفاده کنند، این عمل باعث کاهش تعداد درخواست‌های HTTP به سمت سرور شما هم می‌شود، مثلا به جای اینکه فایل jquery.min.js را مثل آدرس زیر در طراحی سایت خود لود کنیم.

<script src=”https://mizfa/com/file/js/jquery.min.js”></script>

از jquery.min.js موجود در Google CDN که یکی از شبکه‌های توزیع مجتوای عمومی است استفاده کنیم:

       <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>

Google CDN

لینک: https://developers.google.com/speed/libraries

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

Microsoft CDN

لینک: http://www.asp.net/ajax/cdn

یکی از محبوب‌ترین کتابخانه‌های CDN به شکل رایگان را برای کاربران فراهم کرده است. شبکه توزیع محتوا عمومی مایکروسافت از محبوبترین کتابخانه Ajax در انواع نسخه‌ها را پشتیبانی می‌کند.

jsDelivr CDN

لینک: http://www.jsdelivr.com

jsDelivr خود از ۵ سی دی ان قدرتمند دیگر برای ارائه خدمات هر چه بهتر به کاربران استفاده می‌کند که معروف‌ترین آنها Cloudflare و MaxCDN هستند. شاید این لینک برای شما جالب باشد که نحوه توزیع محتوا عمومی در jsDelivr به چه شکل است، انواع کتابخانه‌های معروف این CDN عمومی درون خود دارد و کافیست برای استفاده از یک فایل نام آن را در صفحه اول تایپ کنید.

cdnjs CDN

لینک: https://cdnjs.com

cdnjs توسط CloudFlare حمایت می‌شود و فایل‌های مربوط به jQuery ، Modernizr و Bootstrap در خودش دارد، استفاده بسیاری از این سی دی ان عمومی و محبوب می‌شود.

jQuery CDN

لینک: https://code.jquery.com

jQuery قدرت گرفته از MaxCDN است. و اخرین نسخه‌های کتابخانه JavaScript را همیشه در دسترس قرار می‌دهد.

نحوه رفع خطای Use a Content Delivery Network

برای رفع این خطا در Yslow پیشنهاد میکنیم از CDNهایی که معرفی کردیم استفاده نمایید، اگر بنا به شرایط خود نمی‌توانید استفاده کنید بهتر است حداقل برای لود کردن برخی از فایل‌های معروف در سایت خود همانند کتابخانه‌های JavaScript از CDN Public استفاده کنید.

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use cookie-free domains بحث کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بهبود سرعت و سئو سایت ما می‌شود.

خلاصه‌ای از خطا Use cookie-free domains
نام: Use cookie-free domains
نوع: کوکی
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 48%

فرق کوکی و کش چیست

قبل از رفع خطای Use cookie-free domains شاید بهتر باشد فرق کوکی و کش را بدانیم تا بهتر بتوانیم خطای موجود را درک کنیم.

کوکی چیست (Cookies)

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

کوکی‌ها در کجا استفاده می‌شود:

چند مثال از استفاده کوکی برای شما آوردیم تا بهتر با کاربرد و علت وجود کوکی آشنا شوید

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

کش چیست؟ (Cache)

یک کش وب (HTTP cache) فنّاوری است که از طریق درخواست‌های HTTP یک سری اسناد وب را به شکل موقت در مرورگر کاربر ذخیره می‌کند، همانند عکس‌ها و فایل‌های CSS و JS که تغییرات زیادی روی آن‌ها صورت نمی‌گیرد. هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل‌مشاهده باشد، حال برخی فایل‌ها مانند، CSS، JS، HTML و عکس‌ها که ممکن است در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره شوند. در این صورت وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به‌این‌ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.

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

تفاوت بین کوکی و کش (difference between Cache and Cookie)

هرچند کوکی و کش هر دو راهی برای ذخیره‌سازی اطلاعات در مرورگر کاربر هستند اما آن‌ها تفاوت‌هایی را باهم دارند چراکه دارای اهدافی متفاوت هستند.
کوکی برای ذخیره‌سازی یک سری اطلاعات در جهت ردیابی فعالیت‌های کاربر استفاده می‌شود درحالی‌که کش برای بهبود سرعت سایت مورداستفاده قرار می‌گیرد.
کوکی اطلاعات مربوط به کاربران نظیر تنظیمات کاربری، پسورد، یوزرنیم و … است درحالی‌که کش برای نگه‌داری منابع استاتیک (فایل‌های ثابت) نظیر عکس، استایل‌های CSS یا جاواسکریپت است.
کوکی محدودیت ذخیره‌سازی دارد و تا 4KB می‌تواند حجم داشته باشد درحالی‌که کش چنین محدودیت‌هایی ندارد.
کوکی و هم کش توسط کاربر می‌تواند پاک شود ولی معمولاً کوکی‌ها عمر کوتاه‌تری دارند و زمان انقضاهای آن‌ها سریع‌تر می‌رسد درحالی‌که کش‌ها به این شکل نیستند و در مرورگر کاربران وجود دارند مگر دستی توسط کاربر پاک شود.

رفع خطای Use cookie-free domains

وجه مشترک کوکی و کش

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

افزایش سرعت سایت با Use cookie-free domains

تمام موارد بالا گفته شد تا به این قسمت برسیم که خطای Use cookie-free domains چه چیزی را به ما می گوید، و منظور از این خطا چیست؟ چه زمانی کوکی باعث ایجاد این خطا در Gtmetrix می‌شود؟

کوکی چه مشکلاتی را ایجاد می کند؟

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

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

راه حل برای رفع ارور Use cookie free domains

فرض کنید دامنه شما mizfa.com باشد هر عکس یا فایلی استاتیک در داخل دایرکتوری این دامنه باشد بالاخره کوکی به آن فایل‌ها در هنگام ارسال درخواست‌های HTTP به کاربر اضافه خواهد شد مگر فایل‌ها و عکس‌های ثابت و استاتیک خود را به یک زیردامنه یا دامنه‌ای دیگر انتقال دهید. بسیاری از سایت‌های معروف از این روش برای بالا بردن سرعت سایت خود استفاده کرده‌اند مثلا سایت یاهو از دامنه‌ای مستقل به آدرس yimg.com برای لود فایل‌های خود استفاده می‌کند، سایت آمازون از زیردامنه images-amazon.com برای عکس‌های استاتیک خود استفاده می‌کند، سایت دیجی کالا هم که قبلا به آن اشاره کردیم و دیگر سایت‌های مختلف که اهمیت بسیاری به تجربه کاربری می‌دهند.

ساخت زیر دامنه در وردپرس برای حل مشکل Use cookie free domains

فرق کنیم قصد داریم زیر دامنه static.yourwebsite.com را برای فایل‌های استاتیک خود ایجاد کنیم، به این منظور در کنترل پنل خود (سی پنل، دایرکت ادمین و …) فیلدها را به شکل زیر پر می‌کنیم.

رفع خطای Use cookie-free domains

در قسمت Document Root دقت داشته باشید که آدرس دقیقا همانند تصویر بالا باشد. سپس فایل wp-config.php باز کرده و دستور زیر را قرار می‌دهیم.

;(“define(“WP_CONTENT_URL”, “http://static.yourwebsite.com
;(“define(“COOKIE_DOMAIN”, “www.yourwebsite.com

حال زیردامنه اماده شده را می‌توانید فایل‌های استاتیک بدون کوکی در آن قرار دهید. توجه داشته باشید ممکن است راه‌حل بالا برای سایت شما کار نکند یا مشکل ساز شود بنابراین قبل از هر گونه تغییرات فول بک آپ بگیرید

چند نکته:

یک: شما روش‌های متعدد دیگری هم برای رفع مشکل Use cookie-free domains دارید، مثلا به زیردامنه static.yourwebsite.com یک IP سرور متفاوت تنظیم کنید و در هاست دیگر آن را لود کنید یا می‌توانید زیردامنه خود را در یکی از CDNها پیاده سازی کنید، جهت اطلاعات بیشتر درباره CDNها به مقاله CDN چیست مراجعه کنید (پیشنهاد می‌شود برای پیاده‌سازی چنین عملی در سایت خود از یک کارشناس باتجربه استفاده نمایید)

دو: خطای Reduce cookie size زیر مربوط به کوکی است و خواندن ان به شما توصیه می‌شود چرا که در این خطا درباره نحوه کاهش کوکی‌ها و علت آن صحبت شده است.

سه: هر سه ارور روبه‌رو مربوط به کش هستند و مطالعه آن قطعا برای شما مفید خواهد بود: ارور Leverage browser caching ، ارور Specify a cache validator و ارور Add Expires headers

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use GET for AJAX requests بحث کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا رفتن سرعت و سئو سایت و همینطور سئو ما می‌شود، پس ما میزفا همراه باشید.

خلاصه‌ای از خطا Use GET for AJAX requests
نام: Use GET for AJAX requests
نوع: JS
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 100%

اهمیت استفاده از AJAX

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

شی xmlhttprequest در Ajax

درواقع Object (شئ) xmlhttprequest در Ajax است همه این مشکلات سرعت را رفع نمود و باعث شد تا محتوای به‌روز شده در یک صفحه بدون احتیاج به بارگذاری دوباره کل صفحه تغییر کند. درواقع این شئ سبب گردید تا داده واردشده توسط کاربر به سمت سرور ارسال شود و سرور پردازش‌های لازم را انجام دهد و سپس داده پردازش‌شده یعنی اطلاعات را به مرورگر بدهد بدون آنکه صفحه لود شود، تمام این رفت‌وبرگشت‌ها در پشت صفحه و بدون اطلاع کاربر انجام می‌شود. می‌توان گفت شئ XMLHttpRequest مهم‌ترین شئ در Ajax است که تقریبا انجام تمام عملیات لازم بر روی دوش آن هست. حال برای ارسال و تبادل اطلاعات توسط شئ XMLHttpRequest دو نوع متد وجود دارد متد GET و متد POST که هر دو یک درخواست HTTP برای تبادل اطلاعات استفاده می‌کنند که هر کدام مزایا و معایت خوب را دارند.

بیشتر بدانید: XML و یا JSON یک نوع ساختار برای ذخیره‌سازی اطلاعات است، ساختارهایی که بدون توجه به تکنولوژی و پلتفرم آن دستگاه قابل استفاده هستند از طرفی Ajax یک تکنولوژی است که در آن یک شئ XMLHttpRequest وجود دارد این شئ همان‌طور که نامش پیداست اطلاعاتی که دارای ساختار XML است را به شکل Http Request (درخواست HTTP) ردوبدل می‌کند، این توضیح کوتاه داده شد تا با فلسفه نام XMLHttpRequest آشنا شوید.

درباره Use GET for AJAX requests

بعید است طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما با خطای Use GET for AJAX requests روبه‌رو شود ولی اگر شد بدانید که در این پست منظور Gtmetrix این است که اگر از تکنولوژی Ajax در صفحات استفاده می‌کنید به جای استفاده از متد ارسال POST از GET استفاده نمایید، چرا که سرعت متد GET بیشتر است.

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

دیگر تفاوت‌های متد POST و GET

ویژگی	متد GET	متد POST
استفاده از دکمه های BACK و Reload	بی اثر	ارسال دوباره اطلاعات (البته قبل از ارسال شدن دوباره اطلاعات مرورگر به کاربر هشدار میدهد)
Bookmark کردن	با زدن کلیدهای ctrl + D آدرس bookmark میشود.	قابلیت bookmark را ندارد.
قابلیت کش – Cache	کش میشود.	قابلیت کش را ندارد.
نوع رمزگذاری – Encoding	application/x-www-form-urlencoded	application/x-www-form-urlencoded multipart/form-data از multipart/form-data برای رمزگذاری داده های باینری معمولا هنگام آپلود کردن فایلها استفاده میشود. یعنی برای آپلود فایل از این نوع استفاده می کنیم.
ذخیره شدن در تاریخچه مرورگر – History	ردپای متد GET در تاریخچه مرورگر ذخیره میشود.	ذخیره نمیشود.
محدودیت در اندازه داده	متد GET اطلاعات خودش را به URL اضافه میکند. و از طرفی حداکثر اندازه URL میتواند 2048 کاراکتر باشد.	بدون محدودیت
محدودیت در نوع داده	فقط داده ی از نوع اسکی را پشتیبانی می کند.	بدون محدودیت. قابلیت ارسال داده های باینری را دارد.
امنیت	امنیت کمتری نسبت به POST دارد.از این متد برای ارسال اطلاعات حساسی مانند کلمه عبور استفاده نکنید.	نسبت به متد GET از امنیت بیشتری برخوردار است.پارامترهای ارسالی در تاریخچه مرورگر و در سیستم لاگ وب سرور ذخیره نمی شوند.
قابلیت مشاهده	اطلاعات در URL توسط همه قابل مشاهده است.	قابل مشاهده

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Reduce DNS lookups و یا ارور Minimize DNS lookups که هر دو به یک مفهوم اشاره دارد، صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Reduce DNS lookups

نام: Reduce DNS lookups
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 70%

خطا Reduce DNS lookups

DNS lookups چیست ؟

Hostname یا آدرس یک سایت همانند seoraz.com گفته می‌شود، تمام Hostname ها استعاره از یک IP هستند که به این استعاره alias هم گفته می‌شود و اگر توجه کرده باشید در تنظیمات DNSها یک نوع رکوردی وجود دارد به نام A، در این نوع رکوردها نام یک سایت (Hostname) را می‌دهیم تا به یک IP وصل شود.

زمانی که شما یک Hostname را در نوار آدرس مرورگر خود تایپ می‌کنید مانند seoraz.com سیستم شما به دنبال IP آن می‌گردد و اگر در خودش نباشد به‌وسیله مودم به دنیای بیرون وصل می‌شود و یک action به نام DNS lookups(جستجوی DNS) ایجاد می‌کند، ابتدا به سراغ DNS Serverهای ISP محلی (سرویس‌دهندگان اینترنت) می‌رود و به دنبال IP یک Hostname که شما تایپ کردید می‌گردد و اگر درون ISP محلی نباشد به یک DSN Server سطح بالاتر مراجعه می‌کند همانند ISP های جهانی و حتی اگر پاسخ را در آن‌ها پیدا نکند (که بسیار بعید است) درنهایت به بالاترین مرجع یعنی InterNIC خواهد رسید.

InterNIC پایگاه داده‌ ثبت‌نام دامنه (Domain Registration Database) وبرترین و بزرگ‌ترین DNS Server است . شما می‌توانید با مراجعه به آدرس www.internic.net و انتخاب گزینه Whois و سپس واردکردن آدرس یک سایت به جستجو درباره سایت مربوطه و webserver آن بپردازید.

پس به شکل خلاصه DNS lookups یعنی عمل جستجوی IP یک سایت در بین DNS Serverها می‌باشد. فرآیند DNS lookup تا زمانی که تمام نشود مرورگر نمی‌تواند فایل‌های لازمه برای نمایش سایت را دانلود کند و اصولا این فرآیند زمانی بین 20 تا 120 میلی‌ثانیه به طول می‌انجامد تا IP یک سایت را پیدا کند.

مثال از DNS Lookup

در این مثال می‌خواهیم به شما نشان دهیم که چطور یک DNS lookup می‌تواند بر روی بهینه سازی سرعت سایت تاثیر بگذارد، به همین منظور از یک ابزار آنلاین تست سرعت سایت استفاده می‌کنیم و ما در اینجا به کمک ابزار webpagetest.org سایت seoraz.com را تست می‌کنیم. به آدرس ذکر شده رفته و در سربرگ Details به بررسی این موضوع می‌پردازیم.

DNS Lookup

طبق عکس، سایت سئوراز درکل از ۳۰ درخواست ساخته شده است که ۳ نوع آن DNS lookup است، نتیجه‌ای که از این تست می‌توان گرفت این است که زمان لازم برای پیدا کردن DNSهای موجود در سایت سئوراز حدود 100 میلی‌ثانیه می‌باشد که این زمان بسیار فوق العاده می‌باشد و نشان از بهینه سازی سئو سایت صحیح آن است، ولی گاهی ما در پروژه‌های افزایش سرعت سایت برخوردیم که زمان کل DNS lookup به 2980 رسیده و این یعنی 2.98 ثانیه به زمان کل بارگذاری سایت اضافه می‌شود. و اگر سعی کنیم می‌توانیم این زمان را بهبود دهیم، پس می‌توان نتیجه گرفت که DNS lookup می‌تواند بر سرعت سایت تاثیر مناسبی داشته باشد و بهبود آن باعث بهینه سازی سایت می‌شود. در پروژه‌ای که اشاره کردیم ما در انتها توانستیم زمان 2980 را به 1201 برسانیم و این نکته بسیار مهم است چرا که در بهبود سازی فقط یک فاکتور دو ثانیه از زمان لود کل وب سایت کاسته شد.

هدف Reduce DNS Lookups هم همین است، میگوید Reduce کنید یعنی کاهش دهید. ترجمه کامل آن می‌شود زمان جستجوی DNS را کاهش دهید، به عبارت دیگر تعداد دفعات DNS Lookup را کاهش دهید.

نحوه رفع مشکل Reduce DNS lookups

کاهش تعداد DNS lookup ساده به نظر می‌رسد و میتوان با داشتن سیاست های مناسب به این خواسته رسید.

به سادگی شما می‌توانید تعداد دامنه‌های مجزایی که در سند سایت خود آن‌ها را فراخوانی کرده‌اید را کاهش دهید. مثلا به عکس بالا توجه کنید، ۳ بار درخواست از نوع DNS lookup بوده است چرا که سه دامنه متفاوت در سند سایت میزفا فراخوانی شده است، که اولی طبیعتا خوده سایت یعنی دامنه seoraz.com است، دومی مربوط به سایت cloudflare است و سومی برای گوگل آنالیتیکس می‌باشد. در ساخت سایت‌ های ایرانی مخصوصا سایت‌های با CMS های اماده همانند وردپرس و جوملا ممکن است به خاطر نصب افزونه‌های مختلف از شرکت‌های متفاوت، چنین خطاهایی بسیار باشد، چرا که هر افزونه ممکن است از سایت‌های لازمه برای به اجرا در آمدن در سایت شما فایل هایی را در سند HTML سایتتان لود نماید و این یعنی افزایش DNS lookup در طراحی سایت شما. نمونه سایت‌های مشهوری که در بسیاری از سایت‌های ایرانی وجود دارد توجه نمایید:

• دامنه fonts.googleapis.com : مربوط به فونت‌های گوگل می‌باشد.
• دامنه google-analytics.com : مربوط به ابزار آمارگیر گوگل یعنی گوگل آنالیتیکس
• دامنه maps.googleapis.com : مربوط به مپ گوگل
• دامنه cdnjs.cloudflare.com : مربوط به CDN کلودفلیر
• دامنه amarfa.ir : مربوط به طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)‌ ایرانی برای گرفتن آمار
• دامنه webgozar.com : مربوط به سایت داغون امار گیر
• دامنه logo.samandehi.ir : لوگوی مجوز اخذ شده از ساماندهی محتوای فضای مجازی
• دامنه trustseal.enamad.ir : لوگوی مجوز اخذ شده از سایت ای نماد
• دامنه cdn.onesignal.com : مربوط به سایت onesignal برای ایجاد نوتیفیکیشن در مرورگر کاربران
• و تمام زیردامنه‌های سایت شما و هر فایلی که از دیگر دامنه‌ها در سند شما بارگذاری شود باعث افزایش DNS lookup می‌شود.

بنابراین روش اول که اشاره شد جذف چنین سایت‌هایی برای Reduce DNS lookups می‌باشد، روش دوم دانلود فایل‌هایی است که از یک سایت خارجی در سند ما لود می‌شود و قرار دادن آن فایل در هاست خود یا CDN سایت ما، که این روش باعث بهبود DNS lookups می‌شود، همان‌طور که می‌دانید برای دیدن سایت میزفا حداقل یک DNS lookups یعنی seoraz.com به ناچار به وجود می‌اید بنابراین وقتی چنین DNS lookups قطعا وجود دارد می‌توان فایل‌هایی که از دیگر سایت‌ها در سایت ما لود می‌شود را درون هاست خود قرار دهیم و یا اگر CDN داریم در آنجا قرار دهیم. البته ذخیره چنین فایل‌های خارجی از دامنه‌های دیگر در CDN راه بهتری است چرا که باعث کاهش فشار به سرور اصلی سایت شما می‌شود.
رکورد Canonical Name به اختصار CNAME نام برده می‌شود و یکی از رکوردهای نسبتا پرکاربرد DNS است، این نوع رکورد DNS که از یک نام دامنه مستعار (alias) استفاده می‌کند تا به دامنه‌ای دیگر وصل شود، سعی کنید در فراخوانی آدرس‌ها از CNAME در سایت خود استفاده نکنید. چرا که یک رکورد CNAME اشاره می‌کند به رکورد A و تازه رکورد A به دنبال DNS می‌گردد تا ای پی سایت را پیدا کند. پس به حداقل رساندن رکوردهای CNAME در بهبود لود سایت کمک می‌کند.

Reduce DNS lookups

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

1. یک CName به یک اسم Domain یا A Record دیگر اشاره می‌کند
2. یک A Record به یک آدرس IP اشاره می‌کند
3. پیدا کردن یک CName یعنی آغاز یک جستجو (شروع DNS lookups)
4. پیدا کردن یک A Record یعنی پایان یک جستجو (پایان DNS lookups)
5. تداخل CName های زیاد می تواند باعث ایجاد شدن Loop شود (یعنی افزایش DNS lookups)
6. وجود A Record های زیاد هرگز ایجاد Loop در نتایج DNS نمی کند

Defer parsing of JavaScript باعث می‌شود لود اولیه سایت بهبود یابد و برخی از DNS lookupsها را به تاخیر اندازد.
فعال بودن keep-alive باعث کاهش DNS lookups می‌شود، زمانی که keep-alive فعال نباشد برای دریافت هر فایل درخواست‌ها به شکل جداگانه ارسال می‌شود و هر بار برای یک درخواست DNS lookup رخ می‌دهد، ولی با فعال بودن keep-alive باعث می‌شود که فقط درخواست DNS lookups برای هر دامنه یک بار رخ دهد و مجموعه درخواست‌ها برای هر دامنه در قالب یک درخواست ارسال می‌گردد.
تمام موارد مربوط به Make fewer HTTP requests می‌تواند به رفع خطای Reduce DNS lookups کمک نماید.

درباره DNS caching

تشکر از DNS caching موجود در کامپیوترها که کمک خوبی به افزایش سرعت سایت می‌کند، چرا که مرورگر دوباره لازم نیست برای پیدا کردن ای پی به DNS Server ها دستوری ارسال کند و از کش لوکال برای پیدا کردن ای پی یک سایت استفاده می‌کند، البته ذکر این نکته لازم است که وقتی سرور یا هاست یک سایت تغییر کند IP آن سایت هم عوض می‌شود بنابراین مرورگر شما در حافظه‌ی پنهان یا همان کش DNS خود، از IP قدیمی استفاده می‌کند و شما نمی‌توانید مثل همیشه به سایت مورد نظر متصل شوید.

اگر از مرورگر کروم استفاده می کنید دستور chrome://net-internals/#dns را وارد نمایید تا تمام DNSهایی که در حافظه پنهان خود ذخیره کرده است را مشاهده کنید. برای پاک کردن کش DNS در ویندوز می‌توانید با اجرا کردن CMD در حالت Run as administrator دستور ipconfig /flushdns تایپ و اجرا نمایید.

DNS caching