خطوات سهلة لتسريع موقع صورتك الثقيلة

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

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

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

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

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

1. تحسين HTML-Code و CSS- و JS-Files

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

كيفية تقليل الكود لتسريع تحميل الموقع

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

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

قم بتجميع نفس النوع من ملفات CSS وملفات JS. تطبيقات PHP المجانية مثل JCH Optimize أو Cloudflare أو Minify ، والتي يتم نسخها في دليل منفصل وتمريرها عبر جميع ملفات الموقع ، ستساعد على دمج العناصر.

2. إزالة طلبات HTTP الإضافية

يشغل تحميل عناصر الصفحة (جافا سكريبت ، صور ، CSS ، وملفات فلاش) نصيب الأسد من موارد النظام عند تحميل أحد المواقع. طلبات HTTP لمثل هذه العناصر تبطئ الموقع بشكل ملحوظ.

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

ويمكن القيام بذلك بعدة طرق:

• دمج عدة صور في ملف رسومي واحد (CSS sprite) ؛
• استخدم الصور المضمنة (الصور المضمنة) في ورقة أنماط الصفحة ؛
• يتم دمج ملفات أو نصوص CSS متعددة على صفحة واحدة في ملف واحد ؛
• قلل عدد السيناريوهات والمكونات الإضافية.

3. ترتيب JavaScript و CSS بالترتيب الصحيح

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

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

4. تقليل عدد النصوص الخارجية

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

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

5. تمكين Flush

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

من الأفضل وضع وظيفة التدفق في بداية كود مصدر الصفحة ، مباشرة بعد الرأس. من الرأس ، سيتم فتح محتوى HTML بشكل أسرع ، ويمكنك أيضًا تمكين التحميل المتوازي لعناصر CSS و JavaScript.

6. تخزين الصفحات مؤقتًا

يحفظ التخزين المؤقت بعض المعلومات من صفحات الموقع (فلاش ورسومات وجافا سكريبت و CSS) في متصفح المستخدم. في التشغيل التالي ، يتم تنزيل هذه الملفات على الفور من المتصفح ، مما يمنح الموقع سرعة إضافية.

يمكنك تمكين التخزين المؤقت عن طريق إضافة رأس انتهاء الصلاحية إلى كود HTML. يتم تخزين مواقع WordPress بسهولة مؤقتًا باستخدام تثبيت المكونات الإضافية مع وظائف مجانية أو مجانية جزئيًا ، مثل W3 Total Cache أو Cache Enabler أو Zen Cach.

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

7. استخدم CDN

شبكة توصيل المحتوى - سلسلة من الخوادم المنتشرة في مراكز البيانات حول العالم لزيادة سرعة نقل المحتوى إلى الزائرين. كلما اقترب الزائر جغرافيًا من خوادم CDN ، زادت سرعة نقل حزم البيانات من الموقع.

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

8. تحسين الرسومات والفيديو

يجب تحديد تنسيق الرسومات والفيديو الصحيح ، حيث يؤثر تنسيق الملف بشكل مباشر على السرعة التي يتم بها تقديم المعلومات للزوار.

التنسيقات الموصى بها لمحتوى ويب مختلف:

• SVG - لشعارات المتجهات وعناصر واجهة بسيطة ؛
• PNG - للمخططات والشعارات غير المتجهية ؛
• JPG - للصور الفوتوغرافية والصور ؛
• MPEG4 - للفيديو والرسوم المتحركة.

يتوفر أيضًا تنسيق WEBM جديد نسبيًا للفيديو والرسوم المتحركة. في معظم الحالات ، يوفر حجم فيديو أصغر بنفس الجودة. ومع ذلك ، فإن النموذج لديه دعم مستعرض محدود (على سبيل المثال ، لا يوجد دعم في مستعرض macOS / iOS Safari). لذلك ، يوصى باستخدام ملف WEBM كمصدر فيديو ذي أولوية وتثبيت MPEG4 كمصدر بديل. يمكنك أيضًا استخدام MPEG4 الوحيد إذا كانت المشاركة غير مقبولة أو غير ملائمة.

بشكل منفصل ، نلاحظ أن تنسيق المتجه (SVG) يسمح بالقياس دون فقدان جودة الرسومات.

مراحل تحسين الصورة

الخطوة 1 - تصغير حجم الصورة.

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

لتجنب فقدان السرعة عند تحميل الصور ، ستساعد برامج تحرير الرسوم المضمنة في نظام التشغيل ، مثل Preview (Mac) أو Microsoft Paint (Windows) ، بالإضافة إلى الخدمات عبر الإنترنت ذات الوظائف المماثلة. يتطلب العمل معهم الحد الأدنى من المهارات في العمل مع الرسومات.

الخطوة 2 - قم بضغط الملف قبل التنزيل.

حتى بعد تحسين حجم الصورة ، يظل "وزنها" عادةً بعيدًا عن المستوى الأمثل. تساعد الخدمات المريحة والمجانية مثل ImageResize أو TinyPNG على تقليل الحجم دون فقدان جودة الصورة. معظم العمليات هنا مؤتمتة. يحتاج المستخدم فقط إلى تحميل الملفات وتنزيلها مضغوطة بالفعل إلى الحجم الأمثل للصورة.

9. تطبيق ضغط ملف Gzip

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

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

يتم ضغط ملف Gzip لتقليل عدد الطلبات إلى الخادم من المستعرض. ضع هذه التقنية في تقليل الوزن الأولي للملفات إلى 70٪ لتسريع التنزيل.

طريقة لتضمين ضغط Gzip

أضف مقتطف الشفرة التالي إلى ملف تكوين خادم الويب ".htaccess".

على خادم اباتشي

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

على خادم Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. تغيير الاستضافة

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

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

الشيء الأكثر أهمية هو…

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

تحتاج أيضًا إلى فهم أن هناك معلمتين لسرعة تحميل الصفحة.

الأول هو السرعة التي يتم بها عرض المحتوى (في هذه المرحلة ، تكون الصفحة مفتوحة بالفعل وتظهر للمستخدم ، بينما يظل مؤشر الصفحة الشفافة معروضًا حتى يتم توصيل جميع الملفات الثابتة والنصوص غير المتزامنة).

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

استنتاج

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