លោក Seo

មុខងារសម្រាប់ Core Web Vitals Tactics ជាមួយ HTMLRewriter របស់ Cloudflare

មគ្គុទ្ទេសក៍របស់យើងចំពោះការធ្វើតេស្ត A/B សម្រាប់ Core Web Vitals បានពន្យល់ជាបន្តបន្ទាប់នូវជំហានតូចៗជាមួយនឹងសេវាកម្មពីរ និងផ្នែកបន្ថែមនៃកម្មវិធីរុករកតាមអ៊ីនធឺណិតដើម្បីសរសេរការធ្វើតេស្តសម្រាប់យុទ្ធសាស្ត្រកូដខាងមុខ។ សាមសិបឆ្នាំមុន យើងនឹងចម្លងប្រភពដើមរបស់ទំព័រមួយ ដើម្បីដំណើរការប្រតិបត្តិការស្វែងរក និងជំនួស រហូតទាល់តែយើងអាចគ្រប់គ្រងទូរសារនៃទំព័រដែលដាក់ក្នុងថតដែលបានបើកគេហទំព័រ ដើម្បីបង្ហាញពីប្រភេទអនុសាសន៍ដូចគ្នា។

យើង​មិន​ត្រូវ​ធ្វើ​ដូច្នេះ​ទៀត​ទេ។

ការដំឡើងប្រូកស៊ីបញ្ច្រាស និងការសរសេរកម្មវិធីសម្រាប់ដំណើរការ SEO កាលពី XNUMX ឆ្នាំមុនត្រូវបានកំណត់ចំពោះក្រុមហ៊ុនតូចមួយដែលបានសាងសង់ និងរៀបចំហេដ្ឋារចនាសម្ព័ន្ធដោយខ្លួនឯង។ ឥឡូវនេះ Cloudflare ផ្តល់ឱ្យយើងនូវដំណោះស្រាយ turnkey មួយ។ អ្នកអាចក្រោកឡើង និងដំណើរការដោយប្រើគណនីឥតគិតថ្លៃ។ ដើម្បីផ្លាស់ប្តូរលេខកូដខាងមុខ សូមប្រើ Cloudflare's HTMLRewriter() JavaScript API

កូដគឺងាយស្រួលយល់។

ជាមួយនឹង Core Web Vitals វាជាភាពបន្ទាន់ តម្រូវការដែលយល់ឃើញ និងភាពរហ័សរហួននៃការអាចឆ្លងកាត់ការធ្វើតេស្តផ្សេងៗគ្នា ដែលចុងក្រោយបង្ហាញពីតម្លៃ និងពិតជាគួរអោយចាប់អារម្មណ៍។ វេទិកាមូលដ្ឋានអាចរកបានសម្រាប់អ្នកតាមរយៈជំហានដែលបានរៀបរាប់នៅក្នុងការណែនាំរបស់យើង។ យើង​នឹង​សរសេរ​មុខងារ​សម្រាប់​ធ្វើ​ការ​ផ្លាស់​ប្តូរ​ទូទៅ ដូច្នេះ​អ្នក​អាច​ចាប់​ផ្តើម​សាកល្បង​យុទ្ធសាស្ត្រ​ពិត​ប្រាកដ​ភ្លាមៗ។

HTMLRewriter()

ប្រសិនបើអ្នកបានធ្វើតាម អ្នកអាចដឹងថាស្គ្រីបរបស់យើងផ្តល់ជម្រើសក្នុងការផ្ទុកធាតុជាមុនដែលអ្នកអាចបញ្ជាក់នៅក្នុងប៉ារ៉ាម៉ែត្រសំណើសម្រាប់ LCP ។ យើងត្រឡប់ទម្រង់បែបបទមួយនៅពេលដែលតម្លៃបាត់ គឺគ្រាន់តែដើម្បីធ្វើឱ្យវាងាយស្រួលក្នុងការបន្ថែមឯកសារយោងរបស់អ្នក។ វាក៏មានកន្លែងដាក់សម្រាប់អ្វីដែលគេហៅថា សារៈសំខាន់ដែលយើងនឹងដោះស្រាយផងដែរ។ អ្វីដែលសំខាន់គឺត្រូវយល់ពីអ្វីដែលយើងនឹងធ្វើ។

