اكتشف أفضل تقنيات تسريع موقعك الإلكتروني

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

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

آلية تحميل صفحة الويب

قبل استعرض التقنيات والحلول، نحتاج لفهم طريقة تحميل صفحات الموقع، فعندما يطلب المتصفح صفحة ويب ما، سيتلقى أولاً مستند HTML، ثم يُحلّل هذا المستند، وعندما يعثر المحلل parser الموجود في المتصفح على ملف خارجي مرتبط بهذه الصفحة مثل ملف تنسيقات CSS أو كود جافا سكريبت أو رابط لصورة، سيرسل طلبًا جديدًا للحصول على هذا الملف.

على سبيل المثال، لنفرض أن لدينا موقع ويب بالهيكلية التالية:

.
├── index.html
├── package.json
└── statics
    ├── css
    │   ├── footer.css
    │   ├── header.css
    │   └── main.css
    ├── images
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.png
    │   ├── 4.png
    │   └── 5.jpg
    └── js
        ├── foo.js
        ├── bar.js
        └── index.js

لعرض ملف index.html لهذا الموقع بشكل كامل، سيحتاج المتصفح لإرسال 12 طلب على النحو التالي:

• طلب واحد لتحميل ملف HTML
• ثلاثة طلبات لتحميل ملفات CSS
• ثلاثة طلبات لتحميل ملفات JavaScript
• خمسة طلبات لتحميل الصور 

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

أولًا: تحسين الصور

تعد الصور من أهم العوامل التي تؤثر في سرعة تحميل مواقع الويب، وإليكم عدة نصائح وتقنيات لتحسينها.

استخدام تنسيقات الصور الحديثة

من الأفضل استخدام التنسيقات الحديثة للصور مثل WebP و AVIF التي توفر تحسينات كبيرة في ضغط الصورة بدلًا من استخدام التنسيقات التقليدية JPG و PNG، فهذا يساعد في تقليل حجم الملفات بشكل كبير دون التأثير على الجودة. هناك العديد من الأدوات والمواقع السحابية المخصصة لتحويل الصور لهذه التنسيقات، ولكن المشكلة في هذه الأدوات أنها تتطلب رفع الملفات لمعالجتها، وبعض خدماتها غير مجانية. 

سنستخدم في حالتنا أداة تسمى FFmpeg لتحسين الصور، حيث تتيح لنا هذه الأداة تحويل الصور محليًا باستخدام أمر بسيط. سنحتاج لتثبيت الأداة على حاسوبنا، في حال استخدام نظام التشغيل Mac سنثبتها من خلال مدير الحزم Homebrew من خلال الأمر التالي:

brew install ffmpeg

وفي حال استخدام نظام التشغيل ويندوز فيمكننا تثبيتها مباشرة من موقعها الرسمي أو تثبيتها باستخدام Winget كالتالي:

winget install --id=Gyan.FFmpeg  -e

بعد الانتهاء من عملية التثبيت، سنفتح الطرفية terminal وننتقل إلى دليل صور موقعنا باستخدام الأمر التالي:

cd /path/to/images

ثم نحول الصور للتنسيق webp باستخدام الأمر التالي:

for file in *.{jpg,png}; do ffmpeg -i "$file" -c:v libwebp -q:v 80 "$(basename "$file" .${file##*.}).webp"; done

وفي حال استخدام سطر الأوامر CMD في ويندوز، نستخدم الأمر التالي:

for %i in (*.jpg *.png) do ffmpeg -i "%i" -c:v libwebp -q:v 80 "%~ni.webp"

أما إذا كنا نستخدم PowerShell في ويندوز، فسنستخدم الأمر التالي:

Get-ChildItem -Path . | Where-Object { $_.Extension -match '\.jpg$|\.png$' } | ForEach-Object { ffmpeg -i $_.FullName -c:v libwebp -q:v 80 ($_.BaseName + ".webp") }

قد نحتاج إلى تعديل الأمر ليناسب حالتنا الخاصة:

