تحسين سرعة موقع الويب والأداء مهمان جدًا لتجربة المستخدم. فلو كان الموقع الخاص بك بطيئا ، فلن تفقد الزائرين فحسب ، بل أيضًا ستفقد العملاء المحتملين.
تقوم محركات البحث مثل Google بالاهتمام في سرعة موقع الويب في تصنيفات البحث؛ لذلك عند تحسين سرعة موقعك ، يجب أن تأخذ كل شيء في عين الاعتبار.
والآن دعني أعطيك بعض النصائح العامة لتحسين أداء موقع الويب وسرعته.
1.أجل تحميل المحتوى إن أمكن سيؤدي إلى تحسين سرعة موقع الويب
Ajax يعمل على إنشاء صفحات ويب نستطيع تحديثها بشكل غير متزامن في أي وقت. هذا يعني أنه بدلاً من إعادة تحميل صفحة كاملة عندما يقوم المستخدمون باجراء اي شيء عليها ، يمكن ببساطة تحديث أجزاء من تلك الصفحة.
يمكننا استخدام معرض الصور كمثال. ملفات الصور كبيرة وثقيلة ؛ يمكنها إبطاء سرعة تحميل الصفحات لصفحات الويب. بدلاً من تحميل جميع الصور عندما يزور المستخدم صفحة الويب لأول مرة ، يمكننا فقط عرض الصور المصغرة للصور وبعد ذلك عندما ينقر المستخدم عليها ، يمكننا طلب الصور بالحجم الكامل بشكل غير متزامن من الخادم وتحديث الصفحة. بهذه الطريقة ، إذا كان المستخدم يريد فقط رؤية بعض الصور ، فلا داعي للانتظار حتى يتم تنزيل جميع الصور. يسمى نمط التطوير هذا التحميل البطيء.
يمكن لمكتبات Ajax / تطوير الويب مثل jQuery و Prototype و MooTools أن تجعل تحميل المحتوى المؤجل أسهل في التنفيذ.
-
استخدم ملفات JS و CSS الخارجية
عندما يقوم المستخدم بتحميل صفحة الويب الخاصة بك لأول مرة ، سيقوم المتصفح بتخزين الموارد الخارجية مؤقتًا مثل ملفات CSS و JavaScript. وبالتالي ، بدلاً من ملفات جافا سكريبت و CSS المضمنة ، من الأفضل وضعها في ملفات خارجية.
يؤدي استخدام CSS المضمنة أيضًا إلى زيادة وقت عرض صفحة الويب ؛ يتيح تحديد كل شيء في ملف CSS الرئيسي للمتصفح القيام بعمل أقل عند عرض الصفحة ، لأنه يعرف بالفعل جميع قواعد النمط التي يحتاج إلى تطبيقها.
على سبيل التوضيح، فإن استخدام ملفات JavaScript و CSS الخارجية يجعل صيانة الموقع أسهل لأنك تحتاج فقط إلى الاحتفاظ بالملفات العامة بدلاً من التعليمات البرمجية المنتشرة في صفحات ويب متعددة.
-
استخدام أنظمة التخزين المؤقت
إذا وجدت أن موقعك يتصل بقاعدة البيانات الخاصة بك من أجل إنشاء نفس المحتوى ، فقد حان الوقت لبدء استخدام نظام التخزين المؤقت. من خلال وجود نظام تخزين مؤقت في مكانه ، سيتعين على موقعك إنشاء المحتوى مرة واحدة فقط بدلاً من إنشاء المحتوى في كل مرة يزور فيها المستخدمون الصفحة. لا تقلق ، تقوم أنظمة التخزين المؤقت بتحديث ذاكرات التخزين المؤقت الخاصة بها بشكل دوري بناءً على كيفية إعدادها – لذلك يمكن تخزين صفحات الويب المتغيرة باستمرار (مثل منشور مدونة مع تعليقات) مؤقتًا.
ستحتوي أنظمة إدارة المحتوى الشائعة مثل WordPress و Drupal على ميزات تخزين مؤقت ثابتة تعمل على تحويل الصفحات المنشأة ديناميكيًا إلى ملفات HTML ثابتة لتقليل المعالجة غير الضرورية للخادم. بالنسبة إلى WordPress ، تحقق من WP Super Cache (أحد مكونات WordPress الستة المهمة التي ثبتها Six Revisions). دروبال لديه ميزة تخزين الصفحات في جوهرها.
-
تجنب تغيير حجم الصور في HTML
إذا كان حجم الصورة في الأصل 1280 × 900 بكسل ، ولكنك تحتاج إلى أن يكون حجمها 400 × 280 بكسل ، فيجب عليك تغيير حجم الصورة وإعادة حفظها باستخدام محرر صور مثل Photoshop بدلاً من استخدام سمات العرض والارتفاع في HTML (مثل <img width = “400” height = “280” src = “myimage.jpg” />). هذا لأن الصورة الكبيرة ستكون دائمًا أكبر في حجم الملف من الصورة الأصغر ، بطبيعة الحال.
بدلاً من تغيير حجم صورة باستخدام HTML ، قم بتغيير حجمها باستخدام محرر صور مثل Photoshop ثم احفظها كملف
جديد.
-
التوقف عن استخدام الصور لعرض النص
لا يقتصر الأمر على عدم إمكانية الوصول إلى النص الموجود في الصورة من قِبل برامج قراءة الشاشة وعديم الفائدة تمامًا لتحسين محركات البحث ، ولكن يؤدي استخدام الصور لعرض النص أيضًا إلى زيادة أوقات تحميل صفحات الويب الخاصة بك
لأن المزيد من الصور تعني صفحة ويب أثقل.
إذا كنت بحاجة إلى استخدام الكثير من الخطوط المخصصة في موقع الويب الخاص بك ، فتعرف على CSS @ font-face
لعرض النص بخطوط مخصصة بشكل أكثر كفاءة. وغني عن القول أنه يتعين عليك تحديد ما إذا كان تقديم ملفات الخطوط سيكون أفضل من عرض الصور.
-
تحسين أحجام الصور باستخدام تنسيق الملف الصحيح
باختيار تنسيق الصورة الصحيح ، يمكنك تحسين أحجام الملفات دون فقدان جودة الصورة. على سبيل المثال ، ما لم تكن بحاجة إلى شفافية الصورة (طبقات ألفا) التي يجب أن يقدمها تنسيق PNG ، غالبًا ما يعرض تنسيق JPG الصور الفوتوغرافية بأحجام ملفات أصغر.
-
تحسين طريقة كتابة التعليمات البرمجية
انظر حول شفرة المصدر الخاصة بك. هل تحتاج حقًا إلى جميع العلامات التي تستخدمها أم يمكنك استخدام CSS
للمساعدة في العرض؟ على سبيل المثال ، بدلاً من استخدام <h1> <em> عنوانك </ em> </h1> ، يمكنك
بسهولة استخدام CSS لجعل عناوينك مائلة باستخدام خاصية نمط الخط. لا تقلل كتابة التعليمات البرمجية بكفاءة أحجام ملفات مستندات HTML و CSS فحسب ، بل تسهل أيضًا صيانتها.
-
قم بتحميل JavaScript في نهاية المستند
من الأفضل أن يتم تحميل النصوص البرمجية في نهاية الصفحة وليس في البداية. يسمح للمتصفح بعرض كل شيء
قبل البدء في استخدام JavaScript. هذا يجعل صفحات الويب الخاصة بك أكثر استجابة لأن طريقة عمل JavaScript هي
أنها تمنع عرض أي شيء أسفلها حتى انتهاء التنزيل. إن أمكن ، قم بالإشارة إلى JavaScript قبل علامة إغلاق <body> لمستندات HTML الخاصة بك.
-
استخدام شبكة توصيل المحتوى CDN
تتأثر سرعة موقعك بشكل كبير بمكان وجود المستخدم ، بالنسبة إلى خادم الويب الخاص بك. كلما ابتعدوا ، زادت
المسافة التي يجب أن تقطعها البيانات المنقولة. يساعد تخزين المحتوى الخاص بك مؤقتًا عبر مواقع جغرافية متعددة
موضوعة بشكل استراتيجي في معالجة هذه المشكلة. غالبًا ما تجعل CDN تكلفة التشغيل أعلى قليلاً ، لكنك بالتأكيد تحصل على مكافأة السرعة. تحقق من MaxCDN أو Amazon Simple Storage Service (Amazon S3).
10.تحسين سرعة موقع الويب والتخزين المؤقت
الى جانب استخدام أنظمة التخزين المؤقت ، يجب عليك إنشاء مواقع الويب التي تستخدم التخزين المؤقت للويب
قدر الإمكان. التخزين المؤقت للويب هو عندما يتم تخزين الملفات مؤقتًا بواسطة مستعرض الويب لاستخدامها لاحقًا.
تتضمن الأشياء التي يمكن للمتصفحات تخزينها مؤقتًا ملفات CSS وملفات JavaScript والصور.
بصرف النظر عن الأساسيات ، مثل وضع شفرة CSS و JavaScript المستخدمة في صفحات متعددة في ملفات خارجية ، هناك العديد من الطرق للتأكد من أنك تقوم بتخزين ملفاتك مؤقتًا بأكثر الطرق فعالية.
على سبيل المثال ، يمكنك تعيين رؤوس استجابة HTTP مثل Expires و Last-Modified لتقليل الحاجة إلى إعادة تنزيل ملفات معينة عندما يعود المستخدم إلى موقعك. لمعرفة المزيد ، اقرأ عن التخزين المؤقت في HTTP والاستفادة من التخزين المؤقت للمتصفح.
للمزيد اقرأ هذه المقالة حول قوالب ووردبريس معربة
