Презентация «WebMarkupMin – HTML-минификатор для платформы .NET» с MskDotNet Meetup #25

АНДРЕЙ ТАРИЦЫН
taritsyn@gmail.com
www.taritsyn.ru
Веб-разработчик
HTML-минификатор для платформы .NET

1. HTML-минификация
2. Общая информация о WebMarkupMin
3. Ядро и внешние минификаторы
4. ASP.NET Core расширения
5. ASP.NET 4.X расширения
6. Эффективность HTML-минификации
7. Кто использует WebMarkupMin
8. Альтернативные решения
9. Выводы
План доклада
2

Зачем нужна HTML-минификация?
4//developers.google.com/speed/pagespeed/insights

Итак, что нужно сделать, чтобы улыбка не сходила с лица, а конкуренты
побежали в аптеку за антидепрессантами:
• Перестать писать кавычки в тэгах. …
• Похоронить все тэги <meta name="generator">. …
• Не писать пробелы в <meta name="keywords">, …
• Поганой метлой все комментарии прогнать. …
• Не называйте картинки длинными именами. …
1990-е: Ручная HTML-минификация
“
Ководство: § 17. Паранойя
оптимизатора, 1998 год
АРТЕМИЙ ЛЕБЕДЕВ
5

• HTML Shrinker - //thepluginsite.com/products/htmlshrinker/index.htm
• Absolute HTML Compressor - //www.alentum.com/ahc/
• Оптимизатор HTML файлов
• HTML Source Cleaner
• Anetto HTML Optimize!
• HTMLCompact
• HTML Code Cleaner - //www.htmlcodecleaner.com-http.com/
• HTMLOpt - //www.alonewolfsoft.ru/html_optimizer.htm
• Absolute HTML Optimizer
2000-е: Windows-приложения для
HTML-минификации…
6

…2000-е: Windows-приложения для
HTML-минификации
7

1. HtmlCompressor Сергея Ковальчука (Java) - //github.com/serg472/htmlcompressor
2. HTML Minifier Юрия Зайцева (Node.js) - //github.com/kangax/html-minifier
2010-е: Кроссплатформенные библиотеки
для HTML-минификации
8

Основные техники HTML-минификации…
Удаление HTML-комментариев из тегов
style и script
Использование упрощенного DOCTYPE:
<!DOCTYPE html>
Использование мета-тега charset:
<meta http-equiv=Content-Type
content="text/html;charset=utf-8">
→ <meta charset=utf-8>
Удаление пустых атрибутов:
<span style=""> → <span>
Удаление/сворачивание ненужных
пробельных символов
Удаление HTML-комментариев
Удаление ненужных кавычек из
атрибутов:
<p class="foo"> → <p class=foo>
Удаление необязательных конечных
тегов:
<p>…</p> → <p>…
Отказ от XHTML-синтаксиса:
<input … checked="checked" /> →
<input … checked>
9

…Основные техники HTML-минификации
Удаление тегов без содержимого
Удаление избыточных атрибутов:
<input type="text"> → <input>
Удаление протоколов HTTP и HTTPS из
URL:
http://example.com → //example.com
Удаление псевдо-протокола JavaScript из
событийных атрибутов:
onclick="javascript:…" →
onclick="…"
Минификация CSS-кода из тегов style и
атрибутов style
Минификация JS-кода из тегов script,
событийных атрибутов и атрибутов href
10

Общая информация о WebMarkupMin
11

WebMarkupMin – это очень зрелый минификатор, не только для HTML, но
также для XML и XHTML, а также для тегов script и style, встроенных в ваш
HTML. Они предоставляют множество NuGet пакетов для подключения к
вашим ASP.NET приложениям, как для ASP.NET 4.x использующих MVC,
HttpModules, WebForms(!), так и к счастью для нас, ASP.NET Core.
Что такое WebMarkupMin?
12
“
HTML minification using
WebMarkupMin in ASP.NET Core,
2016 год
ЭНДРЮ ЛОК

