Почему сайт долго грузится

Долго загружаются страницы в Интернете: как исправить проблему

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

Что делать, если медленно открываются страницы в браузере?

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

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

• Медленная скорость Интернет-подключения.
• Сбоящий Wi-Fi маршрутизатор.
• Тормозящие браузер расширения, кэш и куки.
• Пользователь пытается открывать странички в браузере через VPN-расширение или сервис.
• В операционной системе поселился вирус, который тормозит скорость Интернет-подключения.
• Антивирус или другое ПО, которое точно также затормаживает скорость подключения или же занимает канал на свою работу.
• DNS-сервер провайдера в данный момент испытывает проблемы при работе.

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

Медленная скорость Интернет-подключения

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

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

Проверка используемого браузера

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

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

Как вариант, можете также попробовать переустановить свой браузер или же полностью сбросить его настройки, чтобы точно узнать, заключается ли проблема в нем или нет. Если вы поняли, что браузер определенно не является причиной замедленной загрузки страничек в Интернете, то давайте попробуем проверить еще кое-что.

Отключение VPN

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

Вирусы

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

Провести сканирование можно с помощью системного антивируса Защитника Windows. Нажмите Windows+S, введите в поисковую строку «Центр безопасности Защитника Windows», перейдите в раздел «Защита от вирусов и угроз» и запустите сканирование системы. Избавьтесь от вредителей, если таковые были найдены. Если после этого загрузка страничек в браузере стала проходить куда быстрее, то, поздравляем — вы нашли виновника возникшей ситуации.

Отключение антивируса и других защитных программ

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

Отключить Защитник Windows можно в том же разделе его настроек, на которые мы уже взглянули в предыдущем пункте(Центр безопасности Защитника Windows). Если же у вас сторонний антивирус, то тут вам уже придется пробовать отключать его функционал самостоятельно. Как правило, получить доступ к настройкам можно с помощью трея в Области уведомления Пуск. Ищите в настройках пункт об Активной защите против вирусов или иных угроз.

Сброс настроек сети

Изменения сетевых настроек вполне могли вызвать оговариваемые в данной статье проблемы. К счастью, вы легко можете проверить настройки сети и вернуть их на прежние значения(по умолчанию), при которых проблем при доступе к Интернету не наблюдалось. Выполнить сброс настроек сети вы можете с помощью такого системного инструмента, как Командная строка. Нажмите на клавиатуре Windows+X и кликните на «Командная строка(администратор)».

Как только перед вами откроется консоль системы, вам понадобится вписать в нее следующий ряд команд:

• netsh winsock reset
• netsh int ip reset all
• netsh winhttp reset proxy
• ipconfig /flushdns

Этими командами вы сбросите WinSock, настройки IP, Прокси, а также очистите кэш-память DNS. Перезагрузите компьютер, а затем попробуйте снова открыть какую-то страничку в своем браузере. Если скорость загрузки увеличилась, то дело действительно заключалось в настройках сети. Увидите повторение ситуации — выполните вышеуказанные команды в системной консоли, чтобы разрешить проблему. Впрочем, часто это делать не придется.

Смена адреса DNS-сервера

И последнее, что мы затронем в данной статье, — это проблема с DNS-сервером вашего провайдера. Вы можете попробовать на время перейти на общественные DNS-сервера компании Google. Сделать это очень просто:

• Нажмите правой кнопкой мыши на значок сетевого подключения в Области уведомления Пуск.
• Выберите «Открыть «Параметры сети и Интернет».
• Кликните на «Настройка параметров адаптера».
• Дважды кликните на свое сетевое подключение.
• Нажмите на кнопку «Свойства».
• Дважды кликните на «IP версии 4…».
• Выставьте адреса 8.8.8.8. и 8.8.4.4.
• Сохраните изменения.

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

Долго грузятся страницы и сайты в браузере: почему и что делать?

И вот мы подобрались к одной из самых загадочных проблем всего человечества, когда долго загружаются страницы в браузере. И без разницы через что вы подключены: через компьютер или ноутбук. Когда интернет медленный сам по себе, есть прерывание или поломка на линии у провайдера – тут все понятно. Но что делать людям, у которых вполне нормальная скорость интернета при тестировании, а страницы все равно грузятся долго.

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

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

