Оптимизация скорости загрузки сайта

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

Вперёд!

И так, что мы имеем

Вот и добрался наконец до этой темы, которая анонсировалась еще в десяток постов назад. Так вот, вернулся я к сайту - одной из моих первых работ, личной страницы экскурсовода. По задумке - одностраничный сайт, промо-сайт, или как теперь называется лендинг - продает услуги экскурсовода в городе Львов.

С самого начала была полная свобода в средствах реализации, дизайне и тд. Но в свою очередь пожелания заказчика - первичное размещение на бесплатном хостинге - а вдруг не взлетит. С одной стороны что-то в этом есть - при незначительном посещении платить нет смысла, а при заказах через интернет можно и докупить потом. С другой стороны бесплатный хостинг дает с халявой ряд ограничений, а именно достаточно задумчивые сервера, которые к тому же размещены в Британии, так что "радует" скоростью соединения.

Ну что же, нас не испугать такими мелочами, поэтому принимаемся за дело. Опустим процесс разработки - об этом позже и более подробно, сейчас только уточню - сайт статический, использует html, css, jquery и немного самописного javascript, вот так незамысловато. Зато, по дизайнерской задумке имеет горизонтальную прокрутку, открытие контента, а это описания туров, некоторые интересные факты города и увеличенные фотки из галереи в модальных окнах. Чтобы обеспечить единую страницу сайта контентом и не выглядеть в глазах поисковых машин набором ссылок куда либо. Также чтобы отказаться от настроек индексации подгружаемого Аяксом контента решено было отказаться от динамической загрузки извне, все держать в теле документа, и показывать в модальных окнах. Этакий хитрый способ реализации модальных окон на чистом ЦСС.

Первые тесты скорости загрузки

В результате получилось, что единственная страница содержала 136 элементов, при общем размере 2.4 мегабайта. И еще - всякая дребедень типа иконок не была собрана в спрайты, так в конце на тестах получил скорость загрузки - 4 секунды, что довольно ужасно для такого простого сайта.
Собственно " водопад " загрузки выглядел где-то так:

Сразу видно что здесь не так, несмотря на конкатенацию скриптов и стилей загрузка идет неахти как, потому что файлы загружаются поочередно и их ну очень много. На саму загрузку уходят доли секунды, а на запросы, ожидание и прочее - вечность...

И так мы подошли к решениям. Проанализировав сделал вывод, что мелочь, такая как иконки языков, генерируемый контент перед соц. ссылками(их логотипчики), аватарки и тд хоть и просятся стать спрайтами, но в пору юности и максимализма автора таковыми не стали :) - Исправим! Далее обращаем внимание, что загружаются часто картинки " не своего " размера и уже в браузере подгоняются - увеличивает размер страницы. И главное - загружаются картинки, которые пользователь в принципе может и не просмотреть, именно те самые, что спрятаны в модальных окнах.

Фронт работ обозначен - к станку

  1. Делаем спрайты с авок, иконок и прочего. Использовал онлайн генератор спрайтов, хотя предварительно прочитал несколько статей на эту тему. И того в результате 6в1, 5в1 и 20в1, профит - 28 файлов выпали из очереди.
  2. дальше решил все же реализовать подгрузку контента - к текстам вопросов не было, а вот к картинкам, которых там было в общем количестве 30 штук - вопросы были.
    Выходом стал паттерн "ленивая загрузка " - lazyload, реализованный в технологии jQuery. Норм, качаем, ставим коробочное решения, делаем картинку- рыбу - тестируем... Вот здесь и вышел определенный затык. В двух словах - горизонтальный скроллинг был реализован скриптом mousewheel.js, что ловил скролл эвент, а при открытии модального окна срабатывал анбинд этого эвента. При этом " ленивая загрузка " по умолчанию была настроена именно на скролл эвент : прокручиваешь - подгружается. Решение - изменить эвент в самом скрипте на другой ( в данном случае " лоад ") и все.
    Окей, что в результате - при старте загрузки страницы грузит еще на 30 картинок меньше - 20 из модальных окон галереи ( увеличенные копии ) и 10 из модальных окон описания туров. Правда те 20 из галереи были заменены на миниатюрки. Уменьшили размер страницы - ураа!
  3. Замена картинок на элементы с фоном в ЦСС - а именно ссылка на интересные факты, имевшие вид картинок теперь представляли собой ссылки с фоном в виде картинок. Шило на мыло, но не нужно ждать пока прогрузятся до конца все элементы хтмл и только потом браться за стили. Результат сразу видно. Хотелось бы тож впрайты - но увы, блоки не пропорционально меняются на разных разрешениях и фон глючит. Ждем полной поддержки единиц измерения vh.
  4. В заключение все мануалы и оптимизаторы советовали выносить статику на домен без куки, но за отсутствием такового, и при желании загрузки в дополнительный поток часть картинок грузилась с поддомена сайта www - это сработало :)
  5. Было настроено кэширование через конфигурационный файл апача. htaccess. Выбор пал на обращение к серверу и если файлы не изменились - не качать их. Время хоть и затрачивается, зато позволяет производить отладку, в данном случае - не нужно пользоваться версиями файлов, хотя и плата за это - скорость... Ну это станет следующим шагом - версионность файлов.

Тесты и заключение

В результате, после тестов были получены следующие данные: 2.3 секунд при первой загрузке и 700 миллисекунд при следующих, когда все добро бралось из кэша браузера. Размер страницы - 1.7мб, так что экономия в масштабах сайта почти треть.
Поскольку у меня отключен кэш и куки в браузерах для более простой разработки, мои результаты не показательны, но по отзывам пользователей и тестам стало ощутимо быстрее, а значит задача успешно выполнена.

Мысли вслух

Напоследок скажу, что сайт из любопытства был сделан резиновым, причем в зависимости от высоты экрана устройства, а не ширины, то все блоки должны соответственно пропорционально уменьшаться и по ширине и по высоте. Блестящее решение средствами цсс3 - относительные единицы измерения. Высота - 100 %, ширина - столько-то vh ( viewport height - 1 % высоты окна просмотра ). Но условие кроссбраузерности никак удовлетворялось - странная опера игнорировала единицы измерения vh. Не беда, с самого начала все строилось по медиа запросам, поэтому и работало относительно нормально.

Но ближе к сути - в одном месте такой подход не позволил для 20 элементов использовать спрайты, хотя их размеры были в процентах родительского блока и позиционирование фона background - position также давалось в процентах, причем достаточно точных - а дудки, свойство background - size : cover ; срабатывало добросовестно и захватывало лишние куски фона в те моменты, когда родительский блок был непропорциональный ( в переходных размерах медиа запросов - ад перфекциониста).

Ну, когда рак на горе свистнет и большинство браузеров нескольких последних версий получат полную и осмысленную поддержку спецификации цсс3, а именно единиц измерения vh - тогда ради удовлетворения амбиций реализую ту штуку так как и должно было быть изначально.

Уже реализовано, в обновленной версии сайта, которая по состоянию 06.12.2014 находится на стадии тестов и готовится к запуску. Там допилены скрипты, которые отслеживают размер\ориентацию экрана и рефрешат страницу, таким образом все остается на своих местах. Внедрены единицы измерения vh, а для непонимающих браузеров - фолбек в виде тех же процентов.


Поделиться в соцсетях

Понравился пост? — расскажите о нём своим друзьям