نوشته قبلی نوشته بعدی تغییر شکل JavaScript: نکات و ابزارهایی برای آزمایش ارائه

تغییر شکل JavaScript: نکات و ابزارهایی برای آزمایش ارائه

تغییر شکل JavaScript: نکات و ابزارهایی برای آزمایش ارائه منتشر شده در آوریل 8, 2020ارسال دیدگاه

علاقه مند به حوزه Seo & Sem

جاوا اسکریپت این توانایی را دارد که موارد مختلفی را در یک وب سایت برای کاربران و موتورهای جستجو شکسته باشد.

بنابراین ، بسیاری از متخصصان سئو و بازاریابان دیجیتال به دلیل تأثیرات منفی بالقوه ای که در وب سایت های خود دارند می توانند به JavaScript به عنوان یک زبان برنامه نویسی بی اعتماد باشند.

تبلیغات
ادامه خواندن زیر

غالباً هوای اسرار اطراف JavaScript و رندر وجود دارد ، که فقط به این بی اعتمادی می افزاید.

به همین دلیل من این راهنما را با هدف توضیح دقیق اینكه چگونه می توانید آزمایش كنید كه آیا JavaScript در وب سایت شما به درستی ارائه می دهد … یا خیر ، نوشتم.

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

مشکلات JavaScript که باید برای آنها آزمایش کنید

اولویت اصلی برای هر ممیزی جاوا اسکریپت همیشه پیدا کردن موارد حساس و مهمی است که کاربران و موتورهای جستجو را قادر به دیدن محتوای شما می دانند.

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

تبلیغات
ادامه خواندن زیر

آیا صفحه قابل تمیز کردن است؟

Google فقط می تواند محتوای مورد نظر خود را نمایه کند ، اما سایر موتورهای جستجو نمی توانند JavaScript را به هیچ وجه ارائه دهند یا محتوا را تولید کنند.

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

تأثیر سرعت بارگذاری صفحه چیست؟

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

آیا بین محتوای تحویل نشده و ارائه شده تفاوت هایی وجود دارد؟

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

صفحاتی با جاوا اسکریپت که نیاز به ارائه دارند به صف اضافه می شوند تا روزها ، هفته ها یا حداکثر یک ماه بعد از آن ارائه شوند.

تبلیغات
ادامه خواندن زیر

نمودار دو صفحه نمایه سازی Google

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

چگونه Rendering Differ از طریق دستگاه ها و مرورگرها متفاوت است؟

ارائه به بسته به نوع دستگاهی که به دلیل تفاوت در نماهای بین المللی ، CPU ها و سایر عوامل استفاده می شود ، تأثیر می گذارد.

تبلیغات
ادامه خواندن زیر

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

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

پیشنهاد ویژه  الگوریتم جدید Google ممکن است رتبه بندی صفحه را بروز کند

ابزار مورد استفاده برای آزمایش JavaScript

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

۱٫ ابزار بازرسی URL

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

تبلیغات
ادامه خواندن زیر

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

تصویر صفحه ابزار بازرسی URL

ویژگی برجسته ابزار بازرسی URL: پیام های کنسول JavaScript در زمان واقعی.

ابزار بازرسی URL همچنین به شما امکان می دهد تست های زنده را برای URL ها اجرا کنید ، این نشان می دهد هشدارها و خطاهایی در زمان واقعی JavaScript که توسط Google روبرو شده اند ، که می تواند مانع از مشاهده و نمایه شدن محتوای صفحه شما شود.

تبلیغات
ادامه خواندن زیر

این بخش از ابزار مخصوصاً برای رفع اشکال در JavaScript مفید است.

ابزار بازرسی URL خطای کنسول JavaScript

۲٫ تست موبایل-دوستانه

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

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

تبلیغات
ادامه خواندن زیر

عکس تست تست تلفن همراه

ویژگی برجسته تست دوستانه موبایل: صفحه ارائه شده عکس فوری HTML.

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

عکس لحظه HTML تست دوستانه موبایل

۳٫ بینش صفحه

ابزار PageSpeed Insights Google با استفاده از ترکیبی از داده های آزمایشگاهی از لایت هاوس و داده های میدانی از گزارش تجربه کاربر Chrome برای ثبت سرعت و عملکرد یک صفحه.

تبلیغات
ادامه خواندن زیر

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

تصویر صفحه PageSpeed Insights

ویژگی برجسته صفحه PageSpeed Insights: بخش فرصت ها .

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

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

تبلیغات
ادامه خواندن زیر

گزارش تصویری گزارش "فرصتها" از PageSpeed Insights

۴- گسسته کننده

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

تصویر صفحه نمایش Diffchecker

برای شروع کار با Diffchecker ، سعی کنید کد منبع صفحه را کپی کنید و این را در کادر اصلی متن قرار دهید.

تبلیغات
ادامه خواندن زیر

مشاهده تصویر صفحه منبع

تصویر کد منبع

سپس بیرونی HTML را در همان صفحه کپی کرده و در کادر Changed Text قرار دهید.