• Роутер.
• Провайдер.
• Компьютер или ноутбук.

Тут нужно в первую очередь понять субъективное понятие «Медленно». Ведь для одних это 1 Мбит в секунду, а другим и 50 мало. Но страницы должны нормально погружаться даже при скорости 2 Мбит в секунду. Поэтому я советую повторно зайти и сделать тест интернета на скорость.

Если «инет» упал резко, то подойдите к вашему роутеру и перезагрузите его. Иногда начинает шалить внутренний вай-фай модуль – он может перегреваться. Тоже самое сделайте с компьютером. Для перезагрузки маршрутизатора достаточно выдернуть его из розетки и вставить обратно. Но всё же лучше пользоваться кнопкой.

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

Ещё один совет, позвоните провайдеру, чтобы вас прозвонила техническая поддержка. Бывает, что на коммутаторе, к которому вы подключены могут быть глюки. Как-то у меня отрубался интернет, потому что на подобном устройстве сгорел порт. Ждал два дня, пока его заменят.

Очистка хлама

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

1. Принцип примерно одинаковый на всех браузерах. Покажу на примере популярного «Google Chrome».

1. Заходим в раздел конфигурации, для этого нажимаем на три точки в правом верхнем углу. Далее выбираем инструменты и раздел удаления.

1. Перейдите во вкладку «Дополнительно». Теперь ставим галочку для удаления файлов Cookie, изображений, историю просмотра и скачиваний. Установите диапазон времени «Все время» и нажимаем «Удалить данные». Перезапускаем браузер.
2. Теперь давайте отключим все Расширения. Иногда некоторые просто тормозят загрузку из-за лишних «скриптов».

1. В том же блоке заходим в соседний раздел.

1. Отключаем все расширения.

Очистка всё системы

Для этого можно воспользоваться программой CCleaner. Скачать бесплатную версию вы можете с официального сайта. Скачиваем и устанавливаем. Закройте все браузеры и запустите программу. Нажимаем «Анализ», а после этого «Очистка». После этого сделайте анализ и очистку повторно. Программа также в автономном режиме удаляет весь мусор из браузера.

Вирусы, вредоносное ПО и скрипты в автозагрузке

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

Вспомните – может вы ранее устанавливали какие-то программы. Некоторые приложения могут устанавливаться в фоновом режиме. Например, при установке драйверов с помощью «DriverPack Solution» вместе с «дровами» устанавливается много мусора.

Нажимаем «Пуск» и вводим в строку «Программы и компоненты». Удалите подозрительное ПО, которое было установлено совсем недавно. Но не все программы можно удалить таким образом, иногда вредоносный софт, может затаиться в куда более злачном месте.

Разом вместе нажмите на кнопки «R» и «Windows». Впишите команду как на картинке выше. Во вкладке «Автозагрузка» внимательно посмотрите на всех подозреваемых. Вам нужно отключить подозрительные программы, которые загружаются вместе с системой. Особенно это касается тех, у которых во вкладке «Производитель» не написаны данные. Для уверенности, можете оставить только антивирус, перезагрузить комп, а потом проверить интернет опять. Если это поможет – значит в автозагрузке у вас сидит программа, которая вас тормозит.

Конфигурация сетевых настроек

Некоторые программы не просто ломают конфигурацию, но и вносят свои изменения. Из-за и появляются проблемы с подключением к сайтам. Но мы не будем ходить вокруг, а просто сбросим настройки. Для этого заходим в консольку от имени администратора и вписываем команду – netsh winsock reset. После этого перезагружаем ЭВМ и роутер.

1. Если не помогло, то возможно проблема в кривых DNS адресах, которые использует ваш провайдер, роутер или они были изменены в момент буйства вирусов.

1. Жмём на волшебные клавиши + R . Прописываем другое заклинание – «ncpa.cpl».

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

1. В 4-ом протоколе TCP выбираем «Свойство» и устанавливаем значения DNS вручную как на картинке выше. В самом конце жмём «ОК».

Некоторые страницы плохо грузятся

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

3G, 4G и aDSL модемы

