ការបង្កើនPageSpeed — រៀនធ្វើឱ្យគេហទំព័ររបស់អ្នកឆាប់ឡើងនៅឆ្នាំ2026
ហេតុអ្វីបានជា ល្បឿនជាប្រាក់កូដនៃការកំណត់
Google បានបញ្ជាក់ថាល្បឿនគេហទំព័រ មានឥលូវទៅលើការកំណត់។ គេហទំព័រ យឺតឈឺចាប់អ្នកប្រើ និង Google ចង់ផ្តល់នូវបទពិសោធន៍ល្អប្រសើរ។ ទិន្នន័យពី Google បង្ហាញថា ការព្យាករណ៍នៃការចាកចតពីអ្នកប្រើកើនឡើង 32% នៅពេលពេលបង្ហូរពី 1 ទៅ 3 វិនាទី។
ប៉ុន្តែវាមិនមែនទាំងអស់អំពីការកំណត់ទេ។ ល្បឿនមានឥលូវទៅលើចំនួនលបវ័យរបស់អ្នកយ៉ាងត្រង់៖
- ការបម្លែង — ពេលវេលាបន្ថែមមួយវិនាទីនៃការបង្ហូរកាត់បន្ថយការបម្លែងចុះទៅ 7%
- អត្រាស្លាប់ — 53% នៃអ្នកប្រើទូរស័ព្ទចេញពីគេហទំព័រដែលយឺតលើស 3 វិនាទីក្នុងការលើក
- បទពិសោធន៍អ្នកប្រើ — គេហទំព័រដែលឆាប់មានអារម្មណ៍ជាជំនាញ និងគួរសព្វ
Core Web Vitals — ធាតុការវាស់ល្បឿនរបស់ Google
Google វាស់ល្បឿនតាមរយៈ៣ Core Web Vitals៖
LCP — Largest Contentful Paint
វាស់ពេលដែលធាតុដែលឆាប់កំណត់ដែលធ្លាប់មើលឃើញ (ច្រើនដូចជារូបភាពឬក្បាលកម្រិត) បានបញ្ចប់ការលើក។
- ល្អ: ទាបជា 2.5 វិនាទី
- ត្រូវការការកែលំអេន: 2.5 — 4.0 វិនាទី
- អាក្រក់: លើសពី 4.0 វិនាទី
INP — Interaction to Next Paint
វាស្រាវជ្រាវពីរយៈពេលដែលគេហទំព័រឆាប់ឆ្លើយតបនៅពេលអ្នកប្រើប្រើប្រាស់ (ចុច, គូស, ខ្វះបូក)។
- ល្អ: ទាបជាង 200ms
- ត្រូវការការកែលំអេន: 200 — 500ms
- អាក្រក់: លើសពី 500ms
CLS — Cumulative Layout Shift
វាស់ពីមខឌាផ្លាស់ទីរបស់ផែនការនៅពេលផ្ទុក។ អ្នកដឹងអារម្មណ៍នោះ — អ្នកចង់ចុចអ្វីមួយ ប៉ុន្តែឥតនារី ឡើងរូបភាព ហើយអ្នកចុចអ្វីផ្សេង។
- ល្អ: ទាបជាង 0.1
- ត្រូវការការកែលំអេន: 0.1 — 0.25
- អាក្រក់: លើសពី 0.25
10 គន្លឹះកែលម្អដែលច្បាស់
1. បង្កើនរូបភាព
រូបភាពជាទូទៅគឺជាអ្វីដែលធ្វើឱ្យផលប៉ះពាល់។ ប្រើទ្រង់ទ្រាយសមរម្យដូចជា WebP ឬ AVIF ដែលអាចកាត់បន្ថយទំហំឯកសារដោយ 30-50% ដោយមិនកាត់បន្ថយគុណភាពដែលមើលឃើញ។
- ភ្ជាប់ទាំងអស់រូបភាពមុនកំពុងធ្វើការបង្ហោះ
- ប្រើ
loading="lazy"លើរូបភាពដែលមិនបានមើលឃើញនៅពេលតម្លើងដំបូង - តែងតែមួយ
widthនិងheightដើម្បីបញ្ឈប់ CLS - ប្រើរូបភាពឆ្លាតជាមួយ
srcsetសម្រាប់ទំហំអេក្រង់ផ្សេងៗ
2. Minify CSS និង JavaScript
លុបកូដធ្វើការប្រើប្រាស់, ទំហំសម្លាប់និងមតិយោបល់ពីឯកសារផលិត CSS និង JS របស់អ្នក។ ឧបករណ៍ផ្គុំច្រើនធ្វើអោយវាលែងកើតមានដោយស្វ័យប្រវត្តិ ប៉ុន្តែបញ្ជាក់ថាវាប្រសើនក្នុងការផលិត។
3. ប្រើកុងត្រាប្រើប្រាស់
ធានាថាសេវាកម្មរបស់អ្នកគឺផ្ញើឯកសារជាមួយ Gzip ឬ Brotli ។ នេះអាចកាត់បន្ថយទំហំឯកសារដោយ 70%។
4. ប្រើក caching កម្មវិធីទស្សនា
កំណត់ក្បាល Cache-Control ដូច្នេះកម្មវិធីទស្សនានៅពេលអ្នករក្សាទុកឯកសារស្ថិតិក្នុងកន្លែង។ ការទៅកាន់ពេលណា ការរចនាគេហទំព័រដែលមិនមានការផ្ទុកឡើងវិញ។
5. កាត់បន្ថយពេលវេលាតំរូងបដិសេធលើ
ពេលវេលាតំរូងបដិសេធរបស់អ្នក (ពេលវេលាទីតាំង, TTFB) គួរតែទាបជាង 200ms។ សាលដោះសោ៖
- ប្រើអ្នកផ្គត់ផ្គង់គេហទំព័រដែលឆាប់
- បើកការប្រាក់បញ្ហាលើម៉ាស៊ីនដោះសោ
- បង្កើនការផ្ទុកទិនន័យ
- ប្រើ CDN ដើម្បីផ្ញើឯកសារស្ថិតិក្រោមពីម៉ាស៊ីនហ៊ុនដែលនៅជិតអ្នកប្រើ
6. បញ្ឈប់JavaScript ដែលមិនសំខាន់
JavaScript ដែលមិនចាំបាច់សម្រាប់ការមើលដំបូងគួរតែផ្ទុកដោយឆ្លាតដោយ async ឬ defer។ នេះអាចរួមបញ្ចូលការវាយតម្លៃ, វីជិដ័រ និងការតភ្ជាប់បណ្តាញសង្គម។
7. Preload ធាតុសំខាន់ៗ
ប្រើ សម្រាប់អក្សរ, CSS និងរូបភាពដែលត្រូវការសម្រាប់ការមើលដំបូង។ នេះបញ្ជាក់ថាអ្នក ប្រើ Internet ប្រើឯកសារអំឡុងការបង្ហាញ។
8. លុបការទូទៅដែលរាំងស្ដាប់រូប
CSS និង JavaScript ក្នុង រាំងការបង្ហាញសម្រាប់គេហទំព័រ។ អ្នកអាចផ្លាស់ទី CSS ដែលមិនសំខាន់ទៅក្រោម ហើយចែកចាយ CSS ដែលត្រូវការសំរាប់ការមើលដំបូង (critical CSS)។
9. ប្រើ CDN
បណ្តាញការផ្គត់ផ្គង់មាតិកាបង្ហោះឯកសាររបស់អ្នកនៅលើម៉ាស៊ីនគោល។ អ្នកប្រើបញ្ចេញពីម៉ាស៊ីនដែលនៅជិតបណ្តាញអាចយើងខ្ញុំ កាត់បន្ថយកម្រិត។
10. បង្កើនអក្សរសំខាន់
អក្សរសំខាន់អាចធ្វើឱ្យការបង្ហាញអត្ថបទយឺត៖
- ប្រើ
font-display: swapដូច្នេះអត្ថបទបង្ហាញជាមួយអក្សរ fallback នៅពេលអក្សរសំខាន់នឹងលើក - កាត់លក្ខណៈអក្សររបស់អ្នកដើម្បីធ្វើអោយថ្លែងជាមានអក្សរ
- Preload អក្សរសំខាន់
- វិនិយោគក្នុងអក្សរពត៌មានសម្រាប់អត្ថបទរាងកាយ
របៀបសាកល្បងល្បឿនរបស់អ្នក
Google PageSpeed Insights
ឧបករណ៍ផ្លូវការពី Google។ ផ្តល់ឱ្យអ្នកទាំងទិន្នន័យសិស្ស (បានស៊ើបអង្កេត) និងទិន្នន័យទីផ្សារ (អ្នកប្រើប្រាស់ពិត) ជាមួយសំណួរស្អាត។
Chrome DevTools
បើក DevTools (F12), ទៅកាន់ផ្ទាំង "Performance" និងកត់ត្រាវិធីផ្ទុកក страницы ។ អ្នកអាចមើលឃើញជាក់លាក់ពីអ្វីដែលយឺតនិងកម្មវិធីឡើងក្នុងប្រកបការបូក។
WebPageTest
ឧបករណ៍សាកល្បងកម្រិតដែលអនុញ្ញាតឱ្យអ្នកសាកល្បងពីទីតាំងនិងសេវាកម្មដែលផ្សេងគ្នា។ ផ្តល់ស៊ុមសម្តែងផ្ទាល់ដោយលម្អិត។
ការបង្ហោះ — ចាប់ផ្ដើមតាមនេះ
ប្រសិនបើអ្នកត្រូវការជ្រើសរើសបីកន្លែងដើម្បីផ្តោតលើ៖
- រូបភាព — ចុះបណ្តោះអោយនិងបម្លែងទៅជា WebP។ ប៉ះពាល់ធំបំពេញលើការងារ។
- Caching — កំណត់ក្បាល Cache-Control ឲ្យត្រឹមត្រូវ។ ការកំណត់នៅពេលមួយ។
- JavaScript — បញ្ឈប់អ្វីៗដែលមិនខិតខម។ កាត់បន្ថយស្គ្រីបដែលមិនសមរម្យ។
ចង់ដឹងថាគេហទំព័ររបស់អ្នកដង្ហែខ្លឹមសារ ដូចម្ដេចដែល? ធ្វើការត្រួតពិនិត្យដោយឥតគិតថ្លៃ ហើយមើល Core Web Vitals និងចំនួនល្បឿនរបស់អ្នក។