នេះ HTMLRewriter() API ផ្តល់ឱ្យយើងនូវសមត្ថភាពក្នុងការប្រើឧបករណ៍ជ្រើសរើសធាតុរចនាប័ទ្ម jQuery ដើម្បីភ្ជាប់ទៅធាតុ HTML នៅក្នុងប្រភពទំព័រដើមដើម្បីដំណើរការ JavaScript ពីមូលដ្ឋាននោះ។ អ្នកនឹងអាចកែប្រែធាតុ ក្រុមទាំងមូលនៃធាតុ ឬសូម្បីតែឯកសារមូលដ្ឋានតាមរបៀបដ៏មានឥទ្ធិពល។ ឧទាហរណ៍ អ្នកអាចកែសម្រួលចំណងជើងទំព័រ។ នៅក្នុងការផលិត ការកែសម្រួលរបស់អ្នក។ ក្លាយជា ចំណងជើង និងជាអ្វីដែលទទួលបានលិបិក្រមនៅ Google និង Bing ។

ភាពស្មុគស្មាញមួយដែលអ្នកនឹងជួបប្រទះគឺថាអ្នកអាចកែសម្រួលប្រភពឆៅប៉ុណ្ណោះ មិនមែនជាគំរូវត្ថុឯកសារដែលមានជាតិសំណើម (DOM) នោះទេ។ វិធីរហ័សមួយដើម្បីមើលប្រភពដើមគឺជាមួយនឹងមុខងារមើលប្រភពដែលភ្ជាប់មកជាមួយរបស់កម្មវិធីរុករក។ ជាឧទាហរណ៍ជាមួយ Firefox ការបង្ហាញប្រភពបង្ហាញកំហុសក្នុងសុពលភាពជាពណ៌ក្រហម។ សូម្បីតែនៅពេលដែលកម្មវិធីរុករក "ជួសជុល" ខូច HTML ជាធម្មតាវាអាចត្រូវបានជួសជុលជាមួយកម្មកររបស់យើង។

ធ្វើការនៅខាងក្នុង DevTools ផ្ទាំង "ប្រភព" ផ្តល់នូវការចូលប្រើប្រភពឆៅ។ ប្រើការកំណត់ចំណូលចិត្តដើម្បីតែងតែជាប្រភព "បោះពុម្ពស្អាត" ដែលនឹងធ្វើទ្រង់ទ្រាយវា ដូច្នេះអ្នកអាចស្កេនកូដដើម្បីរកមើលការបង្កើនប្រសិទ្ធភាព។ ព័ត៌មានជំនួយចំណូលចិត្តមួយផ្សេងទៀតគឺការកំណត់ដើម្បីរំលងឃ្លាំងសម្ងាត់នៅពេលដែល DevTools បើក។ លំហូរការងារនេះនឹងជួយអ្នកនៅពេលអ្នកទៅ ដូច្នេះការបង្កើនប្រសិទ្ធភាពរបស់អ្នកមិនបណ្តាលឱ្យមានកំហុសយោងទេ។

អ្នកជ្រើសរើសធាតុ

នៅពេលអ្នករកឃើញអ្វីមួយដែលអ្នកចង់ជួសជុល HTMLRewriter()អ្នកនឹងត្រូវបង្រួមការផ្លាស់ប្តូរ និងញែកធាតុដើម្បីជៀសវាងការផ្លាស់ប្តូរកូដច្រើនជាងអ្វីដែលអ្នកចង់បាន។ ប្រើឧបករណ៍ជ្រើសរើសផ្តាច់មុខបំផុតដែលអាចធ្វើទៅបាន ដែលអាចមានភាពងាយស្រួលនៅពេលដែលធាតុមានលេខសម្គាល់តែមួយគត់។ បើមិនដូច្នេះទេ ចូរស្វែងរកសញ្ញាប្រាប់ ដូចជាសេចក្តីយោងទៅកាន់ទីតាំងតែមួយគត់នៅក្នុង href or src គុណលក្ខណៈ។