В своё время я почти 3 года просидел на aDSL модеме, поэтому моя скорость падала постоянно. Бывало, что отрубали интернет на день или два. Если интернет у вас подключен через телефонный кабель, то скорость может постоянно скакать. Всё дело в технологии передачи интернета по телефонной линии. Данные провода для этого не предназначены. Они не экранированы и пакеты могут теряться даже от малейшего магнитного воздействия.

Те же дела обстоят и с 3G, 4G модемами. Передача данных идёт по воздуху путем радиоволн. Радиоволны могут быть подвержены теми же радиоволнами от мобильной связи, вашего роутера и прочих факторов. У моего знакомого был очень плохой интернет из-за того, что его стены дома были сделаны из какого-то специального материала, который просто экранировал всю квартиру. Ему даже приходилось выходить на балкон, чтобы куда-то позвонить.

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

Как ускорить загрузку сайта

Николай Лавлинский, технический директор «Метод Лаб», специально для Нетологии рассказал о том, как можно ускорить сайт и ничего при этом не потерять. Статья участвует в конкурсе блога.

Все знают, что медленный сайт — это плохо. Из-за тормозящего сайта возникают серьезные проблемы при решении повседневных задач. Иногда это просто раздражает. Часто торможение сайта — это и поломка, отказ в обслуживании — люди не дожидаются загрузки и уходят. Это актуально для случаев радикального торможения сайта, например, когда начало отрисовки страницы начинается через 8–10 секунд после клика.

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

Но более половины интернет-аудитории сегодня используют мобильные устройства для доступа к сайтам. Значит они могут использовать медленные каналы для доступа и процессоры для загрузки сайта.

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

Поэтому скоростью сайта нужно заниматься как с технической, так и с экономической точек зрения. В этой статье мы сконцентрируемся на технической стороне ускорения сайтов.

Скорость сайта: основные компоненты

Скорость сайта касается двух сторон: клиентской и серверной. На сегодняшний день каждая из этих частей равнозначна для конечного результата. Но каждая со своими особенностями.

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

Полный процесс загрузки сайта (первое посещение) выглядит следующим образом:

1. DNS-запрос по имени сайта.
2. Подключение к серверу по IP (ТCP-подключение).
3. Установление защищённого соединения при использовании HTTPS (TLS-подключение).
4. Запрос HTML-страницы по URL и ожидание сервера. (HTTP-запрос)
5. Загрузка HTML.
6. Разбор HTML-документа на стороне браузера, построение очереди запросов в ресурсам документа.
7. Загрузка и парсинг CSS-стилей.
8. Загрузка и выполнение JS-кода.
9. Начало рендеринга страницы, выполнение JS-кода.
10. Загрузка веб-шрифтов.
11. Загрузка изображений и других элементов.
12. Окончание рендеринга страницы, выполнение отложенного JS-кода.

Серверная оптимизация занимается этапами с первого по четвертый включительно. Этапы с 5 по 12 — это клиентская оптимизация. Время, затраченное на каждый из этих этапов, индивидуально для каждого сайта, поэтому необходимо получать метрики сайта и выявлять основной источник проблем. И здесь мы переходим к вопросу о том, как эти метрики получить и интерпретировать.

Измерение скорости сайта

Главный вопрос: что нужно измерять? Существует множество метрик по скорости сайтов, но основных не так много.

Во-первых, это время до первого байта (TTFB — time to first byte) — это время от начала процесса загрузки до получения первой порции данных от сервера. Это основная метрика для серверной оптимизации.

Во-вторых, это начало рендеринга страницы (start render, first paint). Метрика показывает время до окончания периода «белого экрана» в браузере, когда начинается отрисовка страницы.

В-третьих, это загрузка основных элементов страницы (load time). Сюда входит загрузка и интерпретация всех ресурсов для работы со страницей, после этой отметки индикатор загрузки страницы перестаёт крутиться.

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

Эти основные метрики измеряются в секундах. Также полезно иметь оценку объёма трафика для третьей и четвёртой метрики. Трафик нужно знать для оценки влияния скорости соединения на время загрузки.

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

Один из самых мощных инструментов — панель разработчика в браузере. Наиболее развитая функциональность у панели в Chrome. На вкладке Network можно получить метрики по времени загрузки всех элементов, включая сам HTML-документ. При наведении на элемент можно узнать, сколько времени потрачено на каждый этап получения ресурса. Для оценки полной картины процесса загрузки страницы можно воспользоваться вкладкой Performance, которая даёт полную детализацию вплоть до времени декодирования картинок.

