معمولا تیم هایسئوبرای افزایش سرعت سایت، فایل هایcss , javascript  را فشرده سازی می کنند. این فشرده سازی  باعث می شود سایت با سرعت بهتری برای کاربران بارگذاری شود. اما برخی تیم ها می خواهند نهایت استفاده را از فشرده سازی کسب کنند، minifyو  فشرده سازی کدهایhtmlرا نیز انجام می دهند. در این مقاله می خواهیم نحوهminifyو فشرده سازی کدهایhtmlرا درasp.net coreآموزش دهیم.

تفاوت  Minify (کوچک کردن)  و Compressing (فشرده سازی)

قبل از پرداختن به مبحث اصلی بهتره تفاوت کوچک کردن و فشرده سازی را توضیح دهیم.

minify: در کوچک کردن تمامی فضاهای سفید(فاصله های داخل کد) و همه کامنت ها و کدهای غیر ضروری از فایل حذف می شوند.این کار باعث می شود حجم فایل کاهش یابد، به این نکته نیز باید توجه داشت که این کار نباید تغییری در نحوه ی عملکرد فایل ها ایجاد کند.

compressing: در فشرده سازی از یک الگوریتم فشرده سازی (مانندgzip)  استفاده می شود و اگر مرورگر کاربر ازgzip  پشتیبانی کند سرور تمامی فایل هایCss  و JavaScriptو HTML  را فشرده می کند و برای مرورگر ارسال می کند.همه مرورگر های جدید ازgzipپشتیبانی می کنند. الگوریتمgzipفقط فایل هایHTML , Css,  JavaScriptرا فشرده می کند و تصاویر و بقیه فایل های سایت را نمی توان با این روش فشرده سازی کرد.

چرا فایل هایhtmlراminify می کنیم؟

در پاسخ این سوال که چرا ما باید فایل هایhtmlراminifyکنیم باید گفت؛ بارها و بارها ثابت شده است که کاربران از بازدید صفحاتی که بیشتر از 2 الی 3 ثانیه بارگذاری آن طول می کشد منصرف شده و به سایت دیگری برای بازدید مراجعه می کنند. پس نتیجه می گیریم که هرچه صفحات سایت با سرعت بهتری بارگذاری شوند بازدید بیشتری داریم و این رابطه مستقیمی با فروش و درآمد از سایت دارد، بنابراین سرعتی که می توانیم اطلاعات را از طریق مرورگر به کاربر ارائه دهیم بسیار مهم است.

Minifyکردن فایل ها، بهینه سازی عملکرد است که به منظور کاهش حجم انتقال داده ها از طریق شبکه طراحی شده است. ساده ترینminifyکردن از بین بردن فضاهای خالی در بین کدها است، درminifyهای پیشرفته به تغییر نام متغیرها و متدها به کاراکترهای کمتر و بازنویسیif-elseها می باشد که باعث می شود حجم بیشتری را از فایل اصلی کم کند.

کتابخانه هایJavascriptو فایل هایCssاغلب درCDNهای عمومی موجود هستند و از آنجا که حتما نیازی نیست این فایل ها از سرور خودتون بارگذاری شوند، می توانید برای استفاده از این فایل ها ازCDNهای معتبر استفاده کنید این کار خودش باعث افزایش عملکرد برای شما می شود. ولی فایل هایHTMLهمیشه باید مستقیما از سرور شما بارگذاری شوند و ازطرفی هم اولین بخشی است که برای بارگذاری صفحه ارسال می شود، بنابراین ارسال کدهایhtmlبا سریعترین زمان ممکن به مرورگر بسیار مهم است.

چرا به صورت پیشفرض کدهای html فشرده سازی نمی شوند؟

با توجه به مزایایی کهminifyکردن کدهایhtmlبرای ما دارد شاید تعجب کنید که چرا به صورت پیشفرض از روش های که برایminifyکردن کدهایcss, jsاستفاده میکنیم برایhtmlهم استفاده نمی کنیم.

فایل هایCss , JavaScriptدر یک پروژه وب معمولا ثابت هستند و شما قبل ازbuildو آپلود پروژه روی سرور می توانید این فایل ها را یک بارminifyو بسته بندی کنید و مطمئن هستید تا ورژن بعدی که آپلود می کنید این فایل ها تغیری نمی کنند و نیازی به بروزرسانی آنها نیست.

