Истина где-то рядом DOROGAVTOP.RU

Канал Дорога в топКанал на YouTube

Как увеличить скорость загрузки сайта?

  • Позаботьтесь о ваших посетителях
  • Обеспечьте им быстрый доступ к ресурсам
  • Помните, что есть места где слабый интернет
  • Добейтесь хороших поведенческих факторов
  • 7 основных советов ускорения загрузки
Видео урок № 1.5.5
Ускорим загрузку сайта

Куда надо смотреть



Чем проще сайт внутри, тем он легче, и поэтому грузиться будет быстрее?

Это не всегда так. Вообще, скорость загрузки - очень сложная тема, и не стоит в нее сразу глубоко вникать. Достаточно добиться загрузки страниц порядка 0,2-0,6 секунды, успокоиться и считать, что вы справились.

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

У меня припасены 7 советов для вас и вашего программиста, которые должны облегчить вам оптимизацию скорости загрузки ваших веб-ресурсов и позволить вашим пользователям посещать больше страниц за одно и то же время. Дорога в топ выделяет следующие этапы продвижения:

1. Оптимизируйте работу web-сервера
2. Включите сжатие
3. Отимизируйте HTML
4. Оптимизируйте css, js файлы и картинки
5. Минимизируйте работу сторонних ресурсов
6. Регулярно обновляйте CMS
7. Используйте свои уникальные разработки

Ускорим загрузку сайта


Разберем шаги ускорения


1. Оптимизируйте работу web-сервера



Время до получения первого байта TTFB

Настройки сайта необходимо начинать с web сервера, на котором лежат файлы вашего сайта. Он принимает запросы от клиента, формирует ответ и отправляет его обратно клиенту. И чем таких больше обращений, тем скорость работы сервера ниже. Для стабилизации такой работы необходимо:

Используйте кеширование, чтобы клиент не отправлял повторные запросы серверу, а проверял наличие страниц в кеше браузера. Нужно будет добавлять в ответ сервера заголовки кеширования или закешировать страницу с помощью манифеста. Для этого Web сервер должен отправить браузеру специальный заголовок Cache-control. Проверить, включен ли Cache-control, можно тут: highloadtools.com/cachecontrol

Располагайте DNS сервер и сервер с сайтом ближе к целевой аудитории

Если целевая аудитория находится на очень обширной территории, то можно использовать CDN.

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

И, наверное, самым важным при настройке веб-сервера будет добиться наименьшего показателя TTFB - время до получения первого байта. На него влияет почти всё: настройки сервера, входящий трафик, объем файлов, сетевые проблемы. Проверить его можно как в браузерах Chrome, так и на многих онлайн сервисах. Например, www.webpagetest.org - тут вы можете увидеть не только показатель TTFB но и много другого полезного.


2. Включите сжатие Gzip



Включите сжатие gzip для ускорения скорости загрузки сайта

Сжатие ресурсов с использованием функций gzip позволяет сократить объем данных, передаваемых по сети. Сжатие работает только для файлов текстового формата (HTML/XML, CSS, Javascript). Несмотря на то, что сжатие само займет некоторое время, в результате есть шанс ускорить работу сайта. Хотя, как показывает практика, это не решит всех проблем, связанных с загрузкой страниц.

Включить его можно:

Если у вас Nginx, то на сервере просто попросив хостеров.

А для включения сжатия в Apache, добавить код в .htaccess.

Gzip поддерживает несколько уровней сжатия от 1 до 10, лучше ставить значение 5, для получения лучшего результата и снижения нагрузки на процессор.

Сжатие gzip используют множество крупных и популярных сайтов таких как apple.com, amazon.com, google.com и другие, это можно проверить зайдя на сайт checkgzipcompression.com - на нем же можно увидеть размер страницы до и после включения сжатия, а также небольшие советы по улучшению работы gzip сжатия.


3. Оптимизируйте HTML файлы



Оптимизируйте HTML файлы

До того, как уйдет запрос к серверу, мы можем успеть увидеть белый экран. Как раз в этот момент происходит получение первого байта, и нам нужно сделать так, чтобы его не было заметно.

