Мастер-группа | 5 шагов к увеличению производительности сайта

Для чего нужно смотреть за производительностью сайта, и на что это влияет? Нередко поисковики ранжируют сайт в зависимости от скорости выдачи контента, что напрямую влияет на продажи. Amazon недавно провели исследование, и заметили что даже из-за 100 миллисекунд задержки сайта, они теряют один процент продаж.

О том, какие существуют шаги для увеличения производительности сайта пойдет речь в статье.

5 шагов к увеличению производительности сайтаШаг 1. Признать проблему

Постарайтесь себе честно ответить на три несложных вопроса:

— время загрузки вашего сайта больше 2 секунд?

— при прокрутке сайта изображение скачет?

— показатель отказов > 80%?

Для начала необходимо признать проблему. Многие предприниматели, у которых есть сайт, не видят проблемы. Продажи идут, и они могут даже не подозревать, что сайт «тормозит», и имеется очень много отказов именно из-за того, что пользователь, не дождавшись загрузки страницы, ушел с сайта.

Первое, что нужно сделать, — посмотреть время загрузки сайта. Если с момента нажатия ссылки проходит больше 2х секунд, то стоит задуматься. По статистике, большинство пользователей, особенно тех, кто заходит в Интернет с мобильных устройств, не ждут загрузки сайта больше 2х секунд. То, что загружается на компьютере 2 секунды, на мобильном устройстве грузится примерно 10–20 секунд, учитывая то, что там 3G. И еще один момент, когда сайт грузится вроде бы быстро, но анимация на нем загружается с задержкой, подгружаются большие картинки, пользователь начинает крутить сайт. В таком случае сайтом пользоваться очень сложно.

Еще один фактор помимо времени загрузки и очень быстрой прокрутки — это показатель отказа. Если показатель отказа более 80%, что бывает очень редко, нужно серьезно задуматься.

Шаг 2. Изучить проблему

Есть специальные утилиты для просмотра статистики сайта, и эти сервисы могут дать некоторые рекомендации. Один из них — http://www.webpagetest.org. Здесь вы можете проверить сайт из разных локаций: Европа, Азия, Океания.

Для проверки сайта возьмем Европу, город Москва. Проверяем сайт winlevel.ru.

Проверка сайта на webpagetest.orgХотелось бы обратить внимание на действие плагина Page Speed для Google Hrome на примере того же сайта. Раньше он устанавливался из магазина, сейчас предоставляется только онлайн-сервис. Вводим в строку запроса адрес страницы и наживаем “анализировать”. После анализа страницы, мы видим по скорости оценку 0 из 100, что в принципе было ожидаемо. Тут же вы можете увидеть рекомендации, как исправить ситуацию: на сайте есть несколько картинок, и их можно уменьшить на 99%. Картинка весит 11 МБ, можно без потери качества убрать 10 МБ. Если оптимизировать картинки, 16 МБ из 40 уйдет и это прибавит к скорости примерно 5 секунд.

Рекомендации по уменьшению размера картинок на сайтеСледующие рекомендации идут уже для мобильных пользователей. И в принципе, Google способен создать оптимизированные изображения, оптимизированные ресурсы, из JavaScript, CSS для этой страницы, и вы можете их скачать отсюда же и вставить на сайт. К примеру, изображение, которое весило больше всех, теперь весит всего 13 Кб. Скорее всего, проблема в том, что создатели сайта поставили большую картинку, и просто изменили ее размер.

 Еще один замечательный ресурс, который делает все то же самое и называется yslow.org — это ресурс от Yahoo. Он на английском, но вы можете поставить его как приложение для Chrome.

Шаг 3. Проверить частые ошибки и исправить их

 Ошибки, которые встречаются чаще всего:

— много мелких файлов;

— переадресация;

— ответ сервера > 200 мс;

— большие css в head.

  1. Много мелких файлов, как на сайте winlevel, там порядка 40-50 файлов, каждая картинка, каждый файл занимает одну сессию при загрузке. Браузеры способны грузить от четырех до семи файлов, то есть это четыре параллельных потока могут быть созданы. А между потоками нужно снова создавать сессию, это снова время ожидания, которое длится примерно 100 миллисекунд просто на установления нового соединения. Поэтому много картинок нужно объединить в один спрайт и в просто показывать их в маленьком окошке. На многих сайтах так сделаны иконки, и это очень частая и хорошая практика.
  2. Переадресация. К примеру, вы сделали отдельную версию сайта для мобильных браузеров. То есть при заходе на сайт вас отправляет на m.ваш_домен. При этом редиректе создается новая сессия, и это занимает от 200 до 500 миллисекунд. На самом деле для мобильных соединений это очень много.
  3. Самая сложная вещь, когда ответ сервера больше 200 миллисекунд. Как подсчитать ответ сервера? Откроем наш сайт и посмотрим, какой у него ответ сервера.

Проверка сайта на скорость ответа сервераВы видите 5—7 параллельных загрузок, каждая линия — это файл, и мы должны прокрутить до самого верха, там должно быть название сайта. На него нажимаем и видим, что сначала было инициировано соединение, оно еще шифровалось некоторое время, и затем было ожидание 36 миллисекунд, это очень быстро. В качестве медленного соединения можем посмотреть, например, google.com. Он находится в Америке, но у него тоже очень быстрый ответ сервера. И в качестве третьего примера, можно использовать afisha.yandex.ru (афиша Яндекса). Здесь ответ сервера 200 миллисекунд, это очень долго. Нужно стремиться к тому, чтобы вся страница грузилась одну секунду. То есть сначала идет запрос на сервер, это 100 мс, потом идет ответ сервера это 200 мс, еще 200 мс на то, что клиент получает страницу, и еще 200 мс на показ страницы пользователю.

  1. Большие стили в заголовке. Пока не загрузится файл со стилями, страница не покажется. Чтобы страница появилась, а все что не так важно, не показывалось, есть некоторые ухищрения. Пойдем глубже в технические вопросы.