• Проект существует с 2013 года
• Репозиторий проекта на Github - //github.com/Taritsyn/WebMarkupMin
• Объемная вики-документация - //github.com/Taritsyn/WebMarkupMin/wiki
• Поддерживает .NET Framework 4.X и .NET Core
• Более 160 звезд на GitHub
• Более 177 тысяч загрузок через NuGet
• Более 20 программных продуктов используют WebMarkupMin
• Известно около 200 сайтов, на которых установлен WebMarkupMin
Что нужно знать о WebMarkupMin
13

Модули WebMarkupMin
ASP.NET-расширения
• WebMarkupMin.AspNet.Common
• WebMarkupMin.AspNet4.Common
• WebMarkupMin.AspNetCore1
• WebMarkupMin.AspNetCore2
• WebMarkupMin.AspNet4.HttpModules
• WebMarkupMin.AspNet4.WebForms
• WebMarkupMin.AspNet4.Mvc
Ядро
• WebMarkupMin.Core
Внешние CSS- и JS-
миникаторы
• WebMarkupMin.MsAjax
• WebMarkupMin.Yui
• WebMarkupMin.NUglify
14

Ядро и внешние минификаторы
15

Пример использования класса HtmlMinifier
string htmlInput = File.ReadAllText("input.html");
var htmlMinifier = new HtmlMinifier();
MarkupMinificationResult result = htmlMinifier.Minify(htmlInput, generateStatistics: true);
if (result.Errors.Count == 0)
{
if (result.Statistics != null)
{
Console.WriteLine("Saved: {0:N2}%", result.Statistics.SavedInPercent);
}
Console.WriteLine("Minified content:{0}{0}{1}", Environment.NewLine, result.MinifiedContent);
}
else
{
IList<MinificationErrorInfo> errors = result.Errors;
Console.WriteLine("Found {1} error(s):{0}", Environment.NewLine, errors.Count);
foreach (var error in errors)
{
Console.WriteLine("Line {1}, Column {2}: {3}{0}", Environment.NewLine,
error.LineNumber, error.ColumnNumber, error.Message);
}
}
16

Пример подключения внешних
минификаторов
…
using WebMarkupMin.NUglify;
…
ICssMinifier nuglifyCssMinifier = new NUglifyCssMinifier();
IJsMinifier nuglifyJsMinifier = new NUglifyJsMinifier();
var htmlMinifier = new HtmlMinifier(cssMinifier: nuglifyCssMinifier,
jsMinifier: nuglifyJsMinifier);
…
17

ASP.NET Core расширения
18

Пример настройки и подключения в
ASP.NET Core…
…
using WebMarkupMin.AspNetCore2;
…
public void ConfigureServices(IServiceCollection services)
{
…
services.AddWebMarkupMin(options => {
options.AllowMinificationInDevelopmentEnvironment = true;
options.AllowCompressionInDevelopmentEnvironment = true;
})
.AddHtmlMinification()
.AddHttpCompression()
;
services.AddMvc().SetCompatibilityVersion(…);
}
…
Файл Startup.cs:
19

…Пример настройки и подключения в
ASP.NET Core
Файл Startup.cs:
…
using WebMarkupMin.AspNetCore2;
…
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
…
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseWebMarkupMin();
app.UseMvc();
}
…
20

ASP.NET 4.X расширения
21

Пример настройки в Web Forms и MVC…
…
using WebMarkupMin.AspNet4.Common;
…
public class WebMarkupMinConfig
{
public static void Configure(WebMarkupMinConfiguration configuration)
{
configuration.AllowMinificationInDebugMode = true;
configuration.AllowCompressionInDebugMode = true;
…
}
}
…
Файл App_Start/WebMarkupMinConfig.cs:
22