អ្នកនឹងរកឃើញសមត្ថភាពក្នុងការប្រើតួអក្សរជំនួស និង "របៀបបញ្ជា" កន្សោមធម្មតារចនាប័ទ្ម vim ដែលត្រូវគ្នានឹងតម្លៃគុណលក្ខណៈ។ អ្នកក៏អាចផ្គត់ផ្គង់លក្ខណៈវិនិច្ឆ័យច្រើនជាងមួយ សូម្បីតែឈ្មោះលក្ខណៈដូចគ្នាក៏ដោយ។ ប្រើថាមពល vim របស់អ្នកដើម្បីបង្រួមការផ្គូផ្គងទៅជាធាតុតែមួយ ឬផ្គូផ្គងក្រុមនៃធាតុដែលមានកន្សោមទូលំទូលាយ។ បន្ទាប់មកតក្កវិជ្ជាអាចបំបែកកង្វល់រវាងការផ្លាស់ប្តូរ។

ឧទាហរណ៍ដែលផ្គូផ្គងតួអក្សរជំនួស “fonts.g” ទាញយកធាតុតំណជាមុន ដើម្បីលុបវាចេញសម្រាប់៖ fonts.googleapis.com។

.on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

ឧទាហរណ៍ដែលបង្ហាញពីការផ្គូផ្គងពីរសម្រាប់ href គុណលក្ខណៈ ដោយបង្រួមវាជាឯកសារតែមួយក្នុងចំណោមមនុស្សជាច្រើន។

.on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

ឧទាហរណ៍ទីមួយខាងលើប្រើការផ្គូផ្គងតួអក្សរជំនួសដែលខ្សែអក្សរ “fonts.g” អាចបង្ហាញនៅកន្លែងណាមួយនៅក្នុង href គុណលក្ខណៈនៃធាតុតំណ។ វាជាឧទាហរណ៍សម្រាប់ការផ្គូផ្គងទូលំទូលាយដែលអាចភ្ជាប់ទៅធាតុតំណច្រើនជាងមួយសម្រាប់សកម្មភាពសមស្រប ដូចជាការដកធាតុដែលត្រូវគ្នាចេញ ប្រសិនបើមាន។

ឧទាហរណ៍ទីពីរពីខាងលើបង្ហាញពីរបៀបដែលអ្នកអាចជ្រើសរើសធាតុតំណជាក់លាក់មួយដែលចាប់ផ្តើមដោយខ្សែអក្សរ ហើយបញ្ចប់ដោយខ្សែអក្សរផ្សេងទៀត ប៉ុន្តែអ្វីដែលអាចមានរវាង។ វាមានប្រយោជន៍សម្រាប់ការជ្រើសរើសធាតុតែមួយដែលជាផ្នែកនៃប្រព័ន្ធស្ថាបនា ដែលវាអាចមានថតចម្លងសញ្ញាសម្ងាត់សម្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលដាក់ឈ្មោះថាមវន្ត។

ធាតុភ្ជាប់

ធាតុតំណភ្ជាប់ត្រូវបានចម្រុះដោយគុណធម៌នៃគុណលក្ខណៈមួយចំនួនរបស់វា។ ដូច្នេះពួកគេអាចបម្រើគោលបំណងមួយចំនួន។ មិនត្រូវច្រឡំជាមួយតំណភ្ជាប់ (ដូចនៅក្នុងយុថ្កា) ធាតុតំណភ្ជាប់ជាធម្មតាជាកន្លែងដែលអ្នកចាប់ផ្តើមស្វែងរកយុទ្ធសាស្រ្តដំណើរការរហ័ស។ ធាតុតំណភ្ជាប់ជាមុន និងភ្ជាប់ជាមុនមួយចំនួន ប្រហែលជាកំពុងដំណើរការ ឬប្រហែលជាមិនចាំបាច់ទាំងស្រុង។

អ្នកទទួលបានម៉ាស៊ីនអតិបរមាចំនួនប្រាំមួយប៉ុណ្ណោះដើម្បីភ្ជាប់ក្នុងពេលដំណាលគ្នា។ យុទ្ធសាស្ត្រដំបូងរបស់អ្នកនឹងធ្វើឱ្យពួកគេទទួលបានច្រើនបំផុត។ ព្យាយាមដកសេចក្តីថ្លែងការនៃធាតុតំណជំនួយអាទិភាពទាំងអស់ចេញ ហើយសាកល្បងលទ្ធផល។ ប្រសិនបើពេលវេលាដើរខុសនោះ សូមបន្ថែមពួកវាម្ដងមួយៗ ហើយសាកល្បងផលប៉ះពាល់ពិតប្រាកដនៃនីមួយៗ។ អ្នកនឹងត្រូវរៀនពីរបៀបអានគំនូសតាងទឹកធ្លាក់ WebpageTest ស៊ីជម្រៅ។

