(Jimdo, №3) Как создать блог на Jimdo, ч. 3: нам 45 дней - оптимизация сайта (текста: МНОГО, 4 картинки)

Изначальный тест на скорость загрузки сайта
Тест на скорость загрузки сайта

Почему-то почти все статьи по запросу "оптимизации сайта" ведут на SEO-материалы по правильному указанию метатэгов и прочим полезным ухищрениям. А мы поговорим о другом.

 

Во время изменения дизайна сайта я замечал, что скорость загрузки при просмотре front-end вида, т.е. с позиции посетителя, оставляет желать лучшего. Результат теста на webpagetest.org показал, что все плачевно. Сайт грузился по 20 секунд. Надо было что-то соображать...

1. Что улучшаем

Есть хорошая статья об этом на Хабре: http://habrahabr.ru/post/137239/

Поскольку я не веб-разработчик, то не стал изобретать велосипед, взял ее за основу и прошелся по наиболее простым пунктам, которые можно реализовать в Jimdo. С CDN у Jimdo все в порядке, тут ничего не делал, да и сделать сложно.

  1. Оптимизировал изображения. Было 3 задника весом почти 1МБ, осталось два 100-150КБ. Общий размер сайта с 4 уменьшился до 3МБ при первой загрузке. Также сжал картинки слайдеров, срезав с каждой 100КБ.
  2. Указал вместо скопированной локально библиотеки jquery ту, что хранится на googleapis. По незнанию думал, что, если хранить на сервере, будет быстрее грузиться, но все не совсем так.
  3. Исключение лишних шрифтов. Они тормозят загрузку, особенно на слабом канале, довольно значительно. В итоге от 6 внешних шрифтов осталось 3.
  4. В HEAD сначала поставил секции стилей <style>, потом javascript'ы. Те скрипты, что на диаграмме тормозили загрузку страницы вынес в HEAD из подвала (там, где это можно было сделать без ущерба работоспособности). Также при загрузке возникала ошибка 404 - вместо старых иконок сайта favicon была залита новая, но сайт все равно как будто искал ее по старому адресу. Благо обновленная загружалась, просто возникали и возникают паразитные запросы.
  5. В завершении использовал для скриптов async="async" везде, где это возможно без нарушения их работы. Это сильно ускоряет рендеринг страницы, что важно для пользователя. "Подвал" можно подгружать и по ходу дела. И еще некоторые изменения, про которые не особо помню уже.

О пункте 5 немного подробнее. Вот надо вам покушать, вы кушаете. Потом почитать новые записи в блоге, куда давно не заходили. Потом принять душ и одеться. Это пример последовательного (синхронного) выполнения скриптов. Если же вы кушаете в душе, читая с телефона статью и при этом вас еще одевают (ибо рук свободных нема) - это асинхронное выполнение бытовых скриптов. Угадайте, в каком случае времени на сборы уйдет меньше? На практике во первом, т.к. вам не придется переодеваться в сухое и срочно бежать за феном, дабы реанимировать телефон. Но в протоколе HTML5 именно асинхронный (параллельный) способ исполнения скриптов наиболее быстрый.

 

Более технический материал можете найти, например, тут: http://habrahabr.ru/post/182310/


2. Каков результат

Приведу здесь сравнительную таблицу скорости загрузки стартовой страницы (самая тяжелая) до и после оптимизации. 3МБ для полной версии сайта сейчас норма для многих ресурсов. Сам удивился. Интернет стал очень "жирным".


Параметр при первой/повторной загрузке 1. Исходный сайт 2. Сайт после пп. 1-4 (скрипты блокируют рендеринг) 3. Сайт после п. 5 Комментарий
1. Начало рендеринга (отрисовки) страницы 6 / 3.5 сек. 13 / 4.7 сек. 4.1 / 3.1 сек. Когда при загрузке белый экран сменяется объектами
2. Загрузка страницы 17 / 14 сек. 14 / 4.3 сек. 11 / 6.3 сек. Событие onload
3. Полная загрузка контента и плагинов 26 / 17 сек. 14 / 5.5 сек. 12 / 8.3 сек. Все компоненты полностью загружены.
4. Индекс скорости от Webpagetest 15000 / 12000 13000 / 5000 8900 / 5400 Меньше - лучше. 95% самых популярных сайтов имеют индекс <10700. Обычно ~5000. 
5. "Вес" страницы, МБ 4 / 1 3.2 / 0.25 3 / 0.6 "Вес" при повторном визите зависит и от фона (отличается он или нет)

Пара примечаний по таблице:

  1. Взяты эмпирически медианные (срединные) результаты с российских серверов. Порой разброс в результатах достигает 10-30% при последовательных тестах, но общая картина видна. Результаты тестов подтверждаются визуальным наблюдением скорости загрузки сайта до и после оптимизации.
  2. Считается время загрузки до сервера в России с использованием Firefox при канале 5Мбит/с (625КБ/с). С Европой все быстрее (Speed Index улучшается на некоторых серверах до 6 тысяч - сервер в Германии). При более быстром канале клиента или использовании Chrome тоже. При более медленном компьютере или браузере сайт грузится медленнее. Так, у меня на Chromium при повторном визите рендерится всё почти моментально - за 1.5-2 секунды.


Результаты теста из таблицы привожу на скриншотах выше. А тему сайтостроительства временно для себя закрываю. Пора сосредоточиться на очерках :)


P.S. от 15 апреля 2015 г.

 

СЛЕДУЮЩАЯ СТАТЬЯ ЦИКЛА


Таки скорость загрузки очень сильно зависит от местонахождения тестирующего клиента webpagetest. Тестировал в апреле скорость загрузки на компьютеры, расположенные в Америке, --- там krolix.net в 25-м процентиле, т.е. лучше чем 75% сайтов по скорости загрузки. По моим ощущениям, возникающим во время работы, --- в России тоже всё хорошо и шустро работает. До начала отрисовки проходит всего лишь 1.5 секунды, что не может не радовать.

PPS Создать свой сайт на Jimdo вы можете, заполнив эту форму или же поручив разработку сайта мне.

 

Если будете покупать платную версию, могу предоставить скидку на неё 500 рублей.

 

В любом случае --- с меня консультации и помощь вам в увлекательном деле сайтостроительства.



Оставишь ниже пару строк? 

Понравилась запись - подпишись и поддержи нас в социалках :)

IT-шное