در دنیای اینترنت حجم زیادی داده هرروز منتقل می‌شود که سایزهای متفاوت و اغلب بزرگی دارند. هر درخواست بازدید از سایت یا اپلیکیشن مقدار زیادی داده ردوبدل می‌کند که با توجه به میلیاردها درخواستی که هرروز انجام می‌شود، درمجموع حجم زیادی پیدا می‌کنند. با وجود این حجم انتقال داده، سرعت اینترنت نسبتاً بالاست و قادرید از سایت‌های موردعلاقه‌تان بازدید کنید. اما چه عاملی انتقال پرسرعت داده در اینترنت را ممکن می‌کند؟
با رشد وب‌سایت و افزایش محتوا، حجم فایل‌های HTML هم افزایش می‌یابد در نتیجه ممکن است مشکلاتی برای سرور و کاربران نهایی ایجاد شود. در چنین مواقعی فشرده‌سازی فایل HTML اهمیت زیادی پیدا می‌کند. در این مقاله هر آن‌چه باید در مورد فشرده سازی فایل‌های HTML بدانید را با شما به اشتراک می‌گذاریم. با ما همراه باشید.
چرا باید یک فایل HTML را فشرده کرد؟
با فشرده‌سازی HTML سرعت وب‌سایت را بهبود بخشیده و میزان مصرف پهنای را کاهش می‌دهد. فشرده سازی خروجی HTML همچنین باعث کاهش مصرف داده کاربر از سایت می شود. این کار را می‌توان با حذف جزئیات غیر ضروری و از بین بردن فضای اضافی فضای، شکست خط، کامنت HTML و غیره انجام داد با این حال ، فشرده سازی باعث کاهش خوانایی کد می شود. برای درک بهتر این موضوع وب‌سایتی را در نظر بگیرید که از مقادیر قابل توجهی کد HTML استفاده می‌کند. هر زمان که یک بازدیدکننده جدید به سایت شما وارد شود، مرورگر آن یک درخواست HTTPS برای صفحات موردنظر ارسال می‌کند که پس از یافتن آن، برای مرورگر ارسال می‌شود.
کد HTML بیشتر، به معنای صفحات بزرگ‌تر است و کاربران نهایی برای دریافت کامل صفحه، به زمان بیشتری نیاز دارند. همه می دانند که زمان بالای لود صفحه موجب ناامیدی بازدیدکنندگان می شود. اگر از ابزارهای فشرده‌سازی HTML سازگار با پروتکل HTTP استفاده می‌کنید، وب سرور شما می‌تواند صفحه را قبل از ارسال توسط سرور، فشرده کند.
در نهایت، مرورگر کاربر پس از دریافت صفحه، آن را از حالت فشرده خارج نموده و سرعت کلی را افزایش می‌دهد. البته این روند نیاز به قدرت CPU بیشتر در سمت سرور دارد و معمولاً پلن‌های میزبانی مدرن می‌توانند با استفاده از منابع اضافی، خود را با آن تطبیق دهند.
مثال: این فایل HTML بدون فشرده سازی است.
<html> <head> <!-- This is the content that shows in the browser tab --><title>Title Page</title> </head> <body> <!-- This is a comment. --><h1>Hello world!</h1> </body> </html> |
فایل HTML پس از فشرده سازی
<html><head><title>Title Page</title></head><body><h1>Hello world!</h1></body></html> |
تفاوت بین فشرده سازی HTML و minification
بسیاری از کاربران فشرده‌سازی (compression) را با کوچک‌سازی (minification) اشتباه می‌گیرند. با اینکه هر دوی این روش‌‌ها برای کاهش حجم یک فایل HTML مورد استفاده قرار می‌گیرند اما به دلیل به کارگیری روش‌های متفاوت برای رسیدن به هدف، جایگزین یکدیگر نیستند.
در روش Minification خطوط و کاراکترهای غیر ضروری را در کد HTML منبع حذف می‌شوند. در نتیجه، حجم کل فایل کم شده و عملکرد کد تغییری نمی‌کند. این فرآیند خودکار و ساده است و برای انجام دادن آن نیاز به دانش فنی زیادی نیست.
اما در روش Compression جایگزینی کدهای اضافی با اطلاعات مورد نیاز، حجم فایل را کاهش می‌دهد. فشرده‌سازی، داده‌های تکراری را حذف می‌کند که lossless compression یا “فشرده سازی بدون تلفات” نامیده می‌شود. بنابراین، هنگامی که HTML را به جای کوچک‌سازی، فشرده می‌کنید، هیچ‌گونه داده‌ای از دست نمی‌رود، با این حال فایل کم‌حجم‌تری دریافت می‌نمایید.
نحوه فشرده سازی فایل HTML
همانطور که در بالا ذکر شد، شکل معمول فشرده سازی یک فایل HTML، “بدون تلفات” یا “lossless” است. به این معنی که هیچ داده‌ای در طول فرآیند فشرده‌سازی از بین نمی‌رود اما جهت کاهش حجم، ویرایش می‌شود. برای انجام این کار 2 روش وجود دارد. استفاده از اپلیکیشن رایگان یا پریمیوم و روش دستی. البته ابزارهای تحت وبی هم برای فشرده سازی خودکار این گونه فایل‌ها وجود دارد.
بررسی گزینه‌های مختلف فشرده‌سازی می‌تواند به شما کمک کند تا تشخیص دهید کدام روش بهترین سرعت و حجم را ارائه می‌دهد. مثلا فرض کنید در مرحله کدنویسی و طراحی وب‌سایت هستید یا روی بهینه‌سازی سایت خود برای جذب ترافیک بیشتر تمرکز کرده‌اید. در این صورت، ممکن است در پلن هاست خود پهنای باند کافی برای توجیه فشرده‌سازی درون مرورگر، نداشته باشید. در این صورت استفاده از ابزارهای تحت وب منطقی به نظر نمی‌رسند.
اگر پس از بررسی همه جانبه به این نتیجه رسیدید که می‌خواهید از ابزار فشرده سازی استفاده کنید، پیشنهاد می‌کنیم از بهترین و معروف‌ترین ابزار این کار یعنی Gzip بهره ببرید.
Gzip چیست و چگونه کار می‌کند؟
ابزار Gzip متداول‌ترین متد فشرده‌سازی است که توسط سرویس‌دهندگان میزبانی وب و مرورگرها استفاده می‌شود تا محتوا را برای انتقال بدون دردسر در اینترنت فشرده کنند. جی زیپ بیشتر روی کد و فایل‌های متنی استفاده می‌شود و می‌تواند سایز فایل‌های JavaScript، CSS و HTML را تا ۹۰% کوچک کند. فایل‌های کوچک‌تر بازدیدکنندگان سایت را قادر می‌کنند تا آن‌ها را به‌راحتی دریافت کنند و سایت شما را با سرعت بیشتری بازدید کنند.
جی زیپ هیچ فایلی را در سمت سرور فشرده نمی‌کند بلکه فقط روی فایل‌هایی مانند HTML ، Stylesheets و JavaScript اجرا می‌شود و شامل تصاویر و سایر فایل‌های سایت نمی‌شود.
هنگامی‌که سرور یک درخواست بازدید را برای یک صفحه وب دریافت می‌کند، هدر درخواست را چک می‌کند تا شناسایی کند که آیا مرورگر، جی زیپ را پشتیبانی می‌کند. اگر پشتیبانی کند، ماک آپ صفحه را قبل از اجرای فشرده‌سازی تولید می‌کند. سپس جی زیپ، مارک آپ را به داده فشرده تبدیل می‌کند تا به کاربر منتقل شود. هنگامی‌که کاربر داده را دریافت می‌کند، مرورگرش آن را غیر فشرده می‌کند.
برای آگاهی از فعال بودن جی زیپ می‌توانید از خدمات برخی سایت‌ها و اکستنشن‌ها استفاده کنید که شامل سایت‌های Google page speed insights و GTmetrix و Whatsmyip و Varvy و Prorank و اکستنشن مرورگر Wappalyzer است.
فشرده‌سازی از طریق تنظیمات وب سرور فعال می‌شود. انواع وب سرور هر کدام ساختار متفاوتی دارند. مثلا برای وردپرس می‌توانید از پلاگین‌های cach که این ابزار را پشتیبانی می‌کنند؛ بهره ببرید. پلاگین‌هایی مانند WP Rocket و Total Cache W3 به‌صورت اتوماتیک کد فعال‌سازی را در فایل .htaccess سایت قرار می‌دهند. البته برای نوشتن در این فایل باید دسترسی لازم را داشته باشید.
استفاده از افزونه HTML Minifier
گفتیم که Minify خط‌ها و فاصله‌های اضافی را حذف می‌کند ولی کمپرس کدها را به هم متصل می‌کند که باعث از بین رفتن ساختار سایت می‌شود. و ممکن است سرعت لود را افزایش می‌دهد.
افزونه Minifier علاوه بر فضاهای خالی و کامنت‌های موجود در لابلای کدهای HTML، CSS و JS، تگ‌های پایانی نا لازم در 5 HTML را هم پاک می‌کند (چون در HTML5 برخلاف XHTML برخی تگ‌ها مثل <img> و <br> و غیره نیاز به بسته شدن ندارند). به علاوه این اختیار هم به شما داده می‌شود که در صورت لزوم کدهای جاوا اسکریپتی را هم که درون‌جایگذاری (inline) شده‌اند کوچک کنید.
سخن پایانی
در ۱۰ سال گذشته، صفحات وب معمولی سایزشان تا ۱.۲ مگابایت افزایش پیدا کرده است. هر چه تقاضای اطلاعات بیشتر می‌شود، تکنیک‌های لازم برای انتقال سریع و مؤثر داده هم ضرورت پیدا می‌کنند. با توجه به اینکه افزایش ۱۰۰ ثانیه‌ای سرعت لود صفحه می‌تواند فروش سایت را تا ۱% کاهش دهد، لازم است که خدمات دهندگان وب و کسب‌وکارها تا حداکثر توان مؤثر شوند.
فشرده سازی یک فایل HTML، برای بهبود زمان لود صفحه و محدود کردن استفاده از پهنای باند، حیاتی است و مزایایی از جمله کاهش هزینه‌های میزبانی وب و بهبود تجربه کاربر نهایی را به همراه خواهد داشت.