Если нужно оценить скорость сайта без полной детализации, полезно запустить аудит сайта (вкладка Audits), он будет проведён с использованием плагина Lighthouse. В отчете мы получаем оценку скорости для мобильных устройств (как интегральную в баллах, так по нашим основным метрикам) и несколько других отчетов.

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

Для быстрой оценки клиентской оптимизации можно воспользоваться сервисом Google PageSpeed Insights, но нужно помнить, что он не включает в себя большинство важнейших метрик по времени загрузки. Наконец, полезно анализировать время загрузки сайта у реальных пользователей. Для этого есть специальные отчеты в системах веб-аналитики Яндекс.Метрике и Google Analytics.

Ориентиры для времени загрузки сайта такие: начало рендеринга около 1 секунды, загрузка страницы в пределах 3–5 секунд. В таких рамках пользователи не будут жаловаться на скорость сайта и время загрузки не будет ограничивать эффективность сайта. Эти цифры должны достигаться именно у реальных пользователей, даже в сложных условиях мобильного подключения и устаревших устройств.

Серверная оптимизация

Перейдём к самому ускорению сайта. Оптимизация серверной части — наиболее понятная и очевидная мера для разработчиков сайта. Во-первых, серверная часть достаточно легко мониторится и контролируется на стороне системных администраторов. Во-вторых, при серьёзных проблемах со временем ответа сервера замедление заметно для всех, независимо от скорости подключения или устройства.

При том что причины торможения серверной части могут быть самые разнообразные, есть типичные места, на которые нужно посмотреть.

Хостинг (серверные ресурсы)

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

СУБД (сервер базы данных)

Здесь мы уже переходим к решению источника проблемы: низкой скорости работы программного кода. Часто большая часть времени веб-приложения тратится на запросы к БД. Это логично, потому что задача веб-приложения сводится к сбору данных и преобразованию их по определённому шаблону.

Решение проблемы медленных ответов от БД обычно разделяется на два этапа: тюнинг СУБД и оптимизация запросов и схемы данных. Тюнинг СУБД (например, MySQL) может дать ускорение в несколько раз, в случае, если настройка ранее вообще не проводилась. Тонкий тюнинг может дать эффект в пределах десятка процентов.

Оптимизация запросов и схемы данных это радикальный способ ускорения. За счет такой оптимизации можно получать ускорение на несколько порядков. Если изменение структуры БД может происходить без вторжения в программный код сайта, то оптимизация запросов такое вмешательство потребует.

Для выявления медленных запросов нужно собрать статистику по нагрузке на БД за довольно продолжительный промежуток времени. Далее проводится анализ лога и выявление кандидатов на оптимизацию.

Влияние CMS и программного кода

Довольно широко распространено мнение, что скорость сайта зависит только от CMS («движка»). Владельцы сайтов часто пытаются разделить CMS на быстрые и медленные. На самом деле, это не совсем так.

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

Тем не менее, помимо основного кода CMS, сайт может содержать дополнительные модули (плагины), расширения и модификации от разработчиков сайта. И уже этот код может оказывать негативное воздействие на скорость сайта.

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

Кэширование

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

Как правило, кэширование страниц позволяет сократить время отдачи страницы до десятков миллисекунд. Естественно, что в этом случае сервер легко переживает пики посещаемости. Проблемы здесь две: не всё можно закэшировать и кэш нужно грамотно инвалидировать (сбрасывать). Если проблемы решаются, кэширование можно рекомендовать как эффективное средство серверного ускорения.

Оптимизация TCP, TLS, HTTP/2

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

Тюнинг TCP сегодня требуется для больших проектов и серверов с подключением от 10G, основное, что нужно помнить: сетевая подсистема регулярно обновляется с выходом новых ядер Linux, поэтому стоит обновляться. Правильная настройка TLS (HTTPS) позволяет получить высокий уровень безопасности и максимально сократить время установления защищенного соединения. Хорошие рекомендации выпущены компанией Mozilla.

