جلسه ۱۶ – رفع خطای ()Avoid document.write

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش GTmetrix همراه شما هستیم. تو مقاله قبلی درباره رفع خطای Avoid CSS @import صحبت کردیم و در این مقاله به آموزش برطرف کردن مشکل ()Avoid document.write در GTmetrix جدید خواهیم پرداخت. اگه یه کوچولو زبان انگلیسی‌مون خوب باشه، متوجه می‌شیم که در اینجا به ما هشدار داده شده که از ()document.write استفاده نکنیم. پس تو قسمت اول یاد می‌گیریم این ()document.write چی هست، تو قسمت دوم متوجه می‌شیم چه اشکالی در بهینه سازی سرعت سایت ایجاد می‌کنه و در نهایت هم به شما می‌گیم چطور این خطا رو برطرف کنید (البته نیاز به تخصص در برنامه نویسی داره).
پس لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای ()Avoid document.write

میزان سختی: ****
روی چه مواردی تاثیر میذاره: TBT

متد ()document.write چیست؟

متد یا تابع ()document.write که در JavaScript استفاده میشه، به بیان خیلی خیلی ساده یه نوشته رو در سند HTML ایجاد می‌کنه. هرچند که استفاده اصلی از این متد به همینجا ختم نمیشه و میشه باهاش اقدامات بیشتری انجام داد. مثلا با استفاده از ()document.write میشه شرایطی رو فراهم کرد که اگه کاربر روی متن خاصی کلیک کنه، یه متن دلخواه رو بهش نمایش بدیم.
با این حال استفاده از متد ()document.write باعث ایجاد اشکالاتی در عملکرد (Performance) صفحه میشه. مهم‌ترین موردی که میشه بهش اشاره کرد اینه که مرورگرهایی مثل کروم و فایر فاکس تحت شرایط خاصی جلوی اجرای اسکریپت‌های شامل ()document.write رو می‌گیرند. پس خیلی نمیشه به اجرای این متد دل خوش کرد و بهتره از جایگزین‌های دیگه‌ای استفاده کنیم. برای همینه که جی تی متریکس (و قبلا Lighthouse) نسبت به استفاده از ()document.write هشدار دادند و خطای Avoid ()document.write رو به لیست خطاهاشون اضافه کردند.

استفاده از ()document.write چه مشکلی ایجاد می‌کنه؟

استفاده از این اسکریپت ممکنه تا چندید ثانیه لود صفحه رو به تاخیر بندازه. مخصوصا برای کاربرانی که اینترنت ضعیفی دارند، ممکنه حتی تا بیش از ۱۰ ثانیه تاخیر در زمان لود صفحه ایجاد کنه. به همین دلیل مرورگر کروم در بیشتر موارد از اجرای ()document.write جلوگیری می‌کنه.

در صورت استفاده از ()document.write ، در کنسول DevTools کروم چنین پیغامی رو خواهیم دید:

[Violation] Avoid using document.write().

همچنین در کنسول DevTools فایر فاکس با چنین پیغامی مواجه خواهیم شد:

An unbalanced tree was written using document.write() causing
data from the network to be reparsed.

بنابراین هر دوی این مرورگرها توصیه می‌کنند که از ()document.write استفاده نکنیم.

هرچند اگه مرورگر ()document.write رو اجرا هم بکنه، جای خوشحالی نداره. چرا که باعث کاهش سرعت سایت میشه و این اصلا اتفاق خوبی نیست. پس میشه گفت هنگام به‌کار بردن ()document.write با ۲ حالت مواجه هستیم. یا مرورگر جلوی اجرای اسکریپت رو می‌گیره و بخشی از کدهای مورد نظر ما اجرا نمیشه. یا اینکه کدها اجرا میشن و باعث کاهش شدید سرعت (مخصوصا برای کاربران با اینترنت ضعیف) میشه. در واقع اگه این اسکریپت‌ها توسط مرورگر متوقف نشن، GTmetrix یا Google Lighthouse خطای ()Avoid document.write رو نمایش میده. مشکل ()Avoid document.write همچنین باعث افزایش Total Blocking Time هم میشه. بنابراین رفع خطای ()Avoid document.write باعث میشه TBT کاهش پیدا کنه.

یکی از مهم‌ترین دلایلی که مشکل ()Avoid document.write رو به یه خطای اساسی تبدیل می‌کنه اینه که وجود این نوع اسکریپت در صفحات باعث ایجاد اشکال در Speculative Parsing میشه. در حال حاضر مرورگرهای مدرن از Speculative Parsing استفاده می‌کنند. Speculative Parsing باعث میشه DOM سریع‌تر ساخته بشه و درنتیجه باعث بهینه سازی سرعت سایت خواهد شد.

چطور خطای ()Avoid document.write را برطرف کنیم؟

ساده‌ترین روش پیشنهادی برای برطرف کردن خطای ()Avoid document.write حذف کردن این کد هست. بله، به همین سادگی. با توجه به همه هشدارهایی که درباره معایب استفاده از ()document.write دادیم و همه مشکلاتی که گفتیم ایجاد می‌کنه، پس منطقیه که تا جایی که امکان داره ازش استفاده نکنیم. اما اگه واقعا راهی برای حذف ()document.write نداشتید، حداقل از تگ <async> استفاده کنید تا دیگه render-blocking نباشه.

هرچند که مشکل ()Avoid document.write کمتر در سایت‌ها دیده میشه، اما در صورت مشاهده باید سریعا برطرف و حل بشه. چون باعث کاهش سرعت شدید و همچنین افزایش Total Blocking Time میشه.

بسپارید به متخصص SEO یا تیم SEO

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

جمع بندی

در این آموزش درباره ارور ()Avoid document.write صحبت کردیم و اشاره کردیم که حل این مشکل به همین سادگی نیست. یعنی اگه تخصص برنامه نویسی نداشته باشیم، نمی‌تونیم بریم این کد رو حذف کنیم و خیالمون راحت باشه که دیگه هیچ مشکلی نیست. پیدا کردن این کد، حذف کردنش و همچنین استفاده از یه کد جایگزین نیاز به تخصص بالای برنامه نویسی داره و ساده نیست. پس بهتره برطرف کردن این خطا رو به برنامه نویس سایتتون بسپارید. در جلسه بعدی با آموزش برطرف کردن خطای Avoid enormous network payloads همراه شما عزیزان خواهیم بود.

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