Ускоряем свой сайт или почему сайты долго грузятся

Тема в разделе "Статьи", создана пользователем HellsCoder, 10 июн 2019.

  1. HellsCoder

    Проверенный

    Регистрация:
    15 авг 2017
    Сообщения:
    229
    Симпатии:
    175
    Вступление
    Привет всем! Опять я - тот чокнутый веббер который частенько залетает на этот форум со своими недоразвитыми статьями. На этот раз мы будем ускорять сайт, разбираться, почему сайты грузятся долго и разгружать клиентский канал.

    Почему сайт долго грузится
    Возможно - разработчик инвалид, возможно выбран полностью Client-side рендеринг(это когда с сервера приходит только пустая разметка, а клиент сам подгружает в нее данные). Слово "полностью" - я выделил красным. Потому что это является ошибкой. Ошибочно выбирать такую архитектуру. Сервер должен отдавать данные хотябы с частичной разметкой - это ускорит процесс отрисовки. Тот ебаныйслучай, когда сервер отдает часть данных с разметкой, а часть грузится клиентом - называется смешанный рендеринг(или не так, хуй знает, но суть, вы, скорее всего уловили). И полностью server-side рендеринг - это когда сервер при первом же запросе отдает все. Такое грузит сервер, и по этому идеально выбирать смешанный рендеринг(но его сложнее поддерживать, и вообще, он противный. По себе знаю)

    Кстати, чтобы узнать какой сайт использует тип рендеринга, нажмите ПКМ, и выберите в контекстном меню пункт "ПОСМОТРЕТЬ КОД СТРАНИЦЫ". Откроется страница с... кхм, как это не странно - кодом. Так вот, этот код является тем, что сервер отдает вам при первом запросе. Если страница большая, а кода там мало - скорее всего используется клиентский рендеринг. (Откройте код ВК и вы ОХYЕЕtЕЕЕЕЕ)

    Ускоряем свой сайт
    Свой сайт я ускорять не буду, давайте посмотрим на наш любимый BlastHack! Воспользуемся встроенным в браузер профайлером, если использовать его прямыми руками и с головой, то он очень помогае(если Вы рукожоп, или еще хуже - жопорук, то могут быть проблемы).

    Итак, погнали. Заходим на главную страницу, и легким нажатием клавиши F12 открываем панель для разработчиков.
    Заходим во вкладку Network, она нам понадобится, и установим там галочку disable cache для того, чтобы не использовать кешированные файлы(вообще кеш мы будем чистить, но сработать это может как всегда, то есть через жопу).

    upload_2019-6-9_22-15-36.png

    Далее, заходим в(вашу телку) самое интересное - профайлер. Он находится во вкладке Performance. Нажмем в нем галочку Memory - для того, чтобы получить таймлайн использования памяти.

    upload_2019-6-9_22-21-13.png

    Опять переходим на вкладку network, открываем сайт и в самом низу вкладки смотрим статистку по использованию сети:
    upload_2019-6-9_22-40-54.png
    Весь сайт был загружен за 3.03 секунды, а DOM был загружен вообще за 1.59 сек. Это заебись, но давайте приблизимся к реалиям: у меня мак с i7 и большая пропускная способность на канале, ограничим ширину канала, выставляем скорость 3G и поебашили тестить:
    upload_2019-6-9_22-45-21.png

    Уже не так радужно! Давайте посмотрим какого хуя так долго:
    смотрим в ресурсы, и сортируем их по параметру size, видим, что больше всех весит FontAwesome(для тех кто не в курсе - это иконочный шрифт), тут вариант использовать CDN сервера, которые могли бы отдавать статику еще быстрее, либо использовать только ту часть FA, которая необходима.
    upload_2019-6-9_22-52-39.png
    Далее идут скрипты, их мы пропустим - потому что статья называется не "как оптимизировать blasthack". Мы будем оптимизировать свой сайт. Смотрим, что еще грузится долго - картинки. Они тут в jpeg или png, Чтобы ускорить загрузку картинок можно использовать принцип Lazy Loading(это когда изображения грузятся только тогда, когда они в области видимости окна браузера), либо перекодировать все изображения в WEBP стандарт.

    Чтобы быстрее отрисовать контент, ищем объекты которые загрузились ДО СИНЕЙ ЛИНИИ, потому что именно они мешают рендерингу страницы(т.к, вероятнее всего обрабатываются в главном потоке). Ищем такие, и переносим их загрузку в футер.


    Профайлер
    Переходим во вкладку Performance, записываем профиль. Записали, смотрим что происходит до синей полоски(DCL - DomContentLoad):
    upload_2019-6-9_23-15-10.png

    Что значит этот кружоООочек? Это значит что сайт из 11.09 секунд 10(!!!!) секунд нихуя не делал, из за неправильной расстановки тегов. Некоторые скрипты и стили грузятся в теге HEAD, что создает проблемы и задержки при рендеринге. В идеале - свойство IDLE на графике должно иметь маленькое значение, заходим в Call Tree и смотрим, че происходило до DCL события:

    Заебавшись ждать, браузер получил ответ в виде HTML разметки(148ms), потом браузер решил отдохнуть(78ms), и подождать, пока загрузится скрипт, который блокирует рендеринг, еще спустя 87ms браузер дождался этот долбаный(если не сказать хуже) скрипт и распарсил его за 1.1s, но оставил в режиме Queue(очереди), так как отправил запросы на CSS файлы и ожидал их ответа, в этот момент браузер опять простаивал(420ms). После получения стилей браузер их распарсил(9ms), сработал DOM Garbidge Collector(21ms), скрипт из Queue перешел в Evaluate(исполнение), браузер отрисовал нам первичный контент(2.1s), но в этот момент JS решил перерисовать стили(2.1ms), и браузер снова начал рендерить новую картинку на экране(320ms), дальше сработал GC(хуй знает почему опять) и потом, браузер вывел нам картинку за 4ms.

    В общем хочу выделить несколько советов по оптимизации Ваших сайтов:
    1. Используйте асинхронную загрузку скриптов
    2. Используйте современные форматы изображений(webp)
    3. Старайтесь убрать все скрипты из HEAD и перенести вниз страницы
    4. Минифицируйте CSS и JS код
    5. Настройте показ текста ДО загрузки ширфтов


    Во время тестов не один кодер не пострадал, а нагрузка на каналы, загруженность объекта тестирования - не учитывалась. По этому, считаю глупым тестировать через профайлер, но все же, как вариант. Если проект большой и используется Client-Side рендеринг - лучше залить все на локалку, и там профайлить. Так результат будет куда чище.

    Еще можно воспользоваться сервисом Google PageSpeed Insights, но это страшная тема, надеюсь, вы никогда не узнаете что это такое.
     
    social enemy, checkdasound, uryukhai и ещё 1-му нравится это.
  2. ( ˘ ɜ˘) ♬♪♫

    ( ˘ ɜ˘) ♬♪♫ Друг форума

    Регистрация:
    11 июн 2018
    Сообщения:
    525
    Симпатии:
    244
    Я конечно не эксперт, но ты не заебався строчить столько?
    Ну ты прям адский...
     
    Oreshka23 и HellsCoder нравится это.
  3. HellsCoder

    Проверенный

    Регистрация:
    15 авг 2017
    Сообщения:
    229
    Симпатии:
    175
    Оправдываю свой ник =)
     
  4. Azller Lollison

    Azller Lollison SK-Team | vk.com/lollison
    Друг

    Регистрация:
    20 июл 2017
    Сообщения:
    1.004
    Симпатии:
    1.163
    Опять какая-то хуйня никому не интересная.
    Народ требует стори про взлом мадраса!
     
    HOG и Carloson нравится это.
  5. Lemonager

    Lemonager Всефорумный анимешник
    Проверенный

    Регистрация:
    24 мар 2018
    Сообщения:
    296
    Симпатии:
    235
    Полностью солидарен с этим суждением
     
  6. Vitali0

    Vitali0 Интересующийся

    Регистрация:
    27 фев 2018
    Сообщения:
    164
    Симпатии:
    28
    FYP это намек)
     
  7. HellsCoder

    Проверенный

    Регистрация:
    15 авг 2017
    Сообщения:
    229
    Симпатии:
    175
    Но! Как говорится - мнение анимешников не учитывается, особенно в данном вопросе

    Так и знал что не тот форум выбрал =)
     
  8. Vitali0

    Vitali0 Интересующийся

    Регистрация:
    27 фев 2018
    Сообщения:
    164
    Симпатии:
    28
    1555924952558681.jpg
    Илон Маск не одобрил
     
  9. HellsCoder

    Проверенный

    Регистрация:
    15 авг 2017
    Сообщения:
    229
    Симпатии:
    175
    При этом обоснованное мнение анимешников учитывается в полном объеме)
     
    social enemy нравится это.