Новая версия HTTP протокола — HTTP/2 призвана ускорить загрузку сайтов. Этот протокол появился недавно и сейчас активно используется (около 20% доли среди веб-сайтов). В общем, в HTTP/2 действительно заложены механизмы ускорения, основной — снижение влияния сетевых задержек на время загрузки страницы (request multiplexing). Но ускорение за счет HTTP/2 далеко не всегда успешно, поэтому не стоит уповать на этот протокол.

Клиентская оптимизация

В отличие от серверной оптимизации, клиентская направлена на всё, что происходит в браузере пользователя. Из-за этого усложняется контроль (различные устройства и браузеры) и возникает множество разных направлений оптимизации. Мы посмотрим на самые действенные и универсальные методы, которые можно использовать практически в любом проекте.

Оптимизация критического пути: CSS, JS

Критический путь рендеринга (critical rendering path) — набор ресурсов для начала отрисовки страницы в браузере. Как правило, в этот список входят сам HTML-документ, CSS-стили, веб-шрифты и JS-код.

Наша задача как оптимизаторов скорости сократить этот путь как по времени (с учетом задержек сети), так и по трафику (чтобы учесть медленные соединения).

Самый простой путь определить критический путь: запустить аудит в Chrome (в панели разработчика), плагин Lighthouse определяет его состав и время загрузки с учетом медленного подключения.

Основная техника в сокращении критического пути: убираем всё, что не нужно или можно отложить. Например, большинство JS-кода можно отложить до загрузки страницы. Для этого размещаем вызов JS-ресурса в конце HTML-документа или используем атрибут async.

Для отложенной загрузки CSS можно воспользоваться динамическим подключением стилей через JS (дождавшись события domContentLoaded).

Оптимизация веб-шрифтов

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

Ситуация ухудшается тем, что часто указатели на файлы шрифтов закопаны в CSS-файле, который также приходит не мгновенно. Многие разработчики любят пользоваться публичными сервисами веб-шрифтов (например, Google Fonts), что вызывает еще большие задержки (дополнительные подключения, CSS-файл).

Правила оптимизации заключаются в сокращении размера трафика веб-шрифтов и получении их как можно быстрее.

Чтобы сократить трафик нужно использовать современные форматы: WOFF2 для современных браузеров, WOFF для совместимость. Кроме того, нужно включать только те наборы символов, которые используются на сайте (например, латиница и кириллица).

Повлиять на быстрое отображение веб-шрифтов можно с помощью новых спецификаций link rel=«preload» и CSS-свойства font-display. Preload позволит как можно раньше указать браузеру о необходимости загрузки файла шрифта, а font-display даёт гибкие возможности по управлению поведением браузера в случае задержки файла (подождать, отрисовать запасной, не ждать шрифт более трех секунд)

Оптимизация изображений

Изображения составляют большинство веса современного сайта. Конечно, картинки это не такие критичные ресурсы для страницы, как CSS- и JS-код. Но для множества сайтов изображения составляют важную часть контента: вспомним любую карточку товара в интернет-магазине.

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

• PNG для картинок с прозрачностью и текстом;
• JPEG для фото и сложных изображений;
• SVG для векторной графики.

Для PNG существует множество утилит по оптимизации, которые можно использовать для сокращения размера, например, OptiPNG, PNGout, ect и другие. Также внутреннюю оптимизацию сжатия данных можно проводить с помощью zopfliPNG. Основная идея такого софта в подборе оптимальных параметров компрессии, удалении лишних данных из файла. Здесь нужно быть осторожным: некоторые утилиты имеют режим с потерей качества, что может не подходить вам (если вы ожидаете на выходе точно такую же картинку).

Оптимизация JPEG также разделяется на два типа: с потерями и без потерь. В целом можно порекомендовать пакет Mozilla JPEG, который специально разработан для лучшего сжатия в этом формате. Для оптимизации без потерь можно использовать jpegtran, с потерями — cjpeg.

Кэширующие заголовки

Это наиболее простая методика клиентской оптимизации. Её смысл в кэшировании браузером редкоизменяемых ресурсов: картинок, CSS и JS-файлов, шрифтов, иногда даже самого HTML-документа. В результате каждый ресурс запрашивается с сервера только один раз.

