إضافة عداد سرعة الصفحة PageSpeed Viewer داخل المدونة

إضافة عداد سرعة الصفحة PageSpeed Viewer داخل المدونة

إضافة عداد سرعة الصفحة PageSpeed Viewer داخل المدونة

فهرس المحتويات

• ما هو عداد سرعة الصفحة PageSpeed Viewer؟
• أهمية إضافة عداد سرعة الصفحة للمدونة
• مميزات عداد سرعة الصفحة PageSpeed Viewer
• خطوات إضافة عداد سرعة الصفحة للمدونة
• تخصيص شكل عداد سرعة الصفحة
• أفضل الممارسات لتحسين سرعة الموقع
• أدوات SEO المقترحة لتحليل سرعة الموقع
• خاتمة

ما هو عداد سرعة الصفحة PageSpeed Viewer؟

عداد سرعة الصفحة PageSpeed Viewer هو أداة بصرية تعرض سرعة تحميل صفحتك للزوار، وتقيس أداء موقعك في الوقت الفعلي. هذه الأداة لا تقتصر على عرض سرعة التحميل فحسب، بل توفر بيانات مفصلة حول جوانب مختلفة من أداء الصفحة مثل:

• وقت استجابة الخادم
• وقت عرض أول محتوى مرئي (FCP)
• أكبر عرض للمحتوى المرئي (LCP)
• مؤشر الاستقرار البصري (CLS)
• أول تأخير في الإدخال (FID)

هذه المقاييس هي جزء من مؤشرات أداء الويب الأساسية (Core Web Vitals) التي تعتبرها جوجل من العوامل المهمة في ترتيب المواقع.

مؤشرات أداء الويب الأساسية (Core Web Vitals) هي مجموعة من المقاييس التي تستخدمها جوجل لتقييم تجربة المستخدم في الصفحات. تشمل هذه المقاييس سرعة التحميل، التفاعلية، والاستقرار البصري للصفحة.

أهمية إضافة عداد سرعة الصفحة للمدونة

تعتبر سرعة تحميل الصفحة من العوامل الحاسمة التي تؤثر على تجربة المستخدم وترتيب الموقع في محركات البحث. إليك بعض الأسباب التي تجعل إضافة عداد سرعة الصفحة أمراً ضرورياً:

• تحسين تجربة المستخدم: الزوار يفضلون المواقع السريعة، وعرض سرعة الصفحة يعزز شفافيتك ويبني ثقة الزوار.
• تحسين ترتيب محركات البحث: جوجل تعطي أولوية للمواقع السريعة في نتائج البحث.
• زيادة معدل التحويل: المواقع السريعة لها معدل تحويل أعلى بنسبة تصل إلى 7% مقارنة بالمواقع البطيئة.
• تقليل معدل الارتداد: الصفحات السريعة تحافظ على الزوار لفترة أطول وتقلل من معدل الارتداد.

تأثير سرعة الموقع على معدل التحويل

1-2 ثانية

3%

2-3 ثانية

5%

3-4 ثانية

7%

4+ ثانية

10%

مصدر: Akamai Research

مميزات عداد سرعة الصفحة PageSpeed Viewer

يتميز عداد سرعة الصفحة PageSpeed Viewer بالعديد من المزايا التي تجعله إضافة ضرورية لأي مدونة:

عرض فوري

يعرض سرعة الصفحة بشكل فوري وواضح للزوار.

تصميم متجاوب

يعمل بشكل مثالي على جميع الأجهزة والشاشات.

تخصيص سهل

يمكن تخصيص شكل ومكان العداد بسهولة.

خفيف الوزن

لا يؤثر على سرعة تحميل الموقع بشكل ملحوظ.

للحصول على أفضل النتائج، ضع عداد سرعة الصفحة في مكان بارز ولكن غير مزعج، مثل رأس الصفحة أو الشريط الجانبي. تجنب وضعه في مناطق قد تسبب إزعاجاً للزوار أو تؤثر على تجربة التصفح.

خطوات إضافة عداد سرعة الصفحة للمدونة

لإضافة عداد سرعة الصفحة PageSpeed Viewer إلى مدونتك بلوجر، اتبع الخطوات التالية بدقة:

1

الدخول إلى لوحة تحكم بلوجر

سجل الدخول إلى حسابك في بلوجر ثم اذهب إلى لوحة التحكم.

2

اختيار المظهر

من القائمة الجانبية، اختر "المظهر" ثم انقر على "تعديل HTML".

3

البحث عن الوسم المناسب

ابحث عن الوسم

باستخدام Ctrl+F.

4

إضافة الكود

ألصق كود PageSpeed Viewer التالي قبل الوسم

مباشرة:

5

حفظ التغييرات

انقر على أيقونة الحفظ واخرج من محرر HTML.