• {jpg,png} لتحويل صيغ الصور jpg و png في المجلد
• c:v libwebp- يحدد للأداة FFmpeg ما هو الترميز المستخدم لصيغة WebP. لا حاجة لتغيير هذا الخيار
• q:v 80- يحدد مستوى ضغط للصور، يمكن تعديل القيمة بين 0 لأدنى جودة وأعلى ضغط، و 100 لأعلى جودة ودون ضغط

يمكن تجربة مستويات ضغط مختلفة حتى نصل لأفضل ضغط دون التأثير على جودة الصورة، لنلاحظ مثلًا الصورة التالية بتنسيقين مختلفين هما JPG وWebP.

حجم ملف JPG  هنا هو 2.7 ميجابايت، بينما حجم ملف WebP هو 176 كيلوبايت بالرغم أن كلا الصورتين لهما نفس الأبعاد 4000 × 6000 بكسل ونفس الوضوح لكن تنسيق WebP تمكن من ضغط الصورة بشكل أكبر، لذا يُعد خياراً مثالياً للاستخدام على الويب وسيساعدنا في زيادرة سرعة تحميل الصفحات.

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

استخدام أحجام صور مختلفة لأحجام الشاشات المختلفة

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

تساعدنا أداة FFmpeg التي استخدمناها سابقًا على تحقيق ذلك، بعد إنتاج إصدارات الصور المختلفة علينا تضمين الصور في صفحة الويب باستخدام العنصر <picture> بدلاً من <img>. حيث يسمح العنصر <picture> بتحديد مصادر متعددة للصورة نفسها، ويتيح للمتصفح اختيار الصورة الأنسب تلقائيًا حسب حجم الشاشة.

<picture>
  <source media="(max-width: 600px)" srcset="small.webp" />
  <source media="(max-width: 1200px)" srcset="medium.webp" />
  <img src="large.webp" alt="example image" />
</picture>

إذا كان عرض الشاشة 600 بكسل أو أقل كحالة هاتف محمول ستُعرَض الصورة small.webp، وإذا كان العرض بين 601 بكسل و 1200 بكسل كحالة جهاز لوحي ستُعرَض الصورة medium.webp، وإذا لم يتحقق أي من الشروط السابقة أي كان عرض الشاشة أكبر من أكبر من 1200 بكسل فستُعرَض الصورة الصورة الافتراضية large.webp.

التحميل الكسول للصور Lazy Load

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

<picture>
  <source media="(max-width: 600px)" srcset="small.webp" />
  <source media="(max-width: 1200px)" srcset="medium.webp" />
  <img src="large.webp" alt="example image" loading="lazy" />
</picture>

لاحظ أننا جعلنا الصورة الكبيرة large.webp تُحمّل بشكل كسول من خلال ضبط الخاصية loading بالقيمة "lazy" في الوسم <img> لضمان أن المتصفح سيحمّل هذه الصورة فقط عندما يمرر المستخدم لأسفل ويصل لموقع هذه الصورة. لكن إذا كانت الصورة جزءًا أساسيًا من تصميم الصفحة وكنا نحتاج لعرضها فورًا عند تحميل الصفحة فمن الأفضل ضبط الخاصية loading بالقيمة "eager". لجعل المتصفح يحمّلها على الفور دون انتظار.

<picture>
  <source media="(max-width: 600px)" srcset="small.webp" />
  <source media="(max-width: 1200px)" srcset="medium.webp" />
  <img src="large.webp" alt="example image" loading="eager" />
</picture>

بعد أن استعرضنا طرق نختلفة لتحسين سرعة الموقع من خلال تحسين الصور، لنشرح تقنيات تحسين الملفات الثابتة للموقع.

ثانيًا: تحسين ملفات CSS وجافا سكريبت

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

دمج ملفات CSS وتقليل حجمها

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