បន្ទាប់ពីនេះ យុទ្ធសាស្ត្រចូលទៅកាន់ការផ្ទុកធនធាន ដែលពាក់ព័ន្ធនឹងធាតុតំណភ្ជាប់យ៉ាងធ្ងន់ធ្ងរផងដែរ ប៉ុន្តែមិនមែនទាំងស្រុងនោះទេ។ ត្រង់ចំណុចនេះ យើងចង់មើលស្គ្រីបផងដែរ។ លំដាប់ដែលការផ្ទុកធនធានអាចប៉ះពាល់ដល់អ្វីៗយ៉ាងអវិជ្ជមាន។ គ្រែសាកល្បងរបស់យើងគឺល្អឥតខ្ចោះសម្រាប់ការសាកល្បងយុទ្ធសាស្ត្រផ្សេងៗដែលប្រមូលបានពីការអានតារាងទឹកជ្រោះ។ ទុកថតកុងសូលរបស់ DevTools បើកដើម្បីពិនិត្យមើលកំហុសនៅពេលអ្នកធ្វើការ។

ការដកធាតុចេញ

ការដកធាតុចេញគឺសាមញ្ញណាស់ក្នុងការធ្វើ។ នៅពេលដែលអ្នកបានជ្រើសរើសធាតុមួយ ឬក្រុមនៃពួកវា វាលបន្ទាប់នៅក្នុង HTMLRewriter().on() statements គឺជាកន្លែងដែលអ្នកសរសេរប្លុកស្គ្រីប។ អ្នក​អាច​ធ្វើ​វា​នៅ​នឹង​កន្លែង​ដោយ​ប្រើ​ដង្កៀប​អង្កាញ់។ អ្នកអាចយោងមុខងារដែលមានឈ្មោះ។ ឬអ្នកអាចសាងសង់ថ្មី។ class ឧទាហរណ៍​សម្រាប់​វត្ថុ​ដែល​បាន​កំណត់​មុន ដែល​ក្នុង​បរិបទ​នេះ​អាច​នឹង​វិស្វកម្ម​លើស​ចំណុះ។

នៅពេលអ្នកជួបគំរូកូដ Worker អ្នកអាចមើលឃើញ class កម្មវិធីចាប់ផ្តើម។ អ្វី​ទាំងអស់​ដែល​ពិត​ជា​ត្រូវ​ការ​ដើម្បី​យក​ចេញ ហើយ​ធាតុ​គឺ​ជា​មុខងារ​ដូច​ខាង​ក្រោម។ អ្វីក៏ដោយដែលធ្វើដោយវត្ថុថ្នាក់ដែលមានឈ្មោះអាចត្រូវបានធ្វើដោយមុខងារធម្មតា (វត្ថុ) ដោយប្រើកូដតិច សម្រាប់កំហុសតិចជាង ជាមួយនឹងវាក្យសម្ព័ន្ធដែលអាចអានបានច្រើន និងអាចបង្រៀនបានច្រើន។ យើងនឹងពិនិត្យមើលឡើងវិញ class អ្នកសាងសង់នៅពេលយើងស្វែងយល់ពីវត្ថុរឹង។

element: (el) => { el.remove(); }

សរុបមក ប្លុកនេះកំណត់អថេរ "el" ដោយយោងទៅលើធាតុឧទាហរណ៍ ហើយប្លុកកូដហៅការភ្ជាប់មកជាមួយ។ remove() វិធីសាស្ត្រធាតុ ដែលអ្នកនឹងរកឃើញលម្អិតនៅក្នុងឯកសារដែលត្រូវគ្នា។ ទាំងអស់។ HTMLRewriter() វិធីសាស្ត្រធាតុមានសម្រាប់អ្នកសម្រាប់ប្រើជាមួយឧទាហរណ៍នៃការផ្គូផ្គងធាតុរបស់អ្នក។ ការដកធាតុចេញគឺជាផ្នែកមួយនៃអ្វីដែលសាមញ្ញជាងក្នុងការយល់។

