الإعلانات

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

في هذه المقالة ، سنستعرض الطريقتين الرئيسيتين لتقليص ملفات HTML ، ولماذا يجب تقليص ملفات HTML ، وكيفية التعامل معها.

الضغط مقابل التصغير

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

التصغير

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

نموذج لصفحة HTML:

هذا رأس
أرسل لي بريدًا على [email protected].
هذه فقرة جديدة!
هذه فقرة جديدة بخط غامق ومائل.

نموذج لصفحة HTML ، مصغر:

هذا رأس
أرسل لي بريدًا على [email protected].
هذه فقرة جديدة!
هذه فقرة جديدة بخط غامق ومائل.

الحجم الأصلي: 354. الحجم المصغر: 272. التوفير: 82 (23.16٪).

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

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

ضغط

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

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

مخطط الضغط الأكثر شيوعًا هو GZIP، وهو تنسيق ملف يستخدم ملف خوارزمية ضغط بدون فقدان كيف يعمل ضغط الملفات؟كيف يعمل ضغط الملفات؟ تعرف على أساسيات ضغط الملفات والفرق بين الضغط المفقود مقابل الضغط غير المفقود. اقرأ أكثر دعا DEFLATE.

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

ضع في اعتبارك سلسلة نصية مثل هذا (مثال مأخوذ من موقع GZIP):

بلا بلا بلا بلا - ثرثرة.

تتعرف الخوارزمية على التكرار التالي:

بلا بلا بلا بلا - ثرثرة.

الحدث الأول هو مرجعنا ، لذا اتركه:

بلا بلا بلا بلا - ثرثرة.

يشير التكرار الثاني إلى التواجد الأول ، الذي يكون خلفه خمسة أحرف وخمسة أحرف طويلة:

Blah b [5،5] {lah b} {lah b} lah.

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

Blah b [5،10] {lah b} lah.

ومره اخرى:

بلاه ب [5،15] لاه.

والخوارزمية ذكية بما يكفي لإدراك أن الأحرف الثلاثة التالية هي الأحرف الثلاثة الأولى في المرجع ، لذا فهي تمتد بثلاثة:

بلاه ب [5،18].

الآن فكر في ملف HTML نموذجي ومدى التكرار الموجود بداخله. تقريبا كل علامة ، مثل ، لها علامة إغلاق مقابلة ، مثل. علاوة على ذلك ، يتم تكرار العديد من العلامات طوال الوقت ، مثل, , , ، إلخ. تتكرر السمات أيضًا في كثير من الأحيان ، بما في ذلك صف دراسي, hrefو src. من السهل معرفة سبب فعالية ضغط GZIP مع HTML.

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

لماذا يجب عليك الضغط والتصغير

هناك فائدتان رئيسيتان ، وكلاهما حاسم في مشهد الويب المزدحم بالجوال اليوم.

تحميل أسرع للصفحة

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

استخدام عرض النطاق الترددي أقل

لنفترض أن لديك 10 ملفات ، يتم تصغير كل منها من 50 كيلوبايت إلى 45 كيلوبايت لتقليص إجمالي 50 كيلوبايت. لنفترض أن موقعك على الويب يخدم ما معدله 1000 زائر يوميًا ، حيث يبلغ متوسط ​​كل زيارة عشر صفحات. يقلل تصغير HTML وحده من استخدام النطاق الترددي الخاص بك بمقدار 50 ميجابايت في اليوم (1.5 جيجابايت في الشهر).

ضغط + تصغير

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

ولكن الأمر الرائع في تحسين HTML هو أنك لست مضطرًا لاختيار إما تصغير أو ضغط. يمكنك القيام بالأمرين معا! في الحقيقة أنت ينبغي قم بكليهما.

في المتوسط ​​، يمكنك توقع ضغط GZIP لتقليص ملف HTML بنسبة 70 إلى 90 بالمائة. باستخدام المثال أعلاه مع تقدير ضغط متحفظ ، ستنتقل ملفات HTML المصغرة من 45 كيلوبايت إلى 13.5 كيلوبايت لكل منها ، لتقلص إجمالي قدره 365 كيلوبايت. مقارنةً بالميزات غير المضغوطة / غير المضغوطة ، يتم الآن تقليل معدل نقل البيانات لموقعك بمقدار 365 ميجابايت في اليوم (11 جيجابايت شهريًا).

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

كيفية ضغط وتصغير HTML

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

وورد الإضافات

إذا قمت بتشغيل موقع WordPress ، فكل ما عليك فعله هو تثبيت مكون إضافي واحد ويمكنك جني فوائد كل من الضغط والتصغير.

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

اذا أنت فقط نريد التقليل ، نوصي تصغير HTML توصيل في. إنه بسيط ، ويدعم HTML / CSS / JS ، ويسمح لك بتعديل طريقة التصغير قليلاً (على سبيل المثال ما إذا كنت تريد الإزالة http: و https: من عناوين URL).

ثوابت HTML ثابتة

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

للتصغير ، استخدم إحدى هذه الأدوات:

• HTML كومبريسور
• Minifier HTML
• Minifier HTML (يختلف عن المذكور أعلاه)

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

تمكين ضغط GZIP

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

اتصل بخادم الويب الخاص بك باستخدام FTP ، ثم قم بإنشاء ملف يسمى .htaccess في الدليل الجذر. قم بتحرير ملف .htaccess للحصول على الإعدادات التالية:

 mod_gzip_on نعم mod_gzip_dechunk نعم ملف mod_gzip_item_include. (html؟ | txt | css | js | php | pl) $ mod_gzip_item_include معالج ^ 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 ^ ترميز المحتوى:. * gzip. *
 SetOutputFilter DEFLATE. 

لست متأكدا إذا كان الضغط يعمل على موقع الويب الخاص بك؟ اختبره باستخدام هذه الأداة.

للحصول على الكفاءات النهائية ، يجب عليك أيضًا تعرف على كيفية فحص CSS وتنظيفه وتحسينه 11 أدوات مفيدة للتحقق من ملفات CSS وتنظيفها وتحسينهاهل تريد تحسين كود CSS الخاص بك؟ ستساعد أدوات التحقق والمُحسِّن في CSS في تحسين كود CSS ، وبناء الجملة ، وتقليل صفحات الويب الخاصة بك. اقرأ أكثر .