آموزش افزایش سرعت سایت با 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 توسط همه قابل مشاهده است.	قابل مشاهده نیست.

پیج رنک (PAGE RANK)

پیج رنک (PageRank) روش گوگل برای اندازه گیری اهمیت صفحات است. در پروسه رتبه دادن به صفحات، تمام سیگنال های درون صفحه نظیر عنوان صفحه، تعدادتکرار کلمه در صفحه و محاسبه می شوند. در بخشی از این پروسه گوگل از پیج رنک برای تنظیم نتایج جست و جو استفاده می کند.

لذا سئو سایت هایی که مهم تر هستند به رده های بالاتر می آیند. نحوه ی رتبه بندی در گوگل ممکن است به این شرح باشد:

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

پیج رنک چه مفهومی دارد؟

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

پیج رنک چگونه محاسبه میگردد؟

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

((PR(A) = (1d) + d(PR(t1)/Ct1) + … + PR(tn)/ctn

• (PR ( A ، یعنی پیج رنک صفحه A
• d یک فاکتور تضعیف است که معمولا برابر هشتاد و پنج صدم در نظر گرفته می شود
• t1 , t2 , . . . , tn صفحاتی اند که به صفحه A لینک داده اند
• (C(t1 نیز تعداد لینک هایی است که از صفحه t1 خارج شده است.

برای محاسبه پیج رنک هر صفحه نیاز به دانستن پیج رنک تمام صفحاتی است که به آن لینک داده اند. در مثال زیر نحوه محاسبه پیج رنک، برای تنها چهار صفحه، بررسی می شود. صفحات C ، B ، A و D به صورت نشان داده شده در شکل زیر به یکدیگر لینک داده اند:

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

با قرار دادن 0.85=d ، پیج رنک چهار صفحه محاسبه می شود:

PR (A) =10.85+0.85{PR(C)/1} = 0.15+0.85{1/1} =1

PR (B) =0.575, PR (C) =2.275, PR (D) =0.15

شکل زیر پیج رنک های جدید را نشان می دهد:

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

PR (A) = 2.58375, PR (B) = 0.575

PR(C) = 1.19125, PR (D) = 0.15

حال محاسبات، آن قدر تکرار می شود تا این که تغییرات در پیج رنک، ناچیز گردد. بعد از ۲۰ تکرار، پیج رنک ها به مقادیر زیر می رسند:

PR (A) = 1.4901259564, PR (B) = 0.7832552713

PR(C) = 1.5766187723, PR (D) = 0.15

و به این ترتیب پیج رنک تمام صفحات به دست می آید.

فیدبک در پیج رنک

همان طور که صفحه C باعث تقویت پیج رنک صفحه A می گردد، پیج رنک جدید صفحه A هم باعث تقویت (PR ( C می گردد. این فیدبک موجود در محاسبه پیج رنک، در کارکرد مناسب آن بسیار مؤثر است.

چگونه می توان پیج رنک صفحه را دانست؟

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

نوار ابزار گوگل چه قدر دقیق است؟

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

پیج رنک موضوعی پیچیده

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

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

برای افزایش پیج رنک چه باید کرد؟

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

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

پیج رنک (PageRank) و آلکسا رنک (Rank Alexa) بین مدیران سایت های ایرانی اپیدمی شده است. هر جا می روید سخن از آن است. خصوصا برای سایت هایی که درآمد تبلیغاتی برایشان مهم است.

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

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

آموزش افزایش سرعت سایت با 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 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

در این پست قصد داریم درباره ارور 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 را بهتر است نادیده بگیرید.