Оптимизация скорости загрузки сайта

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

Табличная верстка

Использование табличной верстки и конструкций style в современных браузерах существенно замедляет производительность Вашего сайта. При создании сайта используйте современные подходы к верстке: адаптивные страницы с применением CSS.

Слишком много Flash и HTML 5

Веб-мастера всегда стремились добавить интерактивности своим сайтам. Перегруженность Flash анимацией и видеороликами существенно замедлит скорость обработки Вашего сайта. Сейчас Flash уходит в историю и вместо него применяется HTML 5. Но не спешите радоваться, несмотря на рекламируемую легковесность, HTML 5 нагружает систему пользователя не хуже «тяжелого» Flash.

JavaScript

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

Решением проблемы с низкой скоростью обратки JS скриптов служит разумное и достаточное применение JS-фреймворков для создания элементов сайта и минификация JS кода. Для PHPStorm IDE мы советуем использовать yui compressor, который создает отдельные минифицированные JS и CSS при каждом сохранении исходного кода. Среди онлайн сервисов можно выделить Javascript Minifier.

Медленный хостинг

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

Плохой код

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

Последняя миля

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

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

Основная проблема долгой загрузки сайта в изображениях. У нашей команды был случай, когда изображение на главной странице сайта весило 4 Мб, не считая остальных картинок. После сжатия и кадрирования, время загрузки упало с 4 секунд до 0.95сек. Сжимайте изображения с помощью Adobe Photoshop или бесплатной Pinta.

Старые браузеры

Старые браузеры не поддерживают новые стандарты веб-разработки, такие как flexbox и перенос вычислений на видеокарту.

Внешние ресурсы

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

Слишком сложный сайт

При создании сайта стоит помнить, что его единственная задача это покрывать потребности пользователя. Здесь стоит воспользоваться старым немецким лозунгом: Gut. Praktish. Quadratisch.

Простая оптимизация сайта

Большинство из этих проблем, кроме табличной верстки и плохого кода могут быть либо решены либо минимизированы. Для простой оптимизации сайта, перейдите на Google PageSpeed и введите адрес Вашего сайта После окончания обработки, в нижней части страницы будет ссылка «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы». Вам необходимо скачать архив и заменить данные файлы на хостинге, но изображения все же лучше сжимать вручную.