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

Учитывайте особенности скорости интернет-соединения.

Ваш сайт грузится хорошо при отличной скорости соединения (100 мб) и вы этим гордитесь?

Не стоит, почивать на лаврах, пока вы не опробуете 3G.

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

Жажда скорости

47% пользователей не готовы ждать более 2-х секунд. А 1 дополнительная секунда ожидания может уменьшить конверсию на 7% (исследование kissmetrics). Комплексный аудит сайта от WEBAPEX гарантировано улучшит ваш проект.

На что влияет скорость сайта?

1. Взаимодействие пользователя с сайтом

Не испытывайте ваших клиентов медленной загрузкой сайта. Только самые терпеливые будут ждать более 5 секунд. А постоянный опыт такого взаимодействия надолго оттолкнет клиентов от вашего сайта. Итогом может стать:

Уменьшение конверсии
Отказ от использования сайта в своих целях
Негативные отзывы своим друзьям и коллегам

2. На поисковые системы Google и Яндекс

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

Думаю более разъяснений не требуется.

10 способов увеличить скорость загрузки сайта

Способ 1. Количество подключенных скриптов
Способ 2. Хостинг скорость работы
Способ 3. Структура базы и запросы к ней
Способ 4. Качество и количество изображений
Способ 5. Кеширование на стороне сервера

Способ 6. Используйте технологии для мгновенной загрузки контента
Способ 7. CDN
Способ 8. Включен gzip
Способ 9. RESS
Способ 10. Использование AJAX после загрузки страницы

Способ №1: Количество подключенных скриптов

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

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

Важно, где будет размещен определенный файл стилей или файл скриптов. По рекомендациям поисковых систем, файл стилей должен находиться пере тегом закрытия шапки </head>, а файл стилей перед закрытием тела, тега </body>

Почему так необходимо минимизировать файлы:

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

Способ 2: Хостинг скорость работы

Хостинг отыгрывает свою незаменимую роль, т.к. по рекомендации Google необходимо, чтобы сайт формировался на стороне сервера не дольше 0,2 секунды. А чтобы не допускать такого, необходимо четко понимать какой тарифный план необходим для определенного сайта. Ведь каждая CMS имеет свои минимальные требования, чтобы система работала корректно.

Важно также качество предоставления услуги хостинга.

В нашем практике был случай, когда время ответа сервера с 0,3 до 0,9 снизило трафик сайта на 35%. После того как мы поменяли хостинг провайдера, трафик восстановился спустя 2 месяца.

Способ 3: Структура базы и запросы

Чем быстрее произойдет обработка запросов к базе данных, тем быстрее отобразится информация на сайте.

Необходимо исключать дублирование одинаковых запросов.

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

Верные и точные запросы на определенные страницы.

Тут понимание должно быть таково: запрос должен соответствовать обработанным данным, которые будут преобразованы в информацию для отображения.

Способ 4: Качество и количество изображений

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

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

Важно понимать, где использовать фото, а где шрифт или же css код, какой использовать тип изображения. Например: прозрачность png, цельное фото jpg или векторное svg.

Рекомендуем программы для сжатия изображений:

Panda.png

Optimizilla

Способ 5: Кеширование на стороне сервера

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

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

Способ 6: Используйте технологии для мгновенной загрузки контента Google и Яндекс

Google и Яндекс внедрили технологии быстрой загрузки контента. AMP (Accelerated Mobile Pages) и Яндекс Турбо страницы.

За счет чего достигается высокая скорость загрузки?
Контент вашей страницы кэшируется на серверах Google и Яндекса, после чего подгружается за 1 секунду с этих серверов, а не с сервера, на котором расположен ваш сайт.

Возможности AMP и турбо страниц сильно ограничены.

За счет этого код страниц значительно легче в сравнении с кодом исходной (оригинальной) страницы.

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

Способ 7: CDN

CDN - Сеть доставки (и дистрибуции) содержимого - географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям в сети Интернет.

Википедия

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

CDN сокращает маршрут передачи данных до пользователя.

Пример: если вы находясь в Украине, зайдете на Американский сайт, то CDN будет подгружать информацию с Украинских серверов (в идеале) или самой ближайшей точки к вам, а не из сервера США.

Использования CDN подразумевает за собой быструю загрузку определенных данных. Его эффективно использовать для загрузки:

стилей и скриптов
изображений и видео
программ

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

Способ 8: Включение gzip

Включение gzip поможет, когда необходимо уменьшить вес сгенерированного кода страницы, зачастую это html, css, js.

Способ 9: RESS

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

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

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

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

Способ 10: Использование AJAX после загрузки страницы

Есть данные на странице, которые и вовсе не нужны в момент загрузки страницы. Например такие как формы, бренды, клиенты и т.д..

Для загрузки такой информации хорошо использовать ajax после того, как страница уже полностью загружена.

Данный способ хорош, если использование ajax не будет отвлекать пользователя от погрузок.

Контент не должен прыгать, когда ajax сделал свою обработку и вывел информацию на страницу.

Как проверить скорость сайта: 5 инструментов для проверки

Перед тем как делать проверку скорости сайта, нужно понять, что конкретно вы хотите проверить:

1. Как сайт выдерживает высокую нагрузку?
2. Какие общие ошибки присутствуют в загрузке сайта?
3. Как работает сервер вашего хостинга?

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