functions برای تاکتیک های core web vitals با htmlrewriter cloudflare

راهنمای ما برای تست AB برای Core Web Vitals مجموعه ای از گام های کوچک را با دو سرویس و یک برنامه افزودنی مرورگر برای نوشتن آزمایش هایی برای تاکتیک های کد frontend توضیح می دهد. سی سال پیش، ما منبع خام یک صفحه را برای اجرای عملیات Find-and-Replace کپی می کردیم تا زمانی که بتوانیم فکسی از صفحه ای را که در پوشه ای فعال شده تحت وب قرار داده شده بود مدیریت کنیم تا همان نوع توصیه ها را نشان دهیم. لازم نیست این کار را انجام دهیم. راه اندازی یک پروکسی معکوس و نوشتن نرم افزار برای انجام SEO در بیست سال پیش محدود به مجموعه کوچکی از شرکت ها بود که خودشان زیرساخت را ساخته و میزبانی می کردند. اکنون Cloudflare یک راه حل کلید در دست به ما ارائه می دهد. می توانید با استفاده از یک حساب کاربری رایگان راه اندازی کنید. برای تغییر کد فرانت اند، از API جاوا اسکریپت HTMLRewriter() Cloudflare استفاده کنید. درک کد نسبتاً آسان است. با Core Web Vitals، فوریت، نیاز درک شده و سرعت قادر به چرخه در آزمایش های مختلف است که در نهایت ارزش و واقعاً نشان می دهد. تحت تاثیر قرار می دهد. پلتفرم اساسی از طریق مراحل ذکر شده در راهنمای ما در دسترس شما است. ما توابعی را برای ایجاد تغییرات معمولی می نویسیم تا بتوانید بلافاصله آزمایش تاکتیک های واقعی را شروع کنید.seo

HTMLRewriter()

اگر دنبال کرده اید، ممکن است بدانید که اسکریپت ما گزینه ای را برای بارگذاری مجدد عنصری که می توانید در یک پارامتر درخواست برای LCP مشخص کنید، ارائه می دهد. زمانی که مقدار از دست رفته باشد، فرمی را برمی گردانیم، فقط برای اینکه اضافه کردن مرجع شما را آسان کنیم. همچنین یک مکان نگهدار برای چیزی به نام اهمیت وجود دارد که ما نیز به آن خواهیم پرداخت. آنچه مهم است این است که بفهمیم قرار است چه کاری انجام دهیم. API HTMLRewriter () این توانایی را به ما می دهد تا از انتخابگرهای عنصر به سبک jQuery برای اتصال به عناصر HTML در منبع صفحه خام برای اجرای جاوا اسکریپت از آن پایه استفاده کنیم. شما می توانید عناصر، یک گروه کامل از عناصر یا حتی سند پایه را به روش های قدرتمندی تغییر دهید. برای مثال می توانید عنوان صفحه را ویرایش کنید. در مرحله تولید، ویرایش شما تبدیل به عنوان می شود و همان چیزی است که در Google و Bing نمایه می شود. یکی از مشکلاتی که با آن روبرو خواهید شد این است که فقط می توانید منبع خام را ویرایش کنید، نه یک مدل شیء سند هیدراته (DOM). یکی از راه های سریع برای مشاهده منبع خام، استفاده از عملکرد منبع مشاهده داخلی مرورگر است. برای مثال، در فایرفاکس، view-source خطاهای اعتبارسنجی را با رنگ قرمز برجسته می کند. حتی زمانی که مرورگرها HTML شکسته را «تعمیر» می کنند، معمولاً می توان این مشکل را با Worker ما برطرف کرد. با کار در DevTools، برگه «Sources» دسترسی به منبع خام را فراهم می کند. از تنظیمات ترجیحی برای همیشه منبع "چاپ زیبا" استفاده کنید، که آن را قالب بندی می کند تا بتوانید کد را اسکن کنید تا به دنبال بهینه سازی بگردید. نکته ترجیحی دیگر تنظیمی برای دور زدن حافظه پنهان زمانی که DevTools باز است است. این گردش کار به شما کمک می کند تا بهینه سازی های شما منجر به خطاهای مرجع نشود.google