غالبًا ما يكون PostCSS جزءًا من أدوات تسمى مُجمِّعات الويب web bundlers تستخدم لتجميع ملفات الموقع المختلفة وسنتحدث عنها بالتفصيل لاحقًا، ومع ذلك، يمكننا استخدام PostCSS بشكل مستقل وتثبيته في مشروعنا باستخدام مدير الحزم npm كالتالي:

npm install postcss postcss-cli postcss-import postcss-preset-env cssnano --save-dev

بعدها علينا إنشاء ملف إعدادات PostCSS باسم postcss.config.js في الدليل الجذر لمشروعنا، ونحدد فيه ما هي الإضافات plugins التي نريد استخدامها لتحسين الكود.

module.exports = {
  plugins: [
    require("postcss-import"),
    require("postcss-preset-env"),
    require("cssnano"),
  ],
};

استخدمنا هنا الإضافات التالية:

• postcss-import لدمج ملفات CSS متعددة داخل ملف واحد
• postcss-preset-env لاستخدام خصائص CSS الحديثة والتأكد من توافقها مع المتصفحات
• cssnano لتقليص حجم ملفات CSS

بعدها ننشئ ملف CSS رئيسي باسم styles.css كي يستورد جميع التنسيقات الأخرى الضرورية:

├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
└── statics
    ├── css
    │   ├── footer.css
    │   ├── header.css
    │   ├── main.css
    │   └── styles.css
    ├── images
    └── js

يستورد الملف styles.css كافة ملفات التنسيقات كالتالي:

@import "./header.css";
@import "./main.css";
@import "./footer.css";

بعدها ندمج الملفات معًا في هذا الملف، ونضعه في المجلد dist/ ونصغّر حجمه باستخدام الأمر التالي:

npx postcss statics/css/styles.css -o dist/styles.css

وبهذا سيكون الملف جاهزًا للاستخدام في الموقع، كل ما علينا هو استيراد الملف dist/styles.css الناتج في مستند HTML كما يلي:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="dist/styles.css" />
  </head>
  <body>
    . . .
  </body>
</html>

كما يمكننا بدلاً من تجميع كافة ملفات CSS في ملف واحد، تقسيمها إلى نوعين من الملفات: الأول يتضمن تنسيقات CSS الأساسية، والثاني يتضمن CSS غير الأساسية. ثم نُحمّل تنسيقات CSS الأساسية أولًا في القسم head لكونها ضرورية لتنسيق الصفحة بشكل صحيح فورًا. وتأجيل تحميل تنسيقات CSS الثانوية للقسم body بعد تحميل كامل محتوى الصفحة، وبهذا نساعد على تحسين سرعة الصفحة.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="dist/critical.css" />
  </head>
  <body>
    . . .
    <link rel="stylesheet" href="dist/non-critical.css" />
  </body>
</html>

مُجمِّعات الويب web bundlers

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

الأداة Webpack

يعد Webpack أداة مشهورة حاصلة على أكثر من 63 ألف نجمة على GitHub، فهو يساعدنا على تجميع ملفات مختلفة من أنواع متعددة مثل JavaScript و CSS في ملفات مُجمعّة يمكن للمتصفح تنفيذها بسرعة، كما يوفر لنا أدوات لمعالجة الصور. يمكن تثبيت Webpack في مشروعنا كما يلي:

npm install webpack webpack-cli --save-dev

لنفترض أن لدينا هيكل المشروع التالي، ولنوضح بشكل مبسط كيفية عمل Webpack في تجميع ملفات جافا سكريبت لهذا المشروع:

.

├── dist
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js   # إعدادات PostCSS
├── statics
│   ├── css
│   ├── images
│   └── js
│       ├── bar.js
│       ├── foo.js
│       └── index.js
└── webpack.config.js #  إعدادات Webpack

لدينا ثلاث ملفات جافا سكريبت في مشروعنا وهي: الملف foo.js:

export default function foo() {
  console.log("foo");
}

والملف bar.js:

export default function bar() {
  console.log("bar");
}

والملف index.js:

import foo from "./foo.js";
import bar from "./bar.js";

foo();
bar();

console.log("Hello, World!");