اما کدهایHTMLیک برنامه داینامیک هستند و بر اساس شرایط موجود این کدها ایجاد می شوند و در هر شرایطی یک کد خاص تولید می شود. سایت یک فروشگاه اینترنتی مانند دیجی کالا را در نظر بگیرید، بسته به این که کاربر لاگین کرده باشد یا نه، کالا موجود باشد یا نه، مجموع امتیازات محصول، تعداد و متن نظرات محصول و... کدهایHTMLمختلفی به صورت خودکار برای همان تک صفحه تولید می شود.

با توجه به این که کدهایHTMLاستاتیک نیستند ما نمی توانیم همانند فایل هایCSS , JavaScriptآنها را قبل آپلود سایتminifyکنیم. چون کدهایHTML  به صورت خودکار تولید می شوندminifyرا باید در زمان اجرا انجام دهیم.

گاهی اوقات به این نکته نیز اشاره می شود که فشرده سازی فایل ها در سرور توسطgzipانجام می شود و داده ها قبل از ارسال به مرورگر ممکن است تا 70% فشرده شوند، به همین دلیلminifyکردن فایل هایHTMLبرای ما ارزش چشمگیری خلق نمی کند. اما توجه داشته باشید که فشرده سازی سمت سرور توسطgzipبرای زبان نشانه گذازی مانندHTMLبسیار موثر است  ولی باminifyکردن کدهایhtmlنیز می توانیم درصد خوبی از حجم دیتا را کم کنیم در ادامه  نشان می دهیم که  این کار برای ما چه دست آورد هایی دارد.

تا چه اندازه می توانیم این فایل ها را فشرده سازی کنیم؟

آقای اندرولاک در مقاله ای که در مورد فشرده سازی فایل هایHTMLنوشته است، در آن تحقیقی انجام داده بود که تا چه اندازه باgzipوHTMLمی توانیم فشرده سازی را انجام دهیم. او این آزمایش را بر روی چند سایت معتبر دنیا و صفحه قالب پیش فرضAsp.net انجام داد. نتایج بدست آمده از این تحقیق را در تصویر زیر می بینیم.

همانطور که در تصویر مشاهده کردید فشرده سازی توسطgzipبخش عمده ای از کار را انجام می دهد. اما فشرده سازی کدهایHTMLقبلgzip می تواند 5 الی 15 درصد بیشتر فشرده سازی را انجام دهد، این عددی نیست که بتوان آن چشم پوشی کرد.

فشرده سازی HTML در زمان اجرا

بهترین زمان فشرده سازیHTMLقبل از ارسال داده ها به مرورگر و قبل از فشرده سازیgzipاست. زیرا در این مرحله شماHTMLخام تولید شده را در اختیار دارید و نیازی نیست خود را درگیر قسمت های پویای تولید کدهایHTMLنمایید، و در این مرحله کد مورد نظر تولید شده است.

 به دلیل اینکه درهر باراجرا ممکن استHTMLتولید شده متفاوت باشد،HTMLفشرده شده را نمی توانیم ذخیره کنیم و در هر بار اجرا باید عملیات فشرده سازی را انجام دهیم، و خود این پردازش مقداری تأخیر در پاسخ به مرورگر ایجاد می کند که به ناچار باید این مورد را بپذیریم، البته با حجم 5 الی 15 درصد فشرده سازی که به ما می دهد در مقابل این تأخیر ارزش بیشتری دارد.

برایminifyکردن فایل هایhtmlبرای هر تکنولوژی ابزاری های توسعه داده شده است که می توانیم برای این کار از آنها استفاده کنیم. در این مقاله برایAsp.Net Core ازWebMarkupMinبرایminifyکردن استفاده می کنیم. برای ورژن های قبلیAsp.NetازMeleze.WebوMads WitheSpaceModule  می توانید استفاده کنید.

Minify کردن فایل های HTML در Asp.Net Core

کتابخانهWebMarkupMinیک فشرده ساز برای کدهایHTML, XML, XHTMLاست. این کتابخانه کدهایCssوJavaScriptتعبیه شده در کدهایHTMLرا نیزminifyمی کند.

