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

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

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

قیمت سئو سایت و بهینه سازی سایت به چه صورت محاسبه می شود

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

قیمت سئو سایت

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

عدم تعریف مناسب از خدمات سئو و عدم هدفگذاری مناسب

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

 قیمت سئو بر اساس کلمه کلیدی

برخی دیگر قیمت سئو را بر اساس کلمه کلیدی اعلام میکنند، بدون اینکه در نظر داشته باشند که سئو داخلی مشتری شامل چه شرایطی است و چه کارهایی باید بر روی آن انجام شود. 

سئو سیاه در برابر سئو سفید

برخی دیگر قرارداد را به صورت کوتاه مدت منعقدکرده و نتیجه را منوط به قرار گرفتن در صفحه اول گوگل در کلمه خاصی می کنند. 

سئو سایت بر اساس پکیج 

 دلایل مختلفی برای دریافت خدمات سئو از طریق پکیج وجود دارد که به طور خلاصه برخی از آنها عبارتند از:

• دید دراز مدت به همکاری با شرکت سئو
•  افزایش ورودی گوگل به نسبت سایر روش ها
•  فعالیت بر اساس اصول سئو سفید و مورد تایید گوگل
•  تاثیر پذیری کمتر نسبت به تغییرات ناگهانی رتبه های گوگل و…

قیمت سئو سایت توسط اکثر سایت چگونه محاسبه می شود؟

معمولا در تعیین هزینه بهینه سازی وب سایت موارد زیر را مد نظر قرار می گیرد

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

آنالیز و بهینه سازی محتوا

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

رفع خطای Defer parsing of JavaScript و Prefer asynchronous resources

در این جلسه قصد داریم درباره مشکل Defer parsing of JavaScript و همچنین خطای Prefer asynchronous resources صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای بهینه سازی سئو سایت ما مشکل‌ساز است.
البته در این مقاله تمرکز برای رفع خطای Defer parsing of JavaScript خواهد بود و در راستای رفع آن ارور Prefer asynchronous resources هم رفع خواهد شد.

شاید رفع مشکل Defer parsing of JavaScript برای خیلی از دوستان سخت باشد و گاهی غیرممکن هست. برای همین توصیه می‌کنیم خیلی پیگیر این بخش از ارور سایت GTMetrix.com نشوید به دلیل اینکه گاهی رفع این خطا باعث حذف تمامی فایل‌های جاوااسکریپت یا همان JS می‌شود که در خیلی از سایت‌ها نشدی است. یعنی برای رفع این مشکل در اخر مجبورخواهید بود همه کدهای جاوا اسکریپت JavaScript را از سایتتان پاک کنید تا خطا به شکل کامل رفع و امتیاز 100 شود، یا اگر تعداد فایل های جاوااسکریپت زیاد باشد مجبور خواهید بود اول آنها را یکی کنید تا کنترل و مدیریت آن راحت‌تر شود که این روش هر چند در بحث تئوری مشکلی ندارد ولی در عمل ممکن است با ادغام باعث ایجاد تداخل و مشکلات متعدد شود که حاصل آن عدم اجرای دستور در مکان تعریف شده میباشد، پس از الان خیلی به این خطا حساس نباشید.

خلاصه‌ی از خطا Defer parsing of JavaScript

نام: Defer parsing of JavaScript

نوع: مربوط به جاوااسکریپت
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 69%

جزئیات بیشتر درباره خطا Defer parsing of JavaScript

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

گوگل آزمایشی را در سال ۲۰۱۱ بر روی تلفن‌های همراه هوشمند اجرا گردید و به این نتیجه رسیدن که هر یک کیلوبایت از فایل جاوا اسکریپت حدود 1 میلی‌ثانیه زمان برای خواندن به طول می‌انجامد و این مقدار به زمان کل لود صفحه اضافه‌ می‌گردد، و حال اگر ۲۰۰KB حجم جاوا اسکریپت باشد زمان لود اولیه آن در یک صفحه ۲۰۰ میلی‌ثانیه به زمان لود کل صفحه برای بازدیدکننده اضافه می‌گردد، از آنجایی که جاوا اسکریپت در هر صفحه باید لود شود، این تاخیر در تمام صفحات ایجاد خواهد شد.

نحوه رفع ارور Defer parsing of JavaScript

راه حل اول

همان‌طور که می‌دانید لود کدهای یک صفحه طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) به ترتیب از بالا یعنی قسمت Head صفحه به پایین یعنی تا </body> اجرا می‌شود و اگر تعداد بسیاری فایل در قسمت Head فراخوانی شود باعث کند‌تر شدن و بالا رفتن زمان لود صفحه‌هات سایت می‌گردد، بنابراین برای بالا بردن سرعت سایت و کم کردن زمان لود آن باید فایل‌های جاوا اسکریپت JavaScript را به تعویق انداخت.

مثلا می‌توان فایل‌های جاوا اسکریپت را به انتهای کدها اضافه کرد، به همین منظور کافیست کدهای JS (منظور همان کدهای جاوا اسکریپت است) که با تگ <script> در صفحات HTML فراخوانی می‌شود را در فوتر، قبل از </body>قرار داد تا ابتدا متن‌ها و CSS ها لود شود و سپس فایل‌های جاوا اسکریپت در انتها لود شود. البته این روش بیشتر برای سایت‌های از نوع استاتیک است و سایت‌های از نوع داینامیک نیاز به ویرایش بیشتری دارند.

راه حل دوم

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

چند افزونه مخصوص وردپرس:

WP Deferred JavaScripts

Speed Booster Pack

autoptimize

Async JavaScript

 چند افزونه مخصوص جوملا:

JCH Optimize

Javascript Async and Defer

scriptsdown

راه حل سوم

 استفاده از اتریبیوت های defer و یا async در تگ جاوا اسکریپت هم می‌تواند باعث رفع خطای Defer parsing of JavaScript و هم رفع خطای Prefer asynchronous resources در PageSpeed گوگل شود.

async-vs-defer

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

javascript-defer-async

راه حل چهارم

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

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

اجرای روش‌های بالا جدا از اینکه باعث رفع ارور Defer parsing of JavaScript خواهد شد باعث کاهش خطای Prefer asynchronous resources هم می‌شود. همان‌طور که در اول مقاله اشاره کردیم برای کسب امتیاز ۱۰۰ در این فاکتور گوگل خیلی حساسیت به خرج ندهید، هر چند اگر به شکل اصولی فراخوانی ها انجام شود به سئو داخلی کمک فراخوانی می‌کند