انتخابگرهای عنصر

وقتی چیزی را می بینید که می خواهید با HTMLRewriter() آن را برطرف کنید، باید تغییرات را محدود کنید و عنصر را جدا کنید تا از تغییر کد بیشتر از آنچه قصد دارید جلوگیری کنید. از انحصاری ترین انتخابگر ممکن استفاده کنید، که وقتی عناصر دارای شناسه های منحصر به فرد هستند، می تواند بسیار آسان باشد. در غیر این صورت، یک علامت مشخص مانند ارجاع به یک مکان منحصربه فرد در ویژگی های href یا src بیابید. شما می توانید از عبارات عام و حالت دستوری به سبک vim استفاده کنید که با مقادیر ویژگی مطابقت دارند. شما همچنین می توانید بیش از یک معیار را حتی با نام مشخصه یکسان ارائه دهید. از قدرت های vim خود برای محدود کردن موارد منطبق بر عناصر منفرد یا تطبیق گروهی از عناصر با عبارات گسترده تر استفاده کنید. سپس منطق می تواند نگرانی ها را بین تغییرات تفکیک کند. مثال تطبیق عناصر پیوند "fonts.g" برای حذف آن ها برای: fonts.googleapis.com..on(`link[rel="dns-prefetch"][href*="fonts .g"]`، removeEl())نمونه ای نشان می دهد که دو مورد مطابق با ویژگی href را نشان می دهد، و آن را یک فایل در میان بسیاری از فایل ها محدود می کند..on(link[href^="https:example.comstaticversion"] [href$="print.css"]، unblockCSS()) اولین مثال بالا از تطابق علامت عام استفاده می کند که در آن رشته "fonts.g" می تواند در هر جایی از ویژگی href عناصر پیوند ظاهر شود. این یک مثال برای یک تطابق گسترده است که ممکن است برای یک اقدام مناسب به بیش از یک عنصر پیوند متصل شود، مانند حذف عنصر(های) منطبق در صورت وجود. مثال دوم از بالا نشان می دهد که چگونه می توانید یک عنصر پیوند خاص را انتخاب کنید که شروع می شود. با یک رشته، و با یک رشته دیگر به پایان می رسد، اما می تواند هر چیزی بین آن باشد. این برای انتخاب یک عنصر منفرد که بخشی از یک سیستم ساخت است، مفید است که به موجب آن ممکن است یک دایرکتوری توکن نسخه سازی برای شکستن حافظه پنهان مرورگر وجود داشته باشد که به صورت پویا نامگذاری شده است.

عناصر پیوند

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

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

حذف عناصر

حذف عناصر بسیار ساده است. هنگامی که یک عنصر یا گروهی از آنها را انتخاب کردید، فیلد بعدی در دستورات HTMLRewriter().on() جایی است که یک بلوک اسکریپت را می نویسید. می توانید این کار را در جای خود با بریس های مجعد انجام دهید. می توانید به یک تابع با نام ارجاع دهید. یا می توانید یک نمونه کلاس جدید برای یک شی که قبلاً تعریف شده است بسازید، که در این زمینه، ممکن است بیش از حد مهندسی شود. وقتی با نمونه کد Worker مواجه می شوید ممکن است مقداردهی اولیه کلاس را ببینید. تنها چیزی که واقعاً برای حذف یک عنصر لازم است تابع زیر است. هر کاری که با یک شی کلاس نامگذاری شده انجام شود را می توان با یک تابع ساده (شیء) با استفاده از کد کمتر، برای اشکالات کمتر، با نحو خواناتر و آموزش پذیرتر انجام داد. هنگامی که به Durable Objects.element می پردازیم، سازنده های کلاس را دوباره بررسی می کنیم: (el) => { el.remove(); }به طور خلاصه، این بلوک یک متغیر "el" را با اشاره به نمونه عنصر تعریف می کند و بلوک کد متد عنصر داخلی remove() را فراخوانی می کند که جزئیات آن را در مستندات مربوطه خواهید یافت. تمام متدهای عنصر HTMLRewriter() برای استفاده با نمونه هایی از تطابق عناصر در دسترس شما هستند. حذف عناصر یکی از ساده ترین موارد برای درک است.