برای شروع کتابخانه  WebMarkupMinرا ازNugetبر روی پروژه نصب کنید. دقت کنید که نسخهWebMarkupMin.Coreرا نباید نصب کنید. با توجه به نسخهAsp.Net Coreباید ورژن مناسب را نصب کنید.

Asp.Net Core 1

Install-Package WebMarkupMin.AspNetCore1 

Asp.Net Core 2

Install-Package WebMarkupMin.AspNetCore2

Asp.Net Core 3

Install-Package WebMarkupMin.AspNetCore3 

این فشرده سازHTMLبه عنوان یکmiddlewareبرایAsp.Net Coreپیاده سازی شده است. پس از نصب آن را در متدConfigureدر فایلStartup.csپروژه ثبت کنید.

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();

    app.UseWebMarkupMin();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

ترتیب ثبتmiddlewareها درAsp.Net Coreمهم است و به ترتیب از بالا به پایین اجرا می شوند. در این مثال ماWebMarkupMinرا پس از (( UseStaticFilseقرار دادیم. و این کار باعث می شود اگر هندلرStatic Fileدر حال سرویس دادن به یک فایل باشدminifierیا فشرده سازی اعمال نشود.

در پایان نیز باید پیکربندی مربوط به میان افزارWebMarkupMin را در متد ConfigureService در فایل Startup.cs انجام دهید. این فشرده ساز گزینه های متفاوتی را ارائه می دهد که بر اساس نیازمان باید از این گزینه ها استفاده کنیم.

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();

    services.AddWebMarkupMin(
        options =>
        {
            options.AllowMinificationInDevelopmentEnvironment = true;
            options.AllowCompressionInDevelopmentEnvironment = true;
        })
        .AddHtmlMinification(
            options =>
            {
                options.MinificationSettings.RemoveRedundantAttributes = true;
                options.MinificationSettings.RemoveHttpProtocolFromAttributes = true;
                options.MinificationSettings.RemoveHttpsProtocolFromAttributes = true;
            })
        .AddHttpCompression();
}

در این سرویس می توانیم گزینه های minify  که می خواهیم اعمال شوند را انتخاب کنیم. در  پیگربندی بالا ماminifyو فشرده سازی را فعال کردیم، تعدادی از گزینه های  minifyرا هم فعال کردیم که یکی از این گزینه ها باعث می شودAttributeهایHTMLرا در جاهایی که نیاز نیستند را حذف کند. به عنوان مثال ویژگی“Text”در تگInput و   پروتکلhttpوhttpsدر لینک ها را حذف می کند. در ادامه مهمترین قسمت های که می توانیم برایminifyکردن از آنها استفاده کنیم را بررسی  می کنیم.

معرفی امکانات WebMarkupWin برای فشرده سازی HTML  

WhitespaceMinificationMode

این گزینه فضاهای سفید و خالی داخل متن را پاک می کند که باعث می شود تعداد کاراکترهای فایلHTMLخیلی کمتر شوند. برای این گزینه چهار حالت مختلف می توانیم در نظر بگیریم

• None: فضاهای خالی و سفید را حذف نمی کند.
• Safe: تمامی فضاهای سفید سندHTMLاز بالا تا پایین را حذف می کند. در این حالت چند کاراکتر فضای سفید با یک فضای واحد جایگزین می شود. تمامی فضاهای سفیدDOCTYPEحذف می شوند. کلیه فضاهای سفید از محتویات تگ های(html, head, body, meta, link,scriptو غیره)  حذف می شوند. فضاهای سفید و ویژگی های غیر ضروری از تگ های(li, dt, dd, rb, rtc, rp, option, tr, td, th )و غیره حذف می شوند.
• Medium: تمامی عملیاتSafeرا انجام می دهد و علاوه بر آن تمامی فضاهای سفید تگ هایBlock-Level مانند(address, article, aside, div, fieldset, form, h1-h6, header, main, nav, table, p, li, ul,)و غیره را حذف می کند.
• Aggressive: کلیه عملیات حالتMediumرا اجرا می کند و علاوه بر آن تمامی فضاهای سفید تگ های Inline-block مانند(a, b, br, button, code, img, input, lable, span, )و غیره را حذف می کند.

RemoveHtmlComments

تمامی کامنت گذاری های داخل کد که معمولا توسط برنامه نویسان انجام می شود را حذف می کند.

RemoveHtmlComments­FromScriptsAndStyles

تمامی کامنت گذاری های استایل ها و اسکریپت های داخل کد را حذف می کند.

RemoveCdataSections­FromScriptsAndStyles

فضاهای سفید ازCDATAرا حذف می کند.

UseShortDoctype

از نسخه کوتاه شده ی<!DOCTYPE html>استفاده می کند.

CustomShortDoctype

می توانیمDOCTYPEرا سفارشی سازی کنیم.

PreseveCase

این ویژگی باعث می شود نام تگ ها و نام اتریبیوت ها حفظ شود و در عملیاتminifyاین مقادیر حذف نشوند ( وقتی از انگولار استفاده می کنیم باید این گزینه را فعال کنیم).  

EmptyTagRenderMode

برای تگ های خالیHTMLمی تواند مقادیر زیر را بگیرد:

• NoSlash: بدونه اسلش برای مثال<br>
• SpaceAndSlash: با اسلش برای مثال</br>
• SpaceAndSlash: با فاصله و اسلش برای مثال</ br>

RemoveOptionalEndTags

حذف بسته شدن تگ های اختیاری برای(html, head, body, p, li, dt, dd, rb, rtc, rt, rp, optgroup, option, colgrup, thead, tfoot, tbody, tr, th, td)

RemoveTagsWithoutContent

تگ های بدونه محتوا را حذف می کند.این عملیات بر روی تگ هایth, tr, textarea, tdو تگ های برای آنهاclass, id, name, role, src  و اتریبیوت های سفارشی برای آنها استفاده شده است را حذف نمی کند.

CollapseBooleanAttributes

مقادیر اتریبیوت های از نوعBooleanرا حذف می کند (برای مثالchecked=”checked”بهcheckedتبدیل می شود.

 RemoveEmptyAttributes

اتریبیوت های بدونه مقدار را حذف می کند ( اتریبیوت های که در این عملیات بررسی می شوند عبارتند ازclass, id, name, style, title, lang, event attributes, action attribute of form, و اتریبیوت های مربوط به تگinput).

RemoveRedundantAttributes

مقادری که مقدار پیشفرض آن تگ باشد را حذف می کند مانند <form method="get" …> که اگرmethod=”get”را ننویسیم هم به صورت پیشفرض تگformبه صورتgetعمل می کند.

• <a id="…" name="…" …>
• <area shape="rect" …>
• <button type="submit" …>
• <form autocomplete="on" …>
• <form enctype="application/x-www-form-urlencoded" …>
• <form method="get" …>
• <img decoding="auto" …>
• <input type="text" …>
• <script src="…" charset="…" …>
• <script language="javascript" …>
• <textarea wrap="soft" …>
• <track kind="subtitles" …>

RemoveJsTypeAttributes

برای حذف اتریبیوت“text/javascript”از تگ های اسکریپت استفاده می شود.

 RemoveCssTypeAttributes

برای حذف اتریبیوت“text/css”از تگ لینک و استایل ها استفاده می شود.

RemoveHttpProtocol­FromAttributes

برای حذف پروتکلhttpاز لینک ها

RemoveHttpsProtocol­FromAttributes

برای حذف پروتکلhttpsاز لینک ها

MinifyEmbeddedCssCode

برای  minify  کدهایcssکه در اتریبیوتstyleنوشته می شود.

MinifyInlineCssCode

برایminifyکدهایcss  که در کدهایhtmlنوشته می شود.

MinifyEmbeddedJsCode

برایminifyکدهای نوشته شده در تگscript

MinifyInlineJsCode

برایminifyکدهایjsنوشته شده در اتریبیوت های رویداد ها و پیوند ها. آشنایی با اتریبیوت های تگ a

MinifyEmbeddedJsonData

برایminify  داده هایJSONدر تگ اسکریپت با نوعapplication/json.

برای مشاهده امکانات بیشتر می توانید به GitHub Wiki مراجعه کنید.

نتیجه گیری

در این مقاله ما اهمیتminifyکردن فایل هایhtml را بیان کردیم و نشان دادیم که انجام این کار چقدر در حجم دیتای کاربران ما و افزایش سرعت سایت می تواند موثر باشد.

در ادامه نیز نحوهminifyکردن توسط کتابخانهWebMarkupMinدرAsp.net Coreرا آموزش دادیم.