Способы быстрой загрузки страницы

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

CSS-стили – все стили, которые нужны, только чтобы отрисовалась шапка, нужно положить в заголовок. Все остальное можно положить ниже, в основную часть нашего контента. Можно даже сделать так: основную часть стилей, иконки и все остальное положить в заголовок, а после каждого блока, после шапки, написать загрузку стиля для шапки, после основного контента прописать link для основного контента и т.д. Тогда все будет очень красиво, и станет сразу очень хорошо отрисовываться.

Самый сложный вопрос, это время подгрузки страницы с сервером. Здесь есть три важных фактора. Первый — железо. Если у вас есть какой-то хостинг, смотрите чтобы там стояли диски SD, очень быстрые диски, был хороший процессор, лучше выделенный сервер, и смотрите, чтобы там вы могли либо сами ставить свой софт. Мы можем статический файл отдавать специальным софтом, который не будет ничего на сервере мудрить, а просто отдаст клиенту, а всю динамику перепоручит отдавать кому-нибудь другому.

Шаг 4. Используйте современные технологии

 — Оптимизируйте изображения;

— Сжатие gzip;

— Кеширование (+fingerprints);

— Css вместо изображений;

— Спрайты и svg для иконок.

 Мы озадачились тем, что нужно улучшить сайт.

Первое, что стоит сделать, это оптимизировать изображения. Сейчас на всех сайтах очень большие картинки. Во-первых, нужно использовать на сайте картинки правильного размера, то есть не нужно брать большую картинку 16 МБ и ужимать ее до размеров в 16 КБ и вставлять на сайт. При этом начинает сильно тормозить прокрутка, при каждом движении экрана, браузер вынужден перерисовывать все, менять размеры картинки, как-то ужимать ее, оптимизируя.

Второе, что нужно — это использовать gzip-сжатие. С этим можно обратиться к вашему программисту, либо это можно сделать самому в Apache. Вы можете сделать это даже если у вас нет доступа к конфигурациям Apache. Это можно сделать в file.access, туда же можно прописать какие данные сжимать, кеширование. GooglePage Speed очень часто выводит рекомендации: «используйте кеширование. Кеширование можно прописать таким образом, что ваши файлы будут кешироваться браузером на определенный срок. Если ваш сайт меняется не очень часто, вы можете прописать кеширование на неделю, и браузер при повторном заходе будет брать данные с диска пользователя, не нужно будет заново это подгружать.

Что такое fingerprints? Это такой суффикс, он добавляется к файлу, и который говорит браузеру, что файл новый. Он нужен для избегания кеширования. Вы добавляете знак вопроса к имени файла и суффикс, это делается программой очень легко. Раньше было очень много таких сайтов, где тени, градиенты были сделаны картинками. Сейчас это можно сделать стилями. Если у вас 2005 года и грузится очень много картинок, то он будет тормозить.

Css вместо изображения и спрайты и svg для иконок.

Что такое спрайты? В играх грузить много картинок каждый раз очень затратно, поэтому делаются такие полотна, и просто передвигается экран обзора. То есть, есть видимая и невидимая области картинки, и при наведении на нее мы можем сдвинуть немного, и у нас кнопка будет темной, изменится картинка. Очень многие сайты используют это, потому что делаются спрайты очень просто, с помощью свойства выбора position. Это о CSS-спрайтах. Есть замечательная статья о кешировании. Она замечательна совей информативностью и рисунками, но ее минус состоит в переводах. Ссылка на сайт: ruhighload.com, это очень уважаемый сайт, и статья на нем очень информативная и очень хорошая. Если у вас есть сайт для мобильных, то этот сайт о том, как оптимизировать загрузку. Ссылка: developers.google.com/speed/docs/insights/mobile#DeferParsingJS. Вкратце, нужно сделать так, чтобы страница была меньше 14 Кб, то есть сеть работает пакетами, и если вы положите больше, то потребуется два запроса. Каждый запрос это новая задержка на ответ сети. Сервер уже начал выдавать и за каждым пакетом будет стоять новый запрос.

Svg — это относительно новая технология. Если вы не рассчитываете на поддержку браузеров, то вы можете их использовать. Svg — это векторная графика. Вы текстом браузеру описываете линии и иконки.

 Шаг 5. UserExperience

Делайте сайты удобными

— Наверху — самое важное (14 Кб).

— Анимации только со смыслом.

— Делайте удобно.

 Пятый шаг — это делайте так, чтобы вашим сайтом было удобно пользоваться. Даже если сайт очень быстро грузится, но на нем тормозная анимация, очень много картинок, много скриптов и лишней анимации, то сайтом пользоваться не очень удобно. Как понять, что у вас тормозит анимация? Идем во вкладку Timeline, ставим там все галочки, и нажимаем на красный кружочек в левом верхнем углу. Некоторое время ждем, и отжимаем кружочек. Что мы видим? — большая часть анимации укладывается в шестьдесят кадров в секунду. Операционная система очень оптимизирует распределение ресурсов, и если окно не активно, то ресурс уже меньше. Повторимся: делайте сайты удобными. Производительность сайта — это один из параметров удобства.

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

Автор:

Олег СидоркинОлег Сидоркин – ведущий разработчик фронтенд, занимается визуальной составляющей сайта.

Запись опубликована автором Иван Севостьянов