مرکز آموزش اولین دیتا

آموزش نحوه رفع خطای Minify HTML در gtmetrix

0

خطای Avoid bad requests در GTmetrix که در بیشتر موارد جزء خطاهایی می باشد که در اکثر تست هایی که برای بررسی سرعت سایت انجام میگیرد به وجود می آید و در مقاله قبل به آموزش نحوه رفع و خطایابی آن پرداختیم.

آکادمی اولین دیتا در این مقاله به آموزش نحوه رفع خطای Minify HTML در gtmetrix می پردازد که با استفاده از این آموزش میتوانید به minify کردن صفحات در وردپرس و یا هر سیستم مدیریت محتوا بپردازید. منظور از Minify HTML این است که صفحات سایت ما که در قالب HTML برای مرورگر نمایش داده میشوند را طوری کنیم که تا جای ممکن از فضای آن بکاهیم.

اگر با HTML آشنایی داشته باشید همیشه یک سند html که می‌سازیم هر بخش از این سند دارای کدهایی هست که در هر خط وارد می‌کنیم که نمونه‌ای از آن را در زیر می‌بینید.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>…</title>
</head>
<body>
.
.
.
</body>
</html>

همانطور که در نمونه بالا میبینید هر بخش از تگ‌ها در یک خط به صورت مرتب شده قرار گرفتند که برای کسی که در حال کدنویسی است خوانا باشد و به راحتی بتواند کدها را از هم تفکیک و آنالیز کند. اما معایب این روش این است که همین فضاهای خالی و اینترهای مکرر که برای جدا کردن هر بخش می‌زنیم باعث ایجاد فضای هرز میشود که حجم صفحه را افزایش میدهد، پس بهتر است که با کنار هم قرار دادن کدها از حجم کلی فایل کم کنیم، هر چند که در کمترین حد ممکن هم حجم یک فایل کم می شود. البته موضوع فقط حجم نیست. در این حالت مشکل دیگری که وجود دارد این است که زمان خواندن از سرور و ارسال درخواست از یک صفحه خط به خط باید چک شود که باعث می شود مدت خواندن کل خطوط و رسیدن به انتهای آن مدت بیشتر طول بکشد. نمونه کد بالا را میشود به شکل زیر وارد کرد که به شکل فشرده و minify شده است.

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>…</title></head><body>...</body></html>

آموزش نحوه رفع خطای Minify HTML در gtmetrix

با ذکر یک مثال توضیح دادیم که منظور از Minify کردن یک سند در HTML این است که کدها را به صورت خلاصه بنویسیم و از فضاهای خالی که باعث بیشتر شدن حجم و افزایش مدت زمان خواندن میشود جلوگیری کنید. گاهی اوقات هم در برخی خطوط توضیحاتی درج می شود که برای توسعه دهنده کاربردی است، اما برای کسی که نیاز به مشاهده این سند دارد کاربردی ندارد. این خلاصه نویسی در کدها فقط مختص زبان HTML نیست و در زبان‌های دیگر هم میتوانید با بهینه سازی کردن آن سرعت لود را بهتر کنید. به صورت کلی minify کردن و کاهش حجم اسناد html میتواند در سه حالت ممکن وجود داشته باشد.

Minify HTML برای سایت‌های استاتیک

در این حالت سایت شما بدون هیچگونه CMS طراحی شده و از دیتابیسی هم استفاده نمی‌کنید. تنها فایل‌هایی که دارید شامل اسناد HTML، CSS، جاوا اسکریپت و… هستند که برای طراحی ظاهری مورد استفاده قرار می‌گیرند و برای مینیفای کردن آنها کافیست به همان روش مثال بالا اقدام کنید. برای این کار هم میتوانید از سایت‌های آنلاین استفاده کنید که با کلیک بر روی دکمه زیر میتوانید به یکی از این سایت‌ها دسترسی داشته باشید.

minifycode.com

پس از ورود به این سایت ، کافیست مشابه تصویر زیر کدهایی که در سند HTML شما قرار دارد را کپی کرده و در باکس این سایت قرار دهید.

پست های مرتبط

پس از قرار دادن کدها بر روی دکمه Minify HTML که کلیک کنید کدهای شما به صورت فشرده شده تهیه شده و مانند نمونه زیر به شما نمایش داده میشود که با قرار دادن در سند HTML میتوانید فضاهای خالی و کدهای توضیحات و غیرکاربردی را حذف کنید و هم اینکه از حجم فایل کم کنید.

Minify HTML برای سایت‌های پویا

این روش برای سایت‌هایی موثر است که از CMS برای این کار استفاده می‌کنند و محتوا مربوط به سایت از طریق دیتابیس در دسترس کاربران قرار میگیرد. در این حالت شما فایل HTML ندارید که بتوانید به روش بالا کدهای موجود در آن را بهینه کنید. شاید فکر کنید که مثلا چون وردپرس با زبان PHP طراحی شده پس می شود به همین روش عمل کرد و کدها را بهینه کرد. اما در این مورد اشتباه است، چرا که زبان php سمت سرور می باشد و داده‌هایی را از سرور میخواند و به شما نمایش میدهد. پس چه کدها به صورت مرتب نوشته شده باشند و چه به صورت فشرده شده در هر صورت تاثیری در نتیجه نهایی که در اختیار کاربر قرار میگیرد ندارند.

برای این حالت باید از افزونه‌های فشرده ساز استفاده کنید. برای این کار هم افزونه‌های مختلفی ساخته شده که هر کدام قابلیت‌ها و امکانات خاصی را به شما میدهد. اما پیشنهاد می‌کنم برای این کار از افزونه‌ای استفاده کنید که امکانات بیشتری در اختیارتان قرار بدهد که بتوانید علاوه بر minify html وردپرس قادر باشید که فایل‌های دیگری مانند جاوا اسکریپت و CSS را هم فشرده کنید.

استفاده از CDN

دو روش قبلی به شکلی بودن که میتوانستید فایل‌ها را بهینه کنید. اما یک حالتی هم وجود دارد که با استفاده از این حالت علاوه بر اینکه میتوانید همین کار فشرده سازی فایل‌های HTML را پیاده سازی کنید، به دلیل استفاده از شبکه توزیع محتوا CDN این امکان را هم دارید که داده‌ها را بر روی بستری به کاربران ارائه دهید که بر اساس موقعیت جغرافیایی از نزدیک‌ترین سرور برایشان در دسترس بگیرد. این کار میتواند باعث افزایش چند برابری سرعت سایت شما هم شود.

برای این کار میتوانید از کلودفلر استفاده کنید. قبل از هر کاری به راهنمای آموزش استفاده از Cloud Flare  مراجعه کنید و DNS های دامنه خود را بر روی کلودفلر تنظیم کنید. سپس در پنل کاربری کلودفلر مشابه تصویر زیر بر روی گزینه SPEED کلیک کرده و تیک سه گزینه javascript، css و HTML را فعال کنید.

با فعال کردن این گزینه کلیه فایل‌های سایت شما که بر روی سرورهای کلودفلر قرار دارند فشرده سازی شده و در زمان کوتاه‌تر و با سرعت بیشتری در دسترس خواهند بود.

امیدواریم این آموزش از آکادمی اولین دیتا هم مورد توجه و پسند شما قرار گرفته باشد و با استفاده از آن توانسته باشید اقدام به فشرده سازی فایل‌های HTML در وردپرس و یا هر سایت ساز دیگر کنید و خطای Minify HTML در gtmetrix را رفع کنید.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد .

Captcha loading...