…Пример настройки в Web Forms и MVC
…
using System.Web.Routing;
using WebMarkupMin.AspNet4.Common;
…
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
…
RouteConfig.RegisterRoutes(RouteTable.Routes);
WebMarkupMinConfig.Configure(WebMarkupMinConfiguration.Instance);
…
}
}
…
Файл Global.asax.cs:
23

Пример настройки в Web Pages
…
@using WebMarkupMin.AspNet4.Common
…
@{
WebMarkupMinConfiguration configuration = WebMarkupMinConfiguration.Instance;
configuration.AllowMinificationInDebugMode = true;
configuration.AllowCompressionInDebugMode = true;
…
}
Файл _AppStart.cshtml:
24

Пример подключения HTTP-модулей
<?xml version="1.0" encoding="utf-8"?>
<configuration>
…
<system.webServer>
<modules>
…
<add name="HtmlMinificationModule"
type="WebMarkupMin.AspNet4.HttpModules.HtmlMinificationModule, WebMarkupMin.AspNet4.HttpModules" />
<add name="HttpCompressionModule"
type="WebMarkupMin.AspNet4.HttpModules.HttpCompressionModule, WebMarkupMin.AspNet4.HttpModules" />
…
</modules>
…
</system.webServer>
…
</configuration>
Файл Web.config:
25

Пример подключения в Web Forms
…
using WebMarkupMin.AspNet4.WebForms;
…
public partial class About : MinifiedAndCompressedHtmlPage
{
…
}
…
Файл Code Behind ASPX-страницы:
26

Пример подключения в MVC на уровне
действия контроллера
…
using WebMarkupMin.AspNet4.Mvc;
…
public class HomeController : Controller
{
…
[CompressContent]
[MinifyHtml]
public ActionResult About()
{
…
}
…
}
}
…
Файл контроллера:
27

Пример подключения в MVC на уровне всего
приложения
…
using WebMarkupMin.AspNet4.Mvc;
…
public class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
…
filters.Add(new CompressContentAttribute());
filters.Add(new MinifyHtmlAttribute());
…
}
}
…
Файл App_Start/FilterConfig.cs:
28

Эффективность HTML-минификации
29

Минификация без обработки CSS- и JS-кода
30* - размеры веб-страниц указаны в килобайтах
Сайт Оригинальный
размер
Размер после
минификации
Gzip-сжатия
и Gzip-сжатия
Экономия
без учета
Gzip-сжатия
Экономия с
учетом
Gzip-сжатия
afisha.ru 242,55 203,55 31,12 29,68 16,08% 4,63%
concert.ru 208,93 131,88 16,43 13,98 36,88% 14,91%
dodois.com 42,29 26,36 7,28 5,98 37,68% 17,85%
finam.ru 723,71 694,76 79,50 77,81 4,00% 2,12%
intourist.ru 134,25 111,70 15,19 13,76 16,80% 9,44%
moskva.mts.ru 191,29 150,90 24,39 21,91 21,11% 10,15%
ozon.ru 123,03 115,02 25,03 24,34 6,51% 2,75%
pochtabank.ru 119,01 105,99 21,01 19,57 10,94% 6,84%
renins.com 38,07 28,58 6,20 5,44 24,93% 12,26%
rusnano.com 46,95 29,09 8,29 7,07 38,04% 14,78%
21,30% 9,57%

Минификация с обработкой CSS- и JS-кода
31* - размеры веб-страниц указаны в килобайтах
Сайт Оригинальный
размер
Gzip-сжатия
и Gzip-сжатия
Экономия
без учета
Gzip-сжатия
Экономия с
учетом
Gzip-сжатия
afisha.ru 242,55 193,31 31,12 28,59 20,30% 8,15%
concert.ru 208,93 130,54 16,43 13,72 37,52% 16,49%
dodois.com 42,29 26,04 7,28 5,87 38,43% 19,34%
finam.ru 723,71 675,58 79,50 76,81 6,65% 3,38%
intourist.ru 134,25 111,48 15,19 13,64 16,96% 10,20%
moskva.mts.ru 191,29 137,43 24,39 20,37 28,15% 16,49%
ozon.ru 123,03 109,46 25,03 23,52 11,03% 6,02%
pochtabank.ru 119,01 97,32 21,01 19,17 18,23% 8,76%
renins.com 38,07 27,44 6,20 5,17 27,93% 16,69%
rusnano.com 46,95 28,47 8,29 6,87 39,36% 17,13%
24,46% 12,27%
+3,16% +2,70%
+7,04%
+7,29%

