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

Ускоряем загрузку сайта
Smart Sites
Февраль 05, 2019г.
Ускорение загрузки сайта описание

Специалистами компании Smart Sites было подготовлен небольшой пост для нашего корпоративного блога на тему скорости загрузки сайта. Если у вас появятся вопросы или дополнительно что-то хотите сказать, обязательно нам пишите!

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

Ускорение загрузки сайта - основное

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

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

  1. Местоположение сервера, за счет которого загружается контент
    Подразумевается географическое расстояние между сервером и клиентом
  2. Контент, передающийся сайтом
    HTML-код, изображения, CSS, JavaScript и прочее (Front-end сайта)
  3. Как совершается передача контента страницы
    Для этого имеется ряд действующих приемов ускорения передачи контента в сети Интернет (они также будут рассмотрены нами)
  4. Каким образом контент формируется
    Уходит эпоха привычных статичных сайтов, работающих на одних лишь HTML и CSS. На современных сайтах используется гораздо больше технологий - это базы данных и серверные языки программирования (Back-end сайта), такие как PHP и ASP.

Разберемся, как именно можно улучшить эффективность по каждому из этих процессов.

Удаленность сервера от клиента

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

Географическая удаленность

Самый понятный момент из всех. Передача информации происходит с определенной скоростью, зависящей от местоположения клиента. Чем больше расстояние от сервера до пользователя, тем дольше время передачи пакета информации (ping), а также возможная потеря пакетов.

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

DNS

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

Контент страницы

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

Изображения

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

  • Большой размер изображения в пикселях масштабируется с помощью CSS-стилей, но браузер загружает весь файл.
  • Неразумно используют формат изображения. Например, объем изображения в формате PNG в разы отличается в большую сторону, чем в JPEG.
  • Разрешение изображений намного больше, чем нужно. Современные мониторы одинаково показывают картинки разрешения выше 96 dpi (120 dpi на передовых моделях). На сайтах же оказываются файлы разрешения 300 dpi.

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

С помощью бесплатной программы Xenu Link Sleuth можно просканировать и собрать статистику сайта с объемом изображений, адресами и форматами. При помощи готового отчета Xenu отбираются тяжелые изображения, затем скачиваются оптом утилитой wget.

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

Способы ускорения сайта – путём сжатия изображений

Стили и программный код

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

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

Помощник в этом деле – технология “Minify” (минификация) для автоматического сжимания и слияния js- и css-файлов с целью улучшения производительности.

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

Оптимизация передачи контента

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

Компрессия текстовых данных

Данный метод подходит для сжатия лишь текстовой информации (HTML, CSS, программного кода), но бесполезен для передачи изображений и файлов сложных форматов.

Gzip-сжатие получило широкое распространение, функционирует на большинстве сайтов.

Браузерное кэширование

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

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

Вот основные:

  • Expires содержит дату и время (по Гринвичу), контент считается актуальным до этого момента. Например, Expires: Fri, 1 Feb 2019 13:59:58 GMT – браузер не запрашивает страницу у сервера, а использует ее копию до пятницы 1-го февраля 2019 года.
  • Cache-Control задает актуальность кэша в секундах относительно времени запроса, а также ограничивает кэширование, например, на публичных proxy-серверах или непосредственно в браузерах. Кэширование можно запретить совсем.

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

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

Например, на web-странице строительного магазина расположено 15 товаров, согласно алгоритму объединяются артикулы этих товаров в единую строку, рассчитывается ее кэш-сумма, данные выводятся в Etag.

Пока на странице размещены именно эти 15 товаров, заголовок имеет одно и то же содержимое, страница, соответственно, загружается из кэша.

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

Проверка актуальности кэша происходит так:

  • Проверка браузера о разрешении кэширования в Cache-Control.
  • Проверка на дату, указанную в заголовке Expires, если имеется разрешение о кэшировании и страница есть в кэше. Когда дата не превысила указанную, страница берется из кэша.
  • Когда дата достигнута, обращаемся к Etag. Если сохраненный заголовок валидации и значение с сервера совпадают, страница не изменилась, можно взять контент из кэша. Если заголовки различаются или отсутствуют, страницу нужно запросить контент с сервера.

Если отсутствуют все заголовки, страница не кэшируется совсем.

Настроить отдачу описанных заголовков можно тремя способами:

  1. Генерацией при создании страницы с помощью php или другого серверного языка программирования.
  2. Настройкой отдачи сервером при помощи файла .htaccess.
  3. Корректировкой данных непосредственно на сервере.

Достаточно иметь доступ к файлам сайта по FTP. Рекомендуется работать с заголовками с помощью функций php. Сервера неверно вычисляют даты изменений и контент динамических страниц. При использовании собственных алгоритмов обеспечивается полная управляемость кэшем.

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

Ускорение сайта – оптимизация кода страниц

HTML-кэш на жестком диске

На жестком диске размещается HTML-кэш динамических страниц. Сервер генерирует страницу при ее первом обращении к нему, включает запросы к базе данных, исполняет php-код. Копия страницы сохраняется на жестком диске и выдается клиентам при последующих обращениях (от любого посетителя).

Данные алгоритмы работают и с отдельными SQL-запросами, сохраняя их результаты на диск. А программное обеспечение Memcached реализует сервис кэширования данных в оперативной памяти на основе хеш-таблицы, позволяет кэшировать данные в оперативной памяти множества доступных серверов. Но для необходимого объема кэша может не хватить оперативной памяти сервера, сайт не будет нормально функционировать. Поэтому для применения данной технологии и ее внедрения необходимо довериться специалистам.

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

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

Асинхронная загрузка JavaScript

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

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

Надеемся, данная информация была Вам полезна!

Smart Sites
Разработка и продвижение сайтов в поисковых системах
alarm_on 05.02.2019
remove_red_eye 132
Другие записи