Если вы используете Nginx, достаточно добавить директиву:

С этого момента браузер имеет право кэшировать ресурсы на срок до года (что практически навсегда). Новый параметр «immutable» говорит о том, что ресурс не планируется изменять.

Конечно, возникает вопрос: а что делать, если нам нужно изменить закэшированный ресурс? Ответ прост: изменить его адрес, URL. Например, можно добавить версию в имя файла. Для HTML-документов такой метод также применим, но, как правило, используется более короткий срок кэширования (например, одна минута или час).

Сжатие данных

Обязательная практика это сжатие любых текстовых данных при передаче от сервера браузеру. Большинство веб-серверов имеют реализацию gzip-сжатия ответов.
Однако, простой активации сжатия недостаточно.

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

Во-вторых, можно использовать статическое сжатие, то есть предварительно сжать файлы и положить на диск. Тогда веб-сервер будет искать сжатую версию и сразу её отдавать.В-третьих, можно использовать более эффективные алгоритмы сжатия: zopfli (совместим с gzip) и brotli (новый алгоритм сжатия). Brotli будет работать только с HTTPS. Так как эти алгоритмы (особенно zopfli) затратны при сжатии, обязательно используем их в статическом варианте.

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

Использование CDN

Применение CDN (content delivery network) для ускорения сайтов очень разрекламированная мера, имеющая много маркетинговой шелухи вокруг сути технологии.

Теория: зачем

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

Решение этой проблемы было в создании CDN, то есть распределённой сети, к которой подключались клиенты (например, зрители), а хосты этой сети уже к серверу (origin). При этом количество подключений к серверу сокращалось до одного (нескольких), а количество подключений к CDN могло достигать миллионов за счет кэширования контента сетью.

Сегодня большинство CDN позиционируют себя как средство ускорения сайтов, в первую очередь за счет сокращения расстояния от контента до клиента (посетителя сайта).

Возможные эффекты

Как можно ускорить сайт с помощью CDN?

Да, действительно пользователь подключается, как правило, к ближнему (по времени доступа) серверу сети и получает быстрый процесс установления TCP и TLS-соединения. Далее, если контент находится на сервере CDN, пользователь может быстро его получить. Таким образом, снижается нагрузка на наш собственный сервер.

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

Недостатки использования CDN

Недостатки, как обычно, продолжение достоинств: объект может быть не в кэше узла CDN. Например, он ещё не запрашивался или его нельзя кэшировать (HTML-документ). В этом случае мы получаем дополнительные задержки между узлом CDN и нашим сервером.

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

Наконец, сети доставки контента это очень сложные системы, в которых также как везде возможны сбои, нестабильность и другие проблемы. Используя CDN, мы добавляем еще один уровень сложности.

Закрепляем результат

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

Поддержка ускорения

Любой живой веб-проект регулярно дорабатывается, изменения происходят как в общих шаблонах (темах оформления, интерфейсах), так и контенте. Также активно меняется программный код (как клиентский, так и серверный).

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

Для оптимизации поступающего контента требуется интеграция оптимизирующих процедур в систему управления контентом. Прежде всего это касается обработки изображений.

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

Мониторинг реальной скорости у пользователей

Синтетическое тестирование в идеальных лабораторных условиях очень полезно для оценки изменений в коде системы, но его недостаточно. В конце концов мы хотим, чтобы сайт работал быстро у реальных пользователей. Для сбора таких данных существует мониторинг скорости на стороне пользователей (RUM — real user monitoring).

Чтобы организовать RUM, достаточно подключить одну из систем веб-аналитики (Яндекс.Метрика, Google Analytics) и посмотреть отчеты по времени загрузки сайта. Для более подробных и точных данных можно использовать специализированные сервисы мониторинга скорости.

Выводы

Индустрия ускорения сайтов — довольно молодая отрасль веб-разработки и активно развивается. Важность скорости сайтов для интернет-бизнеса уже очевидна, она становится одним из факторов конкуренции. Именно поэтому стоит заниматься оптимизацией скорости сайта и делать вложения в эту область.

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

Самое главное: помнить о пользователях, учитывать разнообразные условия использования сайта. Ускорение сайта — процесс, который с разной интенсивностью происходит на всём жизненном цикле проекта.