Кто использует WebMarkupMin
33

Проекты Мэдса Кристенсена
• Web Essentials 2013 - //github.com/madskristensen/WebEssentials2013
• Web Essentials 2015 - //github.com/madskristensen/WebEssentials2015
• Bundler and Minifier - //github.com/madskristensen/BundlerMinifier
• MiniBlog - //github.com/madskristensen/MiniBlog
• Miniblog.Core - //github.com/madskristensen/Miniblog.Core
• StaticWebHelper - //github.com/madskristensen/StaticWebHelper
Другие проекты
• Wyam - //wyam.io
• Pagespeed Tools for NopCommerce - //www.foxnetsoft.com/noppagespeedtools
Программное обеспечение
34

Сайты мировых брендов
www.swedishmatch.com
www.giant-bicycles.com
35
www.fxpro.com
www.sway.com www.kempinski.com

Альтернативные решения
36

HTML-минификаторы
• ZetaProducerHtmlCompressor - //github.com/UweKeim/ZetaProducerHtmlCompressor
• HtmlCompressor.Core - //github.com/joshcomley/HtmlCompressor.Core
• NUglify Александра Мютэля - //github.com/xoofx/NUglify
Минификаторы представлений ASP.NET
• Meleze.Web - //github.com/meleze/Meleze.Web
• RazorHtmlMinifier.Mvc5 - //github.com/tompazourek/RazorHtmlMinifier.Mvc5
• HTML Minifier Дина Хьюма - //github.com/deanhume/html-minifier
Альтернативные решения
37

1. HTML-минификация – это уже стандартная процедура при разработке веб-
приложений
2. Позволяет сократить размер веб-страницы в среднем на 21-24%
3. Позволяет увеличить скорость рендеринга веб-страницы в браузере
4. При использовании вместе с Gzip-сжатием с помощью HTML-минификации можно в
среднем сэкономить 9-12%
5. В ASP.NET-приложениях рекомендуется кэшировать результат HTML-минификации
Выводы
39

1. Проект WebMarkupMin на GitHub - //github.com/Taritsyn/WebMarkupMin
2. Документация WebMarkupMin - //github.com/Taritsyn/WebMarkupMin/wiki
3. Сайт WebMarkupMin Online - //webmarkupmin.apphb.com
4. А. Лебедев. Паранойя оптимизатора -
//web.archive.org/web/20020615132812/http://www.artlebedev.ru/kovodstvo/paragraphs
/17.html
5. Ю. Зайцев. Optimizing HTML - //perfectionkills.com/optimizing-html/
6. Э. Лок. HTML minification using WebMarkupMin in ASP.NET Core - //andrewlock.net/html-
minification-using-webmarkupmin-in-asp-net-core/
7. М. Кристенсен. Effects of GZipping vs. minifying HTML files -
//madskristensen.net/blog/effects-of-gzipping-vs-minifying-html-files
Ссылки
40

АНДРЕЙ ТАРИЦЫН
taritsyn@gmail.com
www.taritsyn.ru
Веб-разработчик
Спасибо за внимание!

Презентация «WebMarkupMin – HTML-минификатор для платформы .NET» с MskDotNet Meetup #25

More Related Content

Similar to Презентация «WebMarkupMin – HTML-минификатор для платформы .NET» с MskDotNet Meetup #25 (8)

Презентация «WebMarkupMin – HTML-минификатор для платформы .NET» с MskDotNet Meetup #25