Для этого нужно минимизировать верстку, убрать все лишнее с кода до тега "body" и перенести все теги скриптов в конец тега "/body". Это делается для того, чтобы верхнюю часть сайта пользователь мог увидеть быстрее.

В дальнейшем минимизируем код по необходимости. Это может быть все что угодно, в зависимости от особенностей кода. Зачастую это ненужные комментарии с пояснением, длинные пробелы, возможно, нерабочие скрипты счетчиков.

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


4. Оптимизируйте css, js файлы и изображения



Оптимизация css, js файлов и картинок

Смотреть видео по оптимизации картинок на канале "Дорога в топ".
Чтобы увидеть, какие картинки, скрипты и файлы стилей задействованы при загрузке и работе вашей конкретной страницы, лучшим помощником будет онлайн-ресурс компании Google.

"PageSpeed Insights" перейти можно по ссылке developers.google.com/speed/pagespeed/insights/

Тут вы можете вставить любую вашу страницу и посмотреть перечень рекомендаций по улучшению загрузки страницы с расширенными ответами, как для десктопной, так и для мобильной версии. Еще он показывает количество выполненных рекомендаций и, главное, дает вам скачать уже сжатые файлы страницы и путь к ним на вашем хостинге. Остается только перенести их и зайти проверить, что сработало.

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

Применяйте известные форматы изображений, поддерживаемые в большинстве браузеров. Например, на сайте caniuse.com вы можете проверить использование любого формата в большинстве браузеров как в мире, так и в России.

Не забывайте про использование векторной графики, такой как svg. Она не только будет радовать глаз при масштабировании неизменным качеством картинки логотипа или иконок, но и облегчит сайт в целом.

По поводу файлов стилей css и js, один раз советую пройтись в Firefox, используя плагин под названием FireBug, и найти неработающие стили, скрипты, пройдясь по различным типам страниц сайта. Бывает, что файлы забиты неработающими командами, что засоряет и увеличивает размер файла.


5. Минимизируйте работу сторонних ресурсов



Минимизируйте работу сторонних ресурсов

Лучше вообще от них отказаться,
за исключением проверенных и приносящих реальную пользу сайту и вашим посетителям.

Это, как правило, подгружаемые скрипты, карты, счетчики сервисов аналитики и другие сторонние плагины ускорения работы, сервисы оптимизации, онлайн-консультанты, подгружаемые шрифты, неавторитетные программы по отслеживанию поведения клиента, которые пытаются подловить клиента и заставить его оставить свои данные для осуществления перезвона. Да, это все влияет на скорость загрузки, но я не говорю, что нужно убрать все.

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

Вот и вы можете проверить скорость загрузки, убрав лишнее из кода, а после решить, кто сколько накручивает и кто чего стоит. Это касается даже тех, кому все равно на органическую выдачу - использующих только контекстную рекламу.


6. Регулярно обновляйте CMS



Регулярно обновляйте CMS

Многие владельцы и админы сайтов на движках CMS не обновляются регулярно, боясь потерять стабильную работу прикрученных к движку плагинов. Риск и правда есть, но просто попросите программистов, и они вам помогут.

Зачем обновлять CMS вашего сайта?

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


7. Используйте свои уникальные разработки



Используйте свои уникальные разработки

Все мы знаем крупные мировые корпорации, которые успешно ведут бизнес в интернете.

Задавали ли вы себе вопрос, на чем у них написан сайт, какие языки они используют, движки?

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

Итак, правильно используя и оптимизируя ваши сайты, вы обязательно добьетесь высот!


Далее, сжатие Gzip




Оценка важности и сложности работ

Влияние
Примерный рейтинг важности и влияния всех вышеперечисленных пунктов по этапам ускорения скорости загрузки страниц.
Веб-сервер
Gzip
HTML
Картинки/css/js
Проги
Обновление
Самопис
Сложность
Рейтинг сложности, показывает время и ресурсы которые потребуются на исполнение задачи.
Веб-сервер
Gzip
HTML
Картинки/css/js
Проги
Обновление
Самопис