في هذه الحالة، سيكون الملف index.js هو نقطة الدخول لمشروعنا، أي سنحمّل هذا الملف أولاً ومن ثم نتبعه بتحميل الملفات المستوردة داخله. ولإنشاء ملف إعدادات Webpack، علينا إنشاء ملف webpack.config.js في الدليل الجذر لموقعنا، ونتأكد من أن خيار entry يشير إلى ملف index.js. سيكون ملف الإعدادات webpack.config.js كما يلي:

const path = require("path");

module.exports = {
  entry: "./statics/js/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

الآن عند تنفيذ Webpack، سيبدأ بالبحث عن الملف index.js، ثم عن الملفين foo.js و bar.js ويجمع كل الأكواد في ملف واحد يسمى bundle.js. بعدها نستخدم الأمر التالي لتشغيل Webpack :

npx webpack --config webpack.config.js

سيؤدي تنفيذ هذا الأمر لإنشاء ملف bundle.js يحتوي النسخة المُصغّرة من جميع أكواد جافا سكريبت.

(() => {
  "use strict";
  console.log("foo"), console.log("bar"), console.log("Hello, World!");
})();

يعالج Webpack ملفات جافا سكريبت فقط، ولكن يمكننا توسيع إمكانياته بتثبيت أدوات تحميل loaders مختلفة. على سبيل المثال، عند تحميل css-loader في Webpack سنتمكن من معالجة ملفات CSS، وعند تحميل postcss-loader ستوافق Webpack مع معالج PostCSS الذي استخدمناه سابقًا.

إضافة إلى Webpack، هناك العديد من أدوات تجميع الويب الشهيرة الأخرى نذكر منها Parcel و Esbuild و Rollup وكل منها يمتلك ميزات وخصائص فريدة. يعود اختيار الأداة المناسبة لاحتياجاتنا ومتطلبات مشروعنا.

الأداة Vite

بالحديث عن أدوات تطوير الواجهة الأمامية، لا يمكننا تجاهل الحديث عن Vite فهي أداة بناء واجهات أمامية سريع مصممة لتحسين وتسريع تطوير التطبيقات، وهي سريعة وموثوقة وتستحق التجربة.

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

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

الخاصيتان async و defer

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

لحل هذه المشكلة، يمكننا استخدام الخاصيتين defer أو async لتحميل ملفات جافا سكريبت على التوازي، أي دون توقف المتصفح عن تحليل باقي محتويات الصفحة.

<script src="path/to/script.js" async></script>
<script src="path/to/script.js" defer></script>

كلا الخيارين يوجهان المتصفح لتحميل كود جافا سكريبت في الخلفية. ويكمن الاختلاف بينهما هو أن الخاصية async تخبر المتصفح بتنفيذ هذا الكود فور تحميله، بينما تخبر الخاصية defer المتصفح بأن ينتظر حتى يكتمل تحليل الصفحة قبل تنفيذه.

في حال وجود عدة أكواد جافا سكريبت في صفحة الويب مع استخدام الخاصية defer فإنها ستحمّل جميع هذه الأكواد في الخلفية، ثم ستنفّذ بالترتيب الذي ظهرت به في الكود، أما إذا استخدمنا الخاصية async فسينفّذ السكربت الذي انتهى تحميله أولاً بغض النظر عن ترتيبه.

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

بهذا نكون قد ناقشنا عدة طرق لتسريع موقع الويب من خلال تحسين الملفات الثابتة، لنشرح تقنيات أخرى لتحسين سرعة الموقع من خلال تلميحات الموارد.

ثالثًا: تعزيز أداء صفحة الويب باستخدام تلميحات الموارد

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

تسمح لنا تلميحات الموارد بإخبار المتصفح بكيفية معالجة هذه الموارد وذلك باستخدام وسم <link> الذي نضعه في قسم الترويسة head من ملف HTML، هناك العديد من تلميحات الموراد المفيدة والتي سنشرحها تاليًا.

التلميح dns-prefetch

يساهم التلميح dns-prefetch في تحسين أداء الصفحة عن طريق إجراء عملية بحث مسبق لنظام أسماء النطاقات DNS لمورد خارجي قد يحتاجه المتصفح في المستقبل. فعندما يستخدم المتصفح هذا التلميح سيبدأ في معالجة اسم النطاق ويحوله لعنوان IP مناسب في الخلفية، مما يسرع الاتصال بالخادم عند الحاجة إليه لاحقًا، لاحظ الكود التالي:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="dns-prefetch" href="https://style.example.com" />
  </head>
  <body>
    . . .
  </body>
</html>

يوضح الكود أعلاه مثالًا على تلميح مورد من نوع dns-prefetch. فعندما يزور المتصفح موقعًا إلكترونيًا، فإنه يذهب أولاً إلى خادم DNS الذي يشبع دليل الهاتف على الإنترنت فهو يربط النطاقات بعناوين IP. يذهب المتصفح إلى خادم DNS مع النطاق، ثم يعيد خادم DNS عنوان IP المقابل، وعندها يمكن للمتصفح الاتصال بذلك العنوان ويطلق على هذه العملية اسم بحث DNS.

من خلال تلميح المورد هنا سيعرف المتصفح بأن المستخدم قد يقوم ببعض الإجراءات التي ستتطلب منه البحث عن عنوان الـ IP الخاص بـالنطاق https://style.example.com. وبالنتيجة، يبدأ المتصفح في حل اسم النطاق في أقرب وقت ممكن ويخزن النتيجة محليًا. يسمح هذا التخزين المؤقت للمتصفح بسحب عنوان IP مباشرة من الذاكرة المؤقتة عندما يطلبه المستخدم.

التلميح preconnect

يستخدم التلميح preconnect لتحسين أداء تحميل الصفحة عن طريق إنشاء اتصال مسبق مع الخادم قبل أن يحتاج المتصفح إلى تحميل أي موارد من هذا الخادم.

<link rel="preconnect" href="https://style.example.com" />

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

التلميح preload

يخبر التلميح preload المتصفح بكيفية تحميل الموارد لصفحة الويب الحالية.

<link rel="preload" href="path/to/script.js" as="script" />

تٌعطى الموارد المعرفة بـ href أولوية عالية وتُحمّل في أسرع وقت ممكن. كما يسمح تلميح preload بتحديد خاصية إضافية تسمى as كي نحدد نوع المورد ونوضح بأنه يتطلب ترويسات طلب request headers مختلفة أو سياسات أمان مختلفة. 

على سبيل المثال قد تحتاج الموارد من نوع script مثل أكواد جافا سكريبت لطريقة تعامل مختلف عن الموارد من نوع style مثل أكواد CSS أو الموارد من نوع image لضمان الأمان ومنع التعارضات. ولتحقيق أفضل تجربة مستخدم، يمكن تحديد الموارد الأساسية مثل تنسيقات CSS و أكواد جافا سكريبت الأساسية والخطوط والصور المهمة باستخدام التلميح preload لتحميلها بأولوية عالية عند التحميل الأولي للصفحة.

التلميح prefetch

<link rel="prefetch" href="path/to/style.css" as="style" />

يشبه التلميح prefetch التلميح preload، إلا أنه يحدد الموارد التي قد يحتاجها المستخدم لاحقًا، وبالتالي يعيّن المتصفح أولوية منخفضة لهذه الموارد، ويحمّلها بعد تحميل الصفحة، ستُخزّن الملفات المحملة في ذاكرة التخزين المؤقت cache وتسترجع عندما يطلبها المستخدم.

التلميح prerender

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

<link rel="prerender" href="next_page.html" />

رابعًا: استخدم شبكة توصيل المحتوى CDN

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

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

هناك العديد من الشركات التي توفر خدمات CDN مثل CloudFlare و Amazon CloudFront و Google Cloud CDN، وتختلف عملية إعداد CDN حسب الشركة التي نختارها ويمكن الرجوع إلى الوثائق الرسمية لموفر الخدمة وإعدداها وفق ما يناسبنا.

خامسًا: إعداد التخزين المؤقت Caching

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

كما يحتوي مستند HTML على قسم <head>، الذي يستخدم لتخزين البيانات الوصفية metadata للصفحة، يحتوي كل طلب HTTP واستجابة HTTP أيضًا على ترويسة header وهي جزء من البيانات التي ترسل مع كل طلب أو استجابة بين المتصفح والخادم. ويمكن استخدام الترويسة Cache-Control في HTTP لإخبار المتصفح بكيفية تخزين الموارد مؤقتًا.

قد توجد طرق مختلفة لإضافة رؤوس HTTP مخصصة اعتمادًا على كيفية استضافة موقعنا الإلكتروني، على سبيل المثال إذا كنا نستخدم منصة سحابية لاستضافة موقعنا مثل  AWS Amplify، فيمكن إضافة هذه الرؤوس المخصصة في ملف إعدادات التطبيق customHttp.yml لزيادة سرعة تحميل الصفحات. كل ما علينا هو الانتقال إلى إعدادات التطبيق App settings ثم اختيار الرؤوس المخصصة custom headers وتحرير الملف customHttp.yml ليشمل إعدادات التخزين المؤقت المناسبة على النحو التالي:

customHeaders:
  - pattern: '**/*.js'
    headers:
      - key: Cache-Control
        value: 'public,max-age=31536000,s-maxage=86400,immutable'
  - pattern: '**/*.css'
    headers:
      - key: Cache-Control
        value: 'public,max-age=31536000,s-maxage=86400,immutable'
  . . .

في هذا المثال سنخزن ملفات جافا سكريبت و CSS في الذاكرة المؤقتة لزيادة سرعة تحميل الموقع وفق التالي:

• تعني public أن الملف يمكن تخزينه في ذاكرة التخزين المؤقت العامة مثل شبكة توصيل المحتوى CDN
• يحدد max-age=31536000 المدة التي يمكن فيها تخزين الملف في ذاكرة التخزين المؤقت للمتصفح مقدرة بالثواني
• يحدد s-maxage=86400 المدة التي يمكن فيها تخزين الملف في ذاكرة التخزين المؤقت العامة مثل CDN مقدرة بالثواني 
• تعني immutable أن محتوى الملف لن يتغير مع مرور الوقت فإذا كان لدينا ملف .htaccess في موقعنا، يمكن استخدام الأداة .htaccess Generator لإنشاء الكود المناسب بدلاً من كتابته يدويًا

سادسًا: استخدام بدائل Google Analytics

يمكن اللجوء إلى بدائل الجيدة مفتوحة المصدر لتحليلات جوجل Google Analytics والتي توفر أكواد تتبع أصغر بكثير مثل Plausible و Matomo و Fathom و Simple Analytics وغيرها. فعظم هذه الخيارات مفتوحة المصدر ويمكن استضافتها ذاتيًا. على سبيل المثال، يبلغ حجم كود Plausible كيلو بايت واحد فقط، بينما يبلغ حجم كود Google Analytics أكثر من 300 كيلو بايت. لكن وبالرغم من كون هذه الخيارات جيدة جدًا ومفتوحة المصدر، إلا أن Google Analytics قد يوفر بعض الميزات الفريدة التي لا تقدمها البدائل. لذا ننصحكم بتجربتها أولاً ومعرفة ما إذا كانت تلبي متطلباتكم بالفعل قبل الاعتماد عليها لتسريع الموقع.

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

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

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

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

الخاتمة

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

ترجمة -وبتصرف- للمقال Top Website Optimization Tools in 2024

اقرأ أيضًا

• زيادة سرعة أداء المواقع باستخدام تقنية pre-fetching
• نصائح لتحسين أداء تطبيقات لارافيل
• كيفية استخدام شبكات توزيع المحتوى CDN لتحسين أداء مواقع ووردبريس
• مدخل إلى مُسرّع تطبيقات الويب Varnish Cache