<!-- PageSpeed Viewer -->
<script type='text/javascript'>
//<![CDATA[
(function() {
    var pageSpeed = document.createElement('div');
    pageSpeed.id = 'pageSpeed';
    pageSpeed.style.position = 'fixed';
    pageSpeed.style.bottom = '20px';
    pageSpeed.style.left = '20px';
    pageSpeed.style.backgroundColor = 'rgba(30, 136, 229, 0.9)';
    pageSpeed.style.color = 'white';
    pageSpeed.style.padding = '8px 15px';
    pageSpeed.style.borderRadius = '20px';
    pageSpeed.style.fontSize = '14px';
    pageSpeed.style.fontWeight = 'bold';
    pageSpeed.style.zIndex = '9999';
    pageSpeed.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.2)';
    pageSpeed.style.cursor = 'pointer';
    pageSpeed.style.transition = 'all 0.3s ease';
    pageSpeed.innerHTML = 'جاري قياس سرعة الصفحة...';
    
    document.body.appendChild(pageSpeed);
    
    window.addEventListener('load', function() {
        var loadTime = window.performance.timing;
        var responseTime = loadTime.responseEnd - loadTime.requestStart;
        var domLoadTime = loadTime.domContentLoadedEventEnd - loadTime.navigationStart;
        var pageLoadTime = loadTime.loadEventEnd - loadTime.navigationStart;
        
        var speedScore = 100;
        if (pageLoadTime > 3000) speedScore = 50;
        else if (pageLoadTime > 2000) speedScore = 70;
        else if (pageLoadTime > 1000) speedScore = 85;
        
        var speedColor = speedScore > 80 ? '#4CAF50' : speedScore > 60 ? '#FFC107' : '#F44336';
        pageSpeed.style.backgroundColor = speedColor;
        
        pageSpeed.innerHTML = 'سرعة الصفحة: ' + speedScore + '/100';
        
        pageSpeed.addEventListener('click', function() {
            var details = document.createElement('div');
            details.style.position = 'fixed';
            details.style.bottom = '60px';
            details.style.left = '20px';
            details.style.backgroundColor = 'white';
            details.style.color = '#333';
            details.style.padding = '15px';
            details.style.borderRadius = '5px';
            details.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.2)';
            details.style.zIndex = '9999';
            details.style.fontSize = '13px';
            details.style.maxWidth = '300px';
            details.style.direction = 'rtl';
            details.innerHTML = '<h3 style="margin-top: 0; color: #1e88e5;">تفاصيل سرعة الصفحة</h3>' +
                '<p>وقت الاستجابة: ' + responseTime + ' مللي ثانية</p>' +
                '<p>وقت تحميل DOM: ' + domLoadTime + ' مللي ثانية</p>' +
                '<p>وقت تحميل الصفحة الكامل: ' + pageLoadTime + ' مللي ثانية</p>' +
                '<p>تقييم الأداء: ' + speedScore + '/100</p>' +
                '<button id="closeSpeedDetails" style="margin-top: 10px; padding: 5px 10px; background: #1e88e5; color: white; border: none; border-radius: 3px; cursor: pointer;">إغلاق</button>';
            
            document.body.appendChild(details);
            
            document.getElementById('closeSpeedDetails').addEventListener('click', function() {
                document.body.removeChild(details);
            });
        });
        
        pageSpeed.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
        });
        
        pageSpeed.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
})();
//]]>
</script>

قبل إجراء أي تغييرات على قالب مدونتك، قم دائماً بأخذ نسخة احتياطية من القالب الحالي. هذا يضمن أنه يمكنك استعادته في حال حدوث أي مشكلة.

تخصيص شكل عداد سرعة الصفحة

يمكنك تخصيص شكل ومكان عداد سرعة الصفحة ليتناسب مع تصميم مدونتك. إليك بعض التعديلات التي يمكنك إجراؤها على الكود:

تغيير الموقع

لتغيير موقع العداد، قم بتعديل قيم bottom و left في الكود:

/* لوضع العداد في أعلى اليمين */
pageSpeed.style.top = '20px';
pageSpeed.style.right = '20px';
pageSpeed.style.bottom = 'auto';
pageSpeed.style.left = 'auto';

تغيير الألوان

لتغيير لون العداد، قم بتعديل قيمة backgroundColor في الكود:

/* لتغيير اللون إلى الأخضر */
pageSpeed.style.backgroundColor = 'rgba(76, 175, 80, 0.9)';

تغيير الشكل

يمكنك تغيير شكل العداد عن طريق تعديل قيم borderRadius و padding:

/* لجعل العداد مربع الشكل */
pageSpeed.style.borderRadius = '5px';
pageSpeed.style.padding = '10px 20px';

للحصول على أفضل تجربة للمستخدم، حاول أن يكون لون العداد متناسقاً مع ألوان مدونتك، وضعه في مكان لا يعيق محتوى الصفحة ولا يسبب إزعاجاً للزوار.

أفضل الممارسات لتحسين سرعة الموقع