ដោះ​ស្រាយ​ការ​ទប់ស្កាត់​ការ​បង្ហាញ​ការ​ទប់ស្កាត់​ធនធាន

មិនទប់ស្កាត់ script ធាតុគឺងាយស្រួលជាងការទប់ស្កាត់ធនធានសន្លឹករចនាប័ទ្ម។ ដូចដែលសំណាងនឹងមានវា យើងមានគុណលក្ខណៈប៊ូលីនសម្រាប់ផ្តល់សញ្ញាដល់កម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលយើងចង់ផ្ទុកស្គ្រីបអសមកាល ឬពន្យាពេលវាទាំងអស់គ្នា (សម្រាប់ពេលទំនេរ)។ នោះជាឧត្តមគតិ! ម៉្យាងវិញទៀត Stylesheets ត្រូវការ "hack" បន្តិច ដើម្បីអោយពួកវាមិនទប់ស្កាត់ — ពួកគេទាមទារ Javascript មួយចំនួននៅក្នុងជួរ។

ជាសំខាន់ យើងបង្វែរឯកសារយោងធាតុតំណរចនាប័ទ្មទៅជាការផ្ទុកជាមុន ដើម្បីឈប់ទប់ស្កាត់វា។ ប៉ុន្តែវាផ្លាស់ប្តូរលក្ខណៈនៃធាតុតំណទៅជាមួយដែលច្បាប់រចនាប័ទ្មនឹងមិនត្រូវបានអនុវត្ត។ ផ្ទុកធនធានទាញយកជាមុន ដើម្បីរក្សាទុកពួកវាក្នុងឃ្លាំងសម្ងាត់មូលដ្ឋាន រួចរាល់នៅពេលចាំបាច់ ប៉ុន្តែនោះជាវា។ DevTools ព្រមានអ្នកនៅពេលដែលធនធានមួយត្រូវបានផ្ទុកជាមុន និងមិនប្រើប្រាស់បានទាន់ពេលវេលា — នោះហើយជាពេលដែលអ្នកដឹងថាអ្នកអាចលុបវាចេញបាន!

កំពុងផ្ទុកជាមុន ហើយបន្ទាប់មកប្រើ onload គុណលក្ខណៈដើម្បីដំណើរការ JavaScript ដើម្បីផ្លាស់ប្តូរវាពីការផ្ទុកជាមុនទៅជាសន្លឹករចនាប័ទ្មគឺ CSS "ការលួច" ដើម្បីដោះការទប់ស្កាត់នូវអ្វីដែលជាធនធានរារាំងដោយធម្មជាតិ។ ការប្រើប្រាស់ JavaScript this ពាក្យគន្លឹះអនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរលក្ខណៈសម្បត្តិរបស់វា រួមទាំង rel គុណលក្ខណៈ (និង onload គុណលក្ខណៈខ្លួនឯង) ។ លំនាំមាន backfill សម្រាប់វគ្គដែលមិនមែនជា JavaScript ផងដែរ។

នេះជារបស់យើង។ unblockCSS() មុខងារដែលអនុវត្តយុទ្ធសាស្ត្រដោយប្រើវិធីសាស្ត្រធាតុដែលត្រៀមរួចជាស្រេច។

