كيفية ضغط HTML وكود موقع الويب الآخر

يتوقع مستخدمو موقع الويب أن يكون المحتوى عالي الجودة ويمكن الوصول إليه بسرعة. هذا مهم لتجربة المستخدم المثلى. الخبر السار هو أنه من خلال بضعة أسطر من التعليمات البرمجية وبعض الحيل الصغيرة ، من الممكن تمامًا ضغط HTML وأكواد مواقع الويب الأخرى بنسبة 40٪ إلى 70٪ (وفي بعض الحالات أكثر). في هذه المقالة ، سأوضح لك كيفية القيام بذلك.

>> تحسين سرعة الصفحة: كيفية تحسين أوقات التحميل <<

لماذا ضغط كود الموقع؟

الآن يمكنك أن تطرح على نفسك السؤال: لماذا يجب أن أقوم بضغط الكود المصدري لموقع الويب الخاص بي؟ غير مضغوط ، يبلغ حجمه بضع مئات من الكيلو بايتات ، بعد كل شيء.

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

على سبيل المثال ، بالنسبة لعملاق التجارة الإلكترونية Amazon ، فإن تأخير وقت التحميل بمقدار 100 مللي ثانية يكلفهم حوالي 1 ٪ في المبيعات. ومن المتوقع خلال سنة مالية كاملة أن يؤدي ذلك إلى تكاليف تبلغ حوالي 245 مليون دولار. توضح هذه الأرقام التأثير الكبير الذي يمكن أن تحدثه سرعة تحميل موقع الويب.

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

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

هل من الممكن ضغط HTML و CSS و JavaScript؟

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

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

كيف يعمل ضغط كود الموقع

لنقل البيانات المضغوطة ، يجب على متصفح العميل أن يطلب أولاً نقل البيانات المضغوطة. يتم ذلك عبر طلب HTTP بالمواصفات "Accept-Encoding: gzip، deflate". يمكن تحديد إما طريقة واحدة أو عدة طرق ضغط ويقبل المثال كلاً من gzip و deflate البيانات المضغوطة.

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

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

يستجيب الخادم لطلب HTTP من العميل بما يسمى "استجابة HTTP". إذا كان الخادم يدعم الضغط ، يتم نقل البيانات بعد ذلك مضغوطة إلى العميل. في رأس استجابة HTTP ، يُبلغ الخادم ، على سبيل المثال ، "Content-Encoding: gzip". خلاف ذلك ، يتم إرسال المورد المطلوب غير مضغوط إلى العميل.

كيف يتم تفعيل ضغط كود الموقع؟

اعتمادًا على الخادم ، يمكن تنشيط ضغط الكود باستخدام ملف التكوين المناسب.

الشكل 1: رسم تخطيطي لضغط Gzip

تفعيل ضغط التعليمات البرمجية باستخدام htaccess

على خوادم الويب المتوافقة مع NCSA (على سبيل المثال ، Apache ، وهو خادم الويب الأكثر استخدامًا) ، يمكن تثبيت ضغط Gzip باستخدام ملف تكوين htaccess. للقيام بذلك ، يجب إدراج الكود التالي في ملف .htaccess:

<IfModule mod_deflate.c>
<FilesMatch "\\. (js | css | html | xml) $">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

أولاً ، باستخدام "<IfModule mod_deflate.c>" ، يتم إجراء اختبار لمعرفة ما إذا تم تثبيت mod_deflate للوحدة الإضافية. إذا كان الأمر كذلك ، فإن استخدام “<FilesMatch” \\. (js | css | html | xml) $ ”>” سيحدد أنواع الملفات التي يجب تطبيق المرشح عليها.

عوامل التصفية النموذجية لملفات JavaScript و CSS و HTML و XML. باستخدام "SetOutputFilter DEFLATE" ، يتم تحديد إرسال جميع الملفات التي تطابق النمط المحدد مسبقًا باستخدام مرشح DEFLATE. بعد ذلك ، يتم إغلاق المطابقة والاستعلام للوحدة مرة أخرى.

من الناحية النظرية ، يمكن أيضًا تطبيق عامل التصفية هذا على أنواع البيانات الأخرى (على سبيل المثال ملفات الصور .jpg أو .gif أو .png). يجب تعديل مطابقة الملف على النحو التالي:

“<FilesMatch” \\. (js | css | html | xml | png | jpg | gif) $ ”>”

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

تفعيل ضغط التعليمات البرمجية باستخدام PHP

إذا لم يكن لديك حق الوصول إلى ملف .htaccess الخاص بالخادم ، أو إذا كنت ترغب فقط في نقل ملفات فردية مضغوطة بواسطة gzip ، فلديك خيار تمكين الضغط باستخدام الرموز التالية:

<؟ php ob_start ("ob_gzhandler")؛ ؟>

إذا أمكن ، يجب وضع هذه الوظيفة قبل كود HTML الأول.

مثال:

<؟ php ob_start ( "ob_gzhandler" )؛ ؟>
<html>
<الجسم>
<p> يجب أن تكون هذه صفحة مضغوطة </ p>
</body>
</html>

5 مطبات لضغط كود الموقع

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

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

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

3. يجب تطبيق الضغط فقط على الملفات ذات الحجم المناسب. بالنسبة للملفات التي يبلغ حجمها بضع بايتات فقط ، يمكن أن يتسبب الضغط في زيادة حجم الملف عن الملف الأصلي.

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

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

مزيد من إجراءات التحسين للأكواد النحيفة

تصغير HTML والاستراتيجيات الأخرى

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

ما هو مفيد للغاية للمطور لا يحتاجه زاحف محرك البحث وبالتالي يجب إزالته. يُطلق على الاستغناء عن الأحرف غير الضرورية "تصغير" ويساعد على توفير وحدات البايت القيمة. يتم عرض مقدار البايتات المحفوظة عن طريق التصغير بشكل مثير للإعجاب في المثال التالي باستخدام jQuery مكتبة JavaScript المجانية.

بينما يبلغ حجم الملف الأصلي لإطار العمل في الإصدار 2.1.4 حوالي 242 كيلو بايت (jQuery 2.1.4.js (غير مضغوط)) ، فإن حجم الملف المصغر بعد إزالة الأحرف والتعليقات غير الضرورية لا يتجاوز 82 كيلو بايت (jQuery 2.1.4. min.js (مضغوط)). فقط عن طريق التصغير - بمعنى آخر ، عن طريق تقليل الأحرف غير الضرورية - يمكن تصغير حجم الملف بنحو 66٪. نتيجة رائعة.

كود المصدر قبل وبعد عملية التصغير

يعمل التصغير لملفات HTML و CSS و JavaScript.

علاوة على ذلك ، يمكن تصغير ملف jQuery المصغر بنسبة 65٪ أخرى باستخدام ضغط Gzip. من الإصدار الأصلي الذي يبلغ 242 كيلوبايت ، يوجد في النهاية 29.5 كيلوبايت فقط.

أدوات لتقليل كود CSS و JavaScript

لتقليل كود CSS ، يمكنك استخدام ، على سبيل المثال ، YUI Compressor أو cssmin.js. هناك أيضًا العديد من الأدوات التي يمكن استخدامها لتقليل كود JavaScript. توصي Google PageSpeed ​​Insights باستخدام Closure Compiler أو JSMin أو YUI Compressor.

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

الجمع بين ملفات CSS و JavaScript

غالبًا ما يتم تحميل العديد من ملفات CSS و JavaScript في رأس HTML لموقع الويب. في كل مرة يتم استدعاء هذه الطلبات ، يكون هذا طلب HTTP يحتاج إلى معالجته بواسطة المتصفح. يمكن للمتصفحات الحديثة فقط التعامل مع 2-8 طلبات HTTP من نفس المجال في نفس الوقت - كل الطلبات الأخرى يجب أن تنتظر.

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

الأمر نفسه ينطبق على ملفات JavaScript التي يتم تحميلها عبر عنصر <script>. هنا أيضًا ، يجب عليك التأكد من أنه إذا كان ذلك ممكنًا تقنيًا ، يتم دمج جميع ملفات JavaScript في ملف واحد.

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

بالإضافة إلى ذلك ، قد يكون استخدام النطاقات الفرعية أو شبكة توصيل المحتوى (CDN) أمرًا منطقيًا. يمكن إعادة تحميل البرامج النصية والموارد غير المطلوبة على الفور باستخدام AJAX.

ملخص لضغط كود الموقع

من خلال تقديم بيانات موقع الويب باستخدام Gzip أو Deflate ، يمكن تحقيق تحسن كبير في وقت التحميل. تعتبر كلتا الطريقتين رائعتين لضغط ملفات HTML و CSS و JavaScript. بالإضافة إلى ذلك ، يعد التصغير طريقة مفيدة أخرى للحفاظ على الشفرة ضئيلة.

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

لمنع موقع ويب من الحاجة إلى عدد كبير جدًا من طلبات HTTP ، يمكن تجميع ملفات CSS و JavaScript معًا. هذه فقط تشكل طلب HTTP ، مما يوفر موارد إضافية.

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

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