رفع انسداد منابع مسدود کننده رندر

رفع انسداد عناصر اسکریپت بسیار ساده تر از رفع انسداد منابع شیوه نامه است. به عنوان شانس، ما یک ویژگی بولی برای سیگنال دادن به مرورگر داریم که می خواهیم یک اسکریپت را به طور ناهمزمان بارگذاری کنیم یا آن را به طور کلی به تعویق بیندازیم (برای زمانی که زمان بیکاری وجود دارد). این ایده آل است! از سوی دیگر، Stylesheet ها برای رفع انسداد به کمی «هک» نیاز دارند آنها به جاوا اسکریپت درون خطی نیاز دارند. اساساً، ما برای رفع انسداد، مرجع عنصر پیوند شیوه نامه را به پیش بارگذاری تبدیل می کنیم. اما این ماهیت عنصر پیوند را به عنصری تغییر می دهد که در آن قوانین سبک اعمال نمی شود. منابع را از قبل بارگیری می کند تا آنها را در حافظه پنهان محلی ذخیره کند و در صورت نیاز آماده باشد، اما همین. DevTools به شما هشدار می دهد زمانی که منبعی از قبل بارگیری می شود و به درستی استفاده نمی شود - در آن زمان است که می دانید می توانید آن را حذف کنید! پیش بارگیری و سپس استفاده از یک ویژگی onload برای اجرای جاوا اسکریپت برای تغییر آن از پیش بارگذاری به شیوه نامه، "هک" CSS برای رفع انسداد است. یک منبع مسدود کننده طبیعی رندر است. استفاده از این کلمه کلیدی جاوا اسکریپت به شما امکان می دهد تا ویژگی های آن، از جمله ویژگی rel (و خود ویژگی onload) را تغییر دهید. این الگو برای جلسات غیر جاوا اسکریپت نیز یک backfill دارد. در اینجا تابع unblockCSS() ما است که استراتژی را با استفاده از روش های عنصر آماده پیاده سازی می کند.const unblockCSS = () => ({

عنصر: (el) => {

el.removeAttribute(media);

el.setAttribute(rel, preload);

el.setAttribute(as, style);

el.setAttribute(onload, "this.onload=null;this.rel=stylesheet;this.media=all");

el.after(`

`, { html: true }); }})؛ ارجاعات صفحه سبک عنصر پیوند را که رندر مسدود هستند انتخاب کنید و این تابع را روی آنها فراخوانی کنید. این به مرورگر اجازه می دهد تا با بارگذاری پیش بارگذاری صفحه سبک، بارگیری آن را آغاز کند. پس از بارگذاری، ویژگی rel به شیوه نامه باز می گردد و قوانین CSS بلافاصله اعمال می شوند. اگر مشکلات سبک پس از این تغییر رخ دهد، یک یا چند برگه باید به ترتیب درخواست معمولی بارگیری شوند. این تابع به عنوان یک بلوک کد قابل استفاده مجدد عمل می کند. انتخاب عناصر خود را با استفاده از HTMLRewriter() تغییر دهید و بسته به رویکردتان، تفاوت را آزمایش کنید و برگه های CSS را یکی یکی یا در گروه ها بررسی کنید. تا جایی که می توانید از این تاکتیک برای رسیدن به یک استراتژی کلی برای رفع انسداد استفاده کنید. با این حال، همیشه به خاطر داشته باشید که به دنبال مشکلات ناشی از تغییرات در منابع CSS و Script باشید.

