6 نصائح لتحسين سرعة موقعك و أداءه على محركات البحث SEO
تحسين محركات البحث SEO تطوير ويب
عند إنشاء موقع الويب لمشروعك أو لأعمالك أو مدونتك، فبالتأكيد سترغب في أن يتمتع الزوار بتجربة رائعة عند تصفحه. واحدة من أفضل الأدوات لهذا الغرض هي Lighthouse ، وهي أداة Chrome Dev-tool التي تحلل مدى جودة موقعك على مقاييس مختلفة.
للأسف ، ليس من السهل تحقيق درجة مثالية في Lighthouse. فخلال الفترة الماضية وأثناء إنشاء موقع موقعي مدمن ويب، كانت النتائج لتحليل موقعي كالتالي:
إقرأ أيضا: كيفية تضمين فيديو من يوتيوب مع خاصية Lazyload و عرض متجاوب .
{tocify} {$title=ستقرأ في هذا المقال}
ولكن بعد قيامي ببعض التعديلات واتباع بعض الخطوات البسيطة، تمكنت من رفع النتيجة في كل فئة إلى 90+، كما هو موضح بالصورة أدناه:
ومن أهم الخطوات التي قمت بها لتحقيق أفضل النتائج لموقعي مدمن ويب، الآتي:
إقرأ أيضا: عوامل تصنيف جوجل لمواقع الويب على مستوى النطاق "الدومين".
1- تأجيل تحميل الموارد مع خاصية التحميل الكسول (Lazyload)
مفهوم آخر مهم هو التحميل الكسول والذي كنت قد تحدثت عنه في مقال سابق شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading). فهذه الخاصية التي تعمل على تأجيل تحميل الموارد الخاصة بالموقع كالصور والسكربتات وخاصة الموارد الخارجية JavaScript حتى يتم طلبها. يوفر هذا مكاسب هائلة في الأداء أثناء التحميل الأولي للموقع. من السهل جدًا تنفيذ Lazy Loading في بلوجر لتأخير تحميل السكربتات الخارجية، من خلال كود جافا سكربت التالي:
<script>
//<![CDATA[
// Lazy Script Two
var lazycode=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazycode||0!=document.body.scrollTop&&!1===lazycodetwo)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="ضع هنا رابط سكربت الجافا سكربت الخارجي";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazycodetwo=!0)},!0);
//]]>
</script>
والذي سيعمل على تأخير تحميل السكربت الخارجي إلى أن يتم بدء تصفح الموقع والنزول بالشريط الجانبي.
أما بخصوص الصور، فيمكنك إستخدام كود السكربت التالي لتأخير تحميل الصور في مدونات بلوجر:
<script>
//<![CDATA[
// LazySizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/faisal2n/md3bm@gh-pages/lazymd3bm.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>
2- استخدم الصور المتجاوبة والمتوافقة مع المتصفحات
الطريقة الأكثر شيوعًا لاستخدام الصور هي من خلال صيغة الكود التالي:
<img src="link-to-image">
<!-- Responsive images -->
<img
srcSet="link-to-img 480w, link-to-img@2x 720w, link-to-img@3x 960w"
sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
src="imgUrl@3x"
>
<!-- Art Direction -->
<picture>
<source media="(max-width: 1200px)" srcSet="link-to-img">
<source media="(max-width: 2560px)" srcSet="link-to-img@2x">
<source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
<img src="link-to-img@3x">
</picture>
يتيح استخدام هذه الطرق للمتصفحات تحميل الصور الأكثر ملاءمة لحجم الشاشة التي تستخدمها، وغالبًا ما يمكنها من تنزيل الموقع بسرعة أكبر وتجنب تحميل الموقع كمية هائلة من البيانات دون حاجة.
بالإضافة إلى ذلك ، ليست هناك حاجة لتضمين الصور الكبيرة على الصفحة إذا كان يتم عرضها على شاشة الهاتف المحمول. وعلى العكس من ذلك ، تبدأ الصورة النقطية الصغيرة في الظهور بشكل محبب عند عرضها أكبر من حجمها الأصلي (الصورة النقطية هي عدد محدد من وحدات البكسل عرضًا وعددًا محددًا من وحدات البكسل ارتفاعًا ، كما رأينا عندما نظرنا إلى الرسومات المتجهة). وهذا ما يسمى مشكلة تبديل الدقة.
إقرأ أيضا: كيفية تحسين موقعك للحصول على ترتيب عالي في نتائج بحث جوجل.
3- ضغط وتصغير الموارد
من الجيد دائمًا ضغط وتصغير JavaScript و CSS في بيئة الإنتاج. إنه يقلل بشكل كبير من حجم العناصر المراد تحميلها ويتخلص أيضًا من التعليمات البرمجية غير المستخدمة.
تعتبر Webpack أداة رائعة لهذا الغرض. ,والتي تقوم بتقليل حجم الجافا سكربت JavaScript افتراضيًا في بيئة العمل. بالنسبة إلى الموارد الأخرى ، مثل CSS ، يمكنك استخدام مكونات إضافية مثل المكون الإضافي css-minimizer-webpack-plugin.
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
};
أو يمكنك ضغط وتصغير أكواد CSS مباشرة من خلال الأداة CSS Minifier.
4- استخدم الصور المضغوطة
يمكن أن توفر تنسيقات الصور من الجيل التالي مثل WebP ضغطًا أفضل بكثير من تنسيق PNG أو JPEG. وهذا بدوره يعني تنزيلات أسرع، واستهلاكًا أقل للبيانات ، وبالتالي، موقعًا أسرع بشكل عام.
وبإمكانك استخدام أداة ضغط الصور المقدمة من جوجل (Squoosh)، وهي أفضل أداة لضغط وتحويل تنسيقات الصور على الإنترنت.
يمكنك أيضًا استخدام تنسيق الرسومات المتجهة مثل SVG بدلاً من الرسومات النقطية الشائعة الاستخدام والتي تساعد أيضًا بشكل كبير في مجال تحسين الأداء. ولمساعدتك في ذلك يمكنك الإطلاع على مقالنا السابق حول أفضل المواقع والأدوات لإنشاء أشكال وتموجات SVG و PNG.
5- إستخدم noreferrer و noopener للروابط الخارجية
هناك حاجة إلى noopener لتعزيز أمان موقع الويب الخاص بك ومنع مواقع الويب الأخرى من الوصول إلى صفحتك (من خلال جلسة المتصفح). يتم استخدام noreferrer لحماية معلومات الإحالة من تمريرها إلى موقع الويب المستهدف وهذا أيضًا يخفي حركة الإحالة في تحليلات Google.
هذه هي الطريقة التي تظهر بها السمة noopener في عرض HTML:
<a href="https://www.example.com" rel="noopener"> رابط إلى Example.com
</a>
العلامة rel = ”noreferrer” هي سمة HTML خاصة يمكن إضافتها إلى علامة
الارتباط (<a>). يمنع تمرير معلومات المرجع إلى موقع الويب الهدف عن طريق
إزالة معلومات الإحالة من رأس HTTP.
وهذا يعني أنه في Google Analytics ، ستظهر حركة المرور القادمة من الروابط التي
تحتوي على السمة rel = ”noreferrer” كزيارات مباشرة بدلاً من إحالة.
هذه هي الطريقة التي تظهر بها السمة noreferrer في عرض HTML:
<a href="https://www.example.com" rel="noreferrer"> رابط إلى Example.com
</a>
وبإمكانك إستخدامهما معا ليصبح كود الرابط كالتالي:
<a href="https://www.example.com" rel="noopener noreferrer"> رابط إلى
Example.com </a>
6- إستخدم alt ، aria-label و aria-labelledby
تساعدك هذه العلامات على تحسين إمكانية الوصول إلى موقع الويب.
1- alt: سمة alt هي سمة
HTML المستخدمة في مستندات HTML لتحديد نص بديل يتم عرضه عندما يتعذر عرض العنصر
(الصور بشكل عام) الذي يتم تطبيقه عليه.
<img src="link-to-img" alt="image-description">إقرأ أيضا: كيفية استخدام موقع Quora للحصول على أفكار محتوى جديد ومميز.
2- aria-label: تُستخدم سمة
aria-label لتعريف سلسلة تسمي العنصر الحالي.
استخدمه في الحالات التي يكون فيها تسمية النص غير مرئي على الشاشة.
<button aria-label="Close" onclick="dialog.close()">
X
</button>
3- aria-labelledby: تشبه سمة
aria-label ، لكن يجب استخدامها إذا كان هناك
نص مرئي يصف العنصر.
<div role="dialog" aria-labelledby="dialog-header">
<h2 id="dialog-header">Choose a File</h2>
<!-- ... Dialog contents -->
</div>الخلاصة
كانت هذه بعض النصائح و الحيل لتعزيز أدباء وسرعة موقعك الإلكتروني من جميع الجوانب لرفع نقاط الأداء في Lighthouse لموقعك الإلكتروني. قم باستخدامها وتطبيقها على موقعك الإلكتروني أو مدونتك وشاهد النتائج المذهلة أمام عينيك.
أتمنى لك أفضل نتيجة 100 منارة!