const unblockCSS = () => ({
element: (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 និងស្គ្រីប។

អាទិភាពស្គ្រីប

លំដាប់ដែលអ្នកផ្ទុករចនាប័ទ្មអាចធ្វើឱ្យខូចការរចនា។ ច្បាប់សន្លឹករចនាប័ទ្មផ្ទុកលឿនដោយមិននឹកស្មានដល់នឹងសរសេរជាន់ពីលើដែលផ្ទុកយឺតជាង។ អ្នកក៏ត្រូវមើលពេលកំពុងផ្ទុកស្គ្រីបតាមលំដាប់លំដោយ ដើម្បីឱ្យពួកគេទទួលបានការវាយតម្លៃ និងស្ថិតក្នុងសតិនៅពេលឯកសារត្រូវបានវាយតម្លៃ។ កំហុសយោងអាចធ្លាក់ដល់រាប់សិប ឬរាប់រយកំហុសស្គ្រីប។

មធ្យោបាយដ៏ល្អបំផុតដើម្បីពិនិត្យមើលបញ្ហាគឺមើលកុងសូលថត និងក្លែងធ្វើការតភ្ជាប់បណ្តាញយឺត។ នេះអាចបំផ្លើសបញ្ហារហូតដល់ចំណុចដែលពួកគេគួរតែបង្ហាញឱ្យឃើញនៅក្នុង DevTools ។ ប្រសិនបើធនធានស្គ្រីបត្រូវបានដំណើរការដោយប្រើស៊ីភីយូដែលមានថាមពលខ្លាំងជាង ហើយផ្ទុកលើសល្បឿនម៉ូដឹមខ្សែ ឬលឿនជាងនេះ វាអាចទៅរួច អ្នកនឹងខកខានកំហុសធ្ងន់ធ្ងរ។ សំណើ​ត្រូវ​បាន​ដក​ឃ្លា​ចេញ​យ៉ាង​ល្អ​ផង​ដែរ។

នេះគឺជាមុខងាររបស់យើងដែលផ្លាស់ប្តូរ ឬការបន្ថែម async និង defer attributes។

const makeAsyncJS = () => ({
element: (el) => {
el.removeAttribute("defer");
el.setAttribute("async", "async");
}
});

const makeDeferJS = () => ({
element: (el) => {
el.removeAttribute("async");
el.setAttribute("defer", "defer");
}
});

ប្រសិនបើស្គ្រីបដំបូងមិនមានអសមកាល ឬពន្យារទេ វាមិនបង្កគ្រោះថ្នាក់អ្វីទេក្នុងការដំណើរការ removeAttribute() វិធីសាស្ត្រធាតុសម្រាប់ប្លុកកូដដែលអាចប្រើឡើងវិញបានកាន់តែច្រើន។ អ្នកអាចមិនអើពើនឹងរឿងនេះដោយសុវត្ថិភាព ប្រសិនបើអ្នកកំពុងធ្វើការយ៉ាងលឿនលើគម្រោងមួយ ដែលអ្នកអាចនឹងកំពុងសរសេរនៅក្នុងបន្ទាត់នេះជាជាងហៅមុខងារដែលអ្នកបានកំណត់ពីមុននៅក្នុងស្គ្រីប។

គុណលក្ខណៈ Alt សម្រាប់ SEO

ដូចដែលបានរៀបរាប់រួចមក ការណែនាំរបស់យើងចំពោះយុទ្ធសាស្ត្រ A/B Core Web Vitals គឺតាមការរចនា មានន័យថាយើងត្រូវតែធ្វើការសាកល្បង Edge Computing ដែលមានមុខងារពេញលេញ និងដំណើរការដើម្បីបង្ហាញខ្លឹមសារជាមួយនឹង SEO នាពេលអនាគតសម្រាប់អ្នកអភិវឌ្ឍន៍អត្ថបទ និងព្រឹត្តិការណ៍នាពេលអនាគត។ ក្នុងអំឡុងពេលព្រឹត្តិការណ៍ SMX West របស់យើងកាលពីឆ្នាំមុន (2021) យើងបានបង្ហាញការប្រើប្រាស់ Cloudflare Workers សម្រាប់គេហទំព័រមួយ ដោយសម្រេចបានកាំជ្រួច Lighthouse (ពិន្ទុ 100 លើការធ្វើតេស្តទាំងអស់របស់វា)។

មាន​រឿង​ជា​ច្រើន​ដែល​ត្រូវ​រៀបចំ​ដើម្បី​ទទួល​បាន​កាំជ្រួច។ ទិដ្ឋភាពសំខាន់មួយគឺថារូបភាពទាំងអស់ត្រូវតែមានសុពលភាព alt គុណលក្ខណៈ។ ការធ្វើតេស្តអាចរកឃើញនៅពេលដែលអត្ថបទចូល alt គុណលក្ខណៈគឺ "មិនពិពណ៌នា" ឬមានវត្តមាន ប៉ុន្តែទទេ។ អ្នក​ត្រូវ​ការ​ពាក្យ​ដែល​ពណ៌នា​អំពី​អ្វី​ដែល​មាន​នៅ​ក្នុង​រូបភាព​ដែល​ទាក់ទង។ វិធី​មួយ​ដើម្បី​ធ្វើ​វា​ប្រហែល​ជា​ញែក​ឈ្មោះ​ឯកសារ​ពី src គុណលក្ខណៈ។

នេះគឺជាមុខងារដែលស្រង់អត្ថបទពី img src គុណលក្ខណៈអំណាច alt អត្ថបទពីឈ្មោះឯកសារដែលមានសហសញ្ញា។

const img_alt = element.getAttribute('alt');
const img_src = element.getAttribute('src');
if (!img_alt) {
element.setAttribute('alt', img_src.replace('-', ' '));
}

សរុបមក វានឹងស្វែងរកលក្ខខណ្ឌនៅលើរូបភាពដែលមិនមាន alt តម្លៃគុណលក្ខណៈ។ នៅពេលដែលមានលទ្ធភាពរបស់វា។ src ឈ្មោះឯកសារគុណលក្ខណៈត្រូវបានដាក់សហសញ្ញា វានឹងជំនួសសហសញ្ញាដោយដកឃ្លា ដើម្បីបង្កើតអ្វីដែលអាចជាតម្លៃសមរម្យ។ កំណែនេះនឹងមិនដំណើរការសម្រាប់ករណីភាគច្រើនទេ។ វាមិនជំនួសសញ្ញាចុចខាងមុខ ឬពិធីការ និងដែនទេ។ នេះគ្រាន់តែជាចំណុចចាប់ផ្តើមប៉ុណ្ណោះ។

ហេតុអ្វីយើងយកចិត្តទុកដាក់

ការមានការធ្វើតេស្តសាកល្បងសម្រាប់ការសាកល្បងប្រើវិធីសាស្ត្របង្កើនប្រសិទ្ធភាពការងារ Core Web Vitals ជាច្រើនគឺគួរឱ្យចាប់អារម្មណ៍មិនគួរឱ្យជឿចំពោះម្ចាស់គេហទំព័រ។ អ្នកគួរតែមានសមត្ថភាពនេះនៅក្នុងឃ្លាំងភ្នាក់ងាររបស់អ្នក។ ការបង្កើនចំណាត់ថ្នាក់របស់ Google បន្តិចជាមួយនឹងពិន្ទុល្អគឺអាចវាស់វែងបាន និងអាចសម្រេចបានយ៉ាងទូលំទូលាយសម្រាប់គេហទំព័រភាគច្រើន តាមរយៈយុទ្ធសាស្ត្រដែលយើងនឹងពិភាក្សា និងបង្ហាញ។ ទស្សនាការផ្សាយបន្តផ្ទាល់នៅថ្ងៃទី 8-9 ខែមីនា។

អ្នកបច្ចេកទេស SEO បានផ្តល់អនុសាសន៍ជាយូរយារណាស់មកហើយនូវការកែលម្អការអនុវត្តសម្រាប់ចំណាត់ថ្នាក់ម៉ាស៊ីនស្វែងរក។ អត្ថប្រយោជន៍ចំពោះចំណាត់ថ្នាក់មិនដែលច្បាស់ជាងនេះទេ។ Google បានកំណត់និយមន័យនៃម៉ែត្រ និងបោះពុម្ពអំពីឥទ្ធិពលរបស់វា។ យើងមានបុគ្គលិក Cloudflare ដើម្បីអនុវត្តដំណោះស្រាយ Edge SEO ដូចដែលបានបង្ហាញនៅទីនេះជាមួយ alt គុណលក្ខណៈសម្រាប់រូបភាព។ ប្រូកស៊ីបញ្ច្រាសរបស់យើងត្រូវបានសាកល្បងដោយគុណធម៌នៃ Cloudflare កំណត់ដំណាក់កាលសម្រាប់ការទំនាក់ទំនងសម្បូរបែបជាមួយអ្នកអភិវឌ្ឍន៍។

អត្ថបទ​ដែល​ទាក់ទង

សូមផ្ដល់យោបល់

អាស័យដ្ឋានអ៊ីមែលរបស់អ្នកនឹងមិនដាក់បង្ហាញជាសាធារណះ។

ត្រលប់ទៅកំពូល