اولویت های اسکریپت

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

درخواست ها نیز به خوبی فاصله می گیرند. در اینجا تابع ما تغییر می کند، یا اضافه می کنیم، async و defer features.const makeAsyncJS = () => ({

عنصر: (el) => {

el.removeAttribute("به تعویق انداختن");

el.setAttribute("async"، "async");

}

});const makeDeferJS = () => ({

عنصر: (el) => {

el.removeAttribute("async");

el.setAttribute("به تعویق انداختن"، "به تعویق انداختن");

}

})؛ اگر یک اسکریپت در ابتدا async یا defer نداشته باشد، اجرای متد عنصر removeAttribute() برای یک بلوک کد قابل استفاده مجدد بی ضرر است. اگر به سرعت بر روی پروژه ای تک تک مدی کار می کنید که ممکن است به جای فراخوانی تابعی که قبلاً در اسکریپت تعریف کرده اید، این را درون خطی بنویسید، می توانید با خیال راحت این موضوع را نادیده بگیرید.

ویژگی های Alt برای SEO

همانطور که گفته شد، راهنمای ما برای تاکتیک های AB Core Web Vitals، از نظر طراحی، برای ما این بود که یک بستر آزمایشی Edge Computing کاملاً کارآمد داشته باشیم و در حال اجرا باشیم تا محتوا را با SEO آینده برای مقالات توسعه دهندگان و رویدادهای آینده نشان دهیم. در طول رویداد SMX West در سال گذشته (2021)، استفاده از Cloudflare Workers را برای یک وب سایت نشان دادیم که به آتش بازی Lighthouse دست یافتیم (در تمام آزمایش های آن امتیاز 100 را به دست آوردیم). چیزهای زیادی وجود دارد که برای به دست آوردن آتش بازی باید وجود داشته باشد. یکی از جنبه های مهم این است که همه تصاویر باید دارای ویژگی های alt معتبر باشند. این آزمایش می تواند تشخیص دهد که متن موجود در ویژگی های alt، «غیر توصیفی» یا موجود، اما خالی است. شما به کلماتی نیاز دارید که آنچه را در تصویر مرتبط نشان می دهد. یکی از راه های انجام این کار ممکن است تجزیه نام فایل از ویژگی src باشد. در اینجا تابعی است که متن را از ویژگی های img src به متن جایگزین قدرت از نام فایل ها با خط تیره استخراج می کند. img_alt = element.getAttribute(alt);

const img_src = element.getAttribute(src);

اگر (!img_alt) {

element.setAttribute(alt, img_src.replace(-, ));

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

تست برای عملکرد بهتر و دید بیشتر

داشتن یک بستر آزمایشی برای آزمایش تاکتیک های مختلف Core Web Vitals Performance Optimization برای صاحبان سایت فوق العاده چشمگیر است. شما باید این قابلیت را در زرادخانه آژانس خود داشته باشید. افزایش جزئی رتبه بندی گوگل با امتیازهای خوب، برای اکثر ها از طریق تاکتیک هایی که در مورد آنها بحث و نشان خواهیم داد، قابل اندازه گیری و تا حد زیادی قابل دستیابی است. برای اجرای زنده از 8 تا 9 مارس هماهنگ شوید. تکنسین های سئو مدت هاست که بهبود عملکرد را برای رتبه بندی موتورهای جستجو توصیه می کنند. سود رتبه بندی هرگز واضح تر نبوده است. گوگل به معنای واقعی کلمه معیارها را تعریف کرده و در مورد تأثیر آنها منتشر می کند. همانطور که در اینجا با ویژگی های alt برای تصاویر نشان داده شده است، ما دارای Cloudflare Workers برای پیاده سازی راه حل های Edge SEO هستیم. بستر آزمایشی پروکسی معکوس ما به موجب Cloudflare زمینه را برای ارتباط غنی با توسعه دهندگان فراهم می کند.