{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Dmitry Podgorniy, posts tagged: верстка", "home_page_url": "https:\/\/blog.dmitrypodgorniy.com\/tags\/verstka\/", "feed_url": "https:\/\/blog.dmitrypodgorniy.com\/tags\/verstka\/json\/", "icon": "https:\/\/blog.dmitrypodgorniy.com\/user\/userpic@2x.png", "author": { "name": "Дмитрий Подгорный", "url": "https:\/\/blog.dmitrypodgorniy.com\/", "avatar": "https:\/\/blog.dmitrypodgorniy.com\/user\/userpic@2x.png" }, "items": [ { "id": "116", "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/razbor-zadachi-s-konkursa-yandeksa-po-uskoreniyu-zagruzki-strani\/", "title": "Разбор задачи с конкурса Яндекса по ускорению загрузки страницы", "content_html": "

Описание, условие и код: https:\/\/github.com\/yandex-cs\/yac2013<\/a>
\nРезультаты (я семнадцатый): http:\/\/cs.yandex.net\/ratings<\/a><\/p>\n

Первый вгляд на состояние вещей:
\nТяжелые картинки, множество шрифтов, тонны комментариев, много сриптов при бедной функциональности самой страницы. Страница рендерится за 9-12ms<\/p>\n

\n\"\"\n<\/div>\n

Как я работал:
\nНакомитил множество изменений, и мой первый пуш отреджектили, потому что не нашли тег footer. Я удалил тег для того, чтобы избавиться от html5shiv.js<\/a>, так как footer был единственным html5 тегом на странице. Прикольно, что этот тег не нашелся роботом даже когда я его вернул. Потом я откатился на самое начало, и начал вносить изменения пачками, чтобы проще было понять какие мои агрессивные изменения были непровалидированы роботом. На седьмой пачке изменений, я понял, что все самые влиятельные изменения, которые я могу провести, уже проведены, при этом до вершины олимпа еще далеко. Я успокоился, смирившись с тем, что фронтенд разработчик и ускоритель страниц из меня не тот. Разгадка оказалась проста, она будет ближе к концу.<\/p>\n

Детальный взгляд:
\nПромахи не отсортированы в порядке важности и влиянию на загрузку страницы.<\/p>\n

Красивые комментарии<\/b> в index.html
\nВыкидываем.<\/p>\n

90кб фавиконка.<\/b>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/index.html#L9<\/a>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/assets\/img\/favicon.ico<\/a>
\nЯвно не то. Ужимаем до 16x16 пикселей. Не знаю, может какие браузеры понимают большие фавиконки. Быстрый поиск в интернете никаких подсказок не дал. Размер ужатой фавиконки: 0.5 кб.<\/p>\n

Множество неиспользуемых скриптов.<\/b>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/index.html#L24<\/a>
\nТо, что они не используются станет ясно позже. jQuery используется в 1 месте и через жопу, поэтому все скрипты в итоге будут удалены.<\/p>\n

SVG в формате base64 в фоне body<\/b>
\nПревращаю в png base 64, размер уменьшается с 16 до 5 кб. Нахожу первый ключ:<\/p>\n

\n\"\"\n<\/div>\n

Огромное изображение<\/b> (460кб) для хедера позиционируется фоном, показывая только часть.
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/assets\/img\/photo_head.jpg<\/a>
\nИзображение режим, сохраняем в jpeg с 51% сжатием. Это тот момент, когда фотка максимально пожата, при этом максимально хорошо выглядит (при значении ниже начинают ползти артефакты). Обрезанная фотка: 23 кб. Можно было заморачиваться дальше, но овчинка выделки не стоит пока.<\/p>\n

Единственное место в коде, где используется jQuery<\/b>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/index.html#L65<\/a>
\nПри этом только для того, чтобы изменить разметку и подгрузить другое изображение в меню<\/a>. Выкидываем скрипт, источник изображения меняем вручную.<\/p>\n

Иконки меню.<\/b> Много, тяжелые, уменьшенные стилями.
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/index.html#L87<\/a>
\nИмеют неоригинальные размеры, и подозрительный вес в 9кб каждая<\/a>. Изменяем в тот размер, что используется, прогоняем через pngout<\/a>, получаем 0.5кб каждая. Для того, чтобы не делать 6 лишних запросов, инлайню изображения через base64.<\/p>\n

base64 увеличивает объем изображения примерно на 33%, но при этом браузеру не надо слать дополнительный запрос на сервер. К тому же, если страница загзиплена, то base64 не так сильно влияет на итоговый объем данных.<\/p>\n

Подгрузка скрипта для вставки баннера<\/b>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/index.html#L128<\/a>
\nВыкидываем чепуху со скриптом, вставляем баннер прямо на страницу. Попутно заменяем png изображение на jpg, уменьшая размер файла вдвое.<\/p>\n

В удаленном скрипте нас ждет второй ключ – голубой. Замка к нему не нашел:<\/p>\n

if (0 == 1) {\r\n\tdocument.write('<scr' + 'ipt type="text\/javascript" src="HTTP:\/\/about:blank.js?plugin="><\/scr' + 'ipt><nosc' + 'ript>Blue KEY!<\/no' + 'script>');\r\n}<\/code><\/pre><\/pre>\n
img не оригинального размера, и веса (1700кб)<\/b>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/index.html#L153<\/a>
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/assets\/img\/photo_02.jpg<\/a>
\nИзображение ресайзится буквально на пару пикселей относительно оригинального. Это дает дополнительную нагрузку на проц. Обрезаем изображение. Попутно обращаем внимение, что изображение весит подозрительно много. Прогоняем через минификатор джипегов, получаем итоговый размер в 11.2кб.<\/p>\n
Найдя два ключа, предполагаю, что есть третий и он зелен. Туточки, среди мусора метаинформации, где и ожидалось.<\/p>\n
\n\"\"\n<\/div>\n
Предполагаю, но не проверяю, что третий ключ находился в метаинформации этого изображения (всего было замечено два ключа). Спрашиваем<\/a>.<\/p>\n
Стили с описанием шрифтов<\/b> грузятся динамически. и весят по 200кб.
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/assets\/css\/bootstrap.css#L1<\/a>
\nТут интуресный момент. Если браузер видит, что для текста определен нестандартный шрифт, и есть font-face для этого шрифта, браузер скрывает текст до тех пор, пока шрифт не прогрузится. Даже при динамическом добавлении определений шрифтов после готовности документа сначала показывается текст, потом скрывается и браузер ждет догрузки шрифтов.<\/p>\n
Я хотел добиться результата, когда страницу можно читать до того, как шрифты прогрузились (в идеале шрифты надо прогружать с таймаутом, чтобы отмести тех, у кого интернет медленен, и не подгружать файлы шрифтов при последующих загрузках страницы). Иду на хитрость: аяксом https:\/\/github.com\/podgorniy\/yac2013\/blob\/gh-pages\/index.html#L185<\/a><\/a> шрифты, и только после того, как все прогрузились, объявляю @font-face. Протестировал с фиддлером на хроме-фаерфоксе-ие9 – все ок: страница читабельна, шрифты появляются позже. Единственно, что хром иногда пробовал запросить один шрифт еще раз.<\/p>\n
Похоже, что такие оптимизации шутилка не меряет, потому как после этого, как мне казалось, шикарного решения, я поднялся в рейтинге совсем чуть.<\/p>\n
140кб бутстрапных стилей<\/b> мозолят глаза.
\nhttps:\/\/github.com\/yandex-cs\/yac2013\/blob\/gh-pages\/assets\/css\/bootstrap.css<\/a>
\nАнализ хромовскими инструментами показал, что 93% селекторов из этого файла не используются. Поиск инструментов, которые бы почистили файл от неиспользуемых селекторов не увенчался успехом. Все найденные инструменты только давали список неиспользуемых селекторов. Поэтому я написал штуку<\/a>, получающую на вход список селекторов и css файл, а на выходе дает чистый файл. Конечный размер файла стилей 14кб. Удаление мертвых селекторов так же уменьшило время отрисовки страницы до 7мс.<\/p>\n
Тени, уголки<\/b> в хедере. Из за них страница отрисовывалась не за 2-3мс, а за 7.
\nЗаменяю тени на изображение – профит. Время отрисовки уменьшилось до 2-3мс.<\/p>\n
\n\"\"\n<\/div>\n
Надо понимать, что эта оптимизация никак не про ускорение начальной отрисовки страницы. Это оптимизация больше влияет на то, как ощущается пользователем скорость работы со страницей.<\/p>\n
<\/p>\n
Всего выше не оказалось достаточным. Главный вес, и, соответственно проблема, заключалась в шрифтах. Топовые ребята инлайнят шрифты через data-uri, и используют за-gzip-ленные статические файлы. Так как я со шрифтами де-факто ничего не сделал, их вес сыграл свою роль.<\/p>\n",
            "date_published": "2013-10-03T20:26:14+02:00",
            "date_modified": "2013-10-03T20:25:36+02:00",
            "image": "https:\/\/blog.dmitrypodgorniy.com\/pictures\/Screen-Shot-2013-10-03-at-17.00.54.png",
            "_date_published_rfc2822": "Thu, 03 Oct 2013 20:26:14 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/razbor-zadachi-s-konkursa-yandeksa-po-uskoreniyu-zagruzki-strani\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/Screen-Shot-2013-10-03-at-17.00.54.png",
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/Screen-Shot-2013-10-03-at-17.46.54.png",
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/Screen-Shot-2013-10-03-at-17.50.37.png",
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/Screen-Shot-2013-10-03-at-21.00.50.png"
                ]
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}