بعد إضافة عداد سرعة الصفحة، قد تحتاج إلى تحسين سرعة موقعك. إليك بعض أفضل الممارسات التي يمكنك اتباعها:

تحسين الصور

• ضغط الصور دون فقدان الجودة باستخدام أدوات مثل TinyPNG.
• استخدام تنسيقات الصور الحديثة مثل WebP.
• تحديد أبعاد الصور لتجنب تغيير التخطيط أثناء التحميل.
• تحميل الصور الكسولة (Lazy Loading) للصور التي تظهر خارج الشاشة.

تحسين CSS و JavaScript

• تصغير وضغط ملفات CSS و JavaScript.
• دمج الملفات لتقليل عدد الطلبات.
• تحميل ملفات JavaScript غير الحرجة بشكل غير متزامن.
• وضع CSS الحرج في رأس الصفحة و JavaScript في نهايتها.

تحسين الخادم والاستضافة

• استخدام استضافة سريعة وموثوقة.
• تفعيل التخزين المؤقت (Caching).
• استخدام شبكة توصيل المحتوى (CDN).
• تفعيل الضغط (Gzip) على الخادم.

تحسين قوالب بلوجر

• استخدام قوالب بلوجر محسّنة للسرعة.
• إزالة الأكواد والإضافات غير الضرورية.
• تحديد عدد المشاركات المعروضة في الصفحة الرئيسية.
• استخدام الصور المصغرة بحجم مناسب.

التقنية	التأثير على السرعة	صعوبة التطبيق
ضغط الصور	عالي	سهل
تفعيل التخزين المؤقت	عالي	متوسط
استخدام CDN	متوسط	متوسط
تصغير CSS/JS	متوسط	صعب
تحسين الخادم	عالي	صعب

أدوات SEO المقترحة لتحليل سرعة الموقع

لتحليل ومراقبة سرعة موقعك بشكل مستمر، يمكنك استخدام الأدوات التالية:

أدوات جوجل

• Google PageSpeed Insights: أداة مجانية من جوجل لتحليل سرعة الصفحة وتقديم توصيات محددة للتحسين.
• Google Search Console: يوفر بيانات حول أداء موقعك في نتائج البحث ومؤشرات أداء الويب الأساسية.
• Google Lighthouse: أداة متكاملة لتحليل جودة الصفحة بما في ذلك الأداء وإمكانية الوصول وممارسات الويب.

أدوات خارجية

GTmetrix

Pingdom

WebPageTest

Chrome DevTools

قم بتحليل سرعة موقعك بانتظام، خاصة بعد إضافة أي محتوى جديد أو تعديلات على القالب. سجل نتائج التحليل لتتبع التقدم وتحديد المشاكل المتكررة.

خاتمة

في هذا المقال، تعرفنا على كيفية إضافة عداد سرعة الصفحة PageSpeed Viewer إلى مدونتك بلوجر، وأهمية هذه الأداة في تحسين تجربة المستخدم وترتيب الموقع في محركات البحث. كما استعرضنا أفضل الممارسات لتحسين سرعة الموقع والأدوات التي يمكن استخدامها لتحليل ومراقبة الأداء.

تذكر أن سرعة الموقع هي عامل حاسم في نجاح أي مدونة أو موقع على الإنترنت. من خلال إضافة عداد سرعة الصفحة واتباع أفضل الممارسات لتحسين الأداء، يمكنك توفير تجربة أفضل لزوارك وتحسين ترتيب موقعك في محركات البحث.

مقالات ذات صلة

• كيفية تحسين قوالب بلوجر للسرعة
• أفضل أدوات تحليل SEO لموقعك
• دليل شامل لتحسين تجربة المستخدم
• كيفية زيادة سرعة تحميل المدونة

أسئلة شائعة

ما هو عداد سرعة الصفحة PageSpeed Viewer؟

عداد سرعة الصفحة PageSpeed Viewer هو أداة تعرض سرعة تحميل صفحتك للزوار، مما يساعد في تحسين تجربة المستخدم وتحسين ترتيب الموقع في محركات البحث.

هل يؤثر عداد سرعة الصفحة على أداء المدونة؟

عندما يتم تثبيته بشكل صحيح، يكون تأثيره ضئيلاً جدًا على أداء المدونة، بينما الفوائد التي يقدمها تفوق هذا التأثير البسيط.

هل يمكن تخصيص شكل عداد سرعة الصفحة؟

نعم، يمكن تخصيص شكل عداد سرعة الصفحة ليتناسب مع تصميم مدونتك من خلال تعديل كود CSS الخاص به.

"سرعة الموقع ليست مجرد عامل تقني، بل هي جزء أساسي من تجربة المستخدم. المواقع السريعة تبني الثقة وتحافظ على الزوار، بينما المواقع البطيئة تدفعهم للابتعاد."

SEO بالعربي

تابعنا ليصلك كل جديد

قيم هذا الموضوع