تبلیغات
ادامه خواندن زیر

تصویر عنصر را بازرسی کنید

تصویر خارجیHTML را کپی کنید

سپس برای مقایسه دو مجموعه کد ، Find Differences را فشار دهید.

تبلیغات
ادامه خواندن زیر

ویژگی برجسته Diffecker: خلاصه حذف و اضافات.

پیشنهاد ویژه  گوگل هدایت دستور Blindsides دستور تو رفتگی در دیوار

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

این نشان می دهد که چگونه صفحه پس از رندر به شدت تغییر می کند.

تصویر صفحه حذف و حذف اضافی

۵- WebPageTest

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

تبلیغات
ادامه خواندن زیر

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

تصویر صفحه WebPageTest

ویژگی برجسته WebPageTest: درخواست نقشه.

نقشه درخواست درون WebPageTest یکی از ویژگی های مورد علاقه من است که در مدت زمان طولانی در یک ابزار تست سرعت قرار گرفتم.

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

تبلیغات
ادامه خواندن زیر

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

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

تصویر صفحه "درخواست نقشه" از WebPageTest

Request Map به طور پیش فرض توسط میزبان منبع کدگذاری می شود ، اما می توانید به جای آن ، پارامتر ساده ؟ گروه = mimeType را به انتهای آدرس اینترنتی خود اضافه کنید تا رنگ آن را بر اساس نوع منبع تغییر دهید.

تبلیغات
ادامه خواندن زیر

درخواست نقشه WebPageTest با مرتب سازی بر اساس نوع تصویر پارامتر

این امر باعث می شود فرآیند بررسی نقطه ای بار بار JavaScript بسیار سریعتر و ساده تر شود.

نقشه درخواست WebPage نقشه مرتب سازی بر اساس نوع منبع تصویر

۶٫ Chrome DevTools

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

تبلیغات
ادامه خواندن زیر

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

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

تصویر صفحه نمایش عملکرد Chrome DevTools

تصویر صفحه نمایش عملکرد Chrome DevTools

یک تجسم خوب دیگر در تب شبکه یافت می شود که اسکریپت هایی را که اجرا شده اند و به چه ترتیب و همچنین Load Event که به عنوان یک خط قرمز نمایش داده می شود نشان می دهد.

تبلیغات
ادامه خواندن زیر

این مهم است زیرا واقعه Load نکته ای است که گوگل رندر را به اتمام می رساند و یک عکس فوری از HTML می گیرد. هر اسکریپتی که پس از این نقطه اجرا شود ، شانس کمی برای دیدن توسط Google دارد.

پیشنهاد ویژه  شماره نمایه سازی گوگل 23 - 26 مه 2019 - حل شد

عکس آبشار شبکه DevTools Chrome

همچنین می توانید از دستگاه حالت در Chrome DevTools استفاده کنید تا رندر در دستگاه های مختلف را تقلید کنید.

تصویر دستگاه دستگاه Chrome DevTools

سایر مرورگرها همچنین از طریق ابزارهای توسعه دهنده خود ، مانند Firefox ، Opera و Safari ، عملکرد اشکال زدایی JavaScript را ارائه می دهند. برای به دست آوردن بینش مهم رندر ، لازم نیست از Chrome استفاده کنید.

تبلیغات
ادامه خواندن زیر

ویژگی برجسته Chrome DevTools: گزارش Coverage.

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

۷٫ DeepCrawl

در حالی که سایر ابزارهای ذکر شده در بالا ، به صورت صفحه ای به صفحه ، بینش های دقیقی را ارائه می دهند ، از DeepCrawl (disclousre: من برای DeepCrawl کار می کنم) برای ارائه JavaScript در تمام صفحات مختلف یک وب سایت ، به همان روشی که Google انجام می دهد ، استفاده می شود. .

این ابزار به شما امکان آزمایش و نظارت بر ارائه را در مقیاس می دهد و به شما نشان می دهد که آیا پیوندها و محتواهایی که توسط JavaScript ایجاد یا تعدیل می شوند توسط موتورهای جستجو می توانند خزیده و نمایه سازی شوند.

تبلیغات
ادامه خواندن زیر

تصویر تنظیم DeepCrawl

ویژگی برجسته DeepCrawl: تزریق اسکریپت سفارشی.

DeepCrawl یک ویژگی جاوا اسکریپت سفارشی دارد که به شما امکان می دهد هنگام خزیدن کد را به یک وب سایت تزریق کنید. این روش به این معنی است که می توانید عناصر موجود در DOM (مدل شیء سند) را اضافه کنید ، تغییر یا حذف کنید تا تأثیرات ارائه را آزمایش کنید.

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

تبلیغات
ادامه خواندن زیر

DeepCrawl تصویر جاوا اسکریپت سفارشی

نتیجه

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

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

تبلیغات
ادامه خواندن زیر

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

منابع بیشتر:


اعتبار تصویر

تمام تصاویر گرفته شده توسط نویسنده ، مارس ۲۰۱۹

منبع مقاله

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *