Дизайн — статьи о сайтах
Клиенты бухгалтерской фирмы часто заходят на сайт в спешке: перед сроками сдачи отчётности, с телефона, в перерыве между делами. Если страница с услугами и тарифами открывается долго, человек вернётся к поисковой выдаче и откроет сайт конкурента. Ниже о том, как найти причины медленной загрузки и что с ними делать.
Как понять, что именно тормозит страницу
Не начинайте с догадок. Откройте главную и страницу самой востребованной услуги в Google PageSpeed или YSlow. Затем посмотрите вкладку «Сеть» (Network) в Firebug или в инструментах разработчика Chrome. Вы увидите, сколько файлов загружает страница, какие из них самые тяжёлые и в какой момент появляется текст. Эти данные нужны разработчику, чтобы назвать конкретные причины и порядок работ.
Отдельно проверьте время ответа сервера: сколько проходит до первого байта страницы. Если оно велико, оптимизация картинок мало что изменит, и дело в хостинге или в работе CMS.
Что обычно утяжеляет сайт бухгалтерской фирмы
- Слайдер на главной с крупными фотографиями офиса и сотрудников.
- Сканы свидетельств, лицензий и благодарственных писем, вставленные в полном размере.
- Информеры курсов валют и новостей, которые подгружаются с чужих серверов.
- Кнопки соцсетей и несколько счётчиков посещаемости.
- Несколько копий jQuery и плагинов, подключённых разными модулями.
- Калькулятор стоимости обслуживания, написанный на тяжёлой библиотеке.
- Много начертаний веб-шрифтов ради одного заголовка.
Условный пример: страница «Бухгалтерское обслуживание ИП»
Представим страницу, собранную «как обычно». Это иллюстрация, а не данные о реальном проекте. В шапке слайдер из пяти фото шириной 1600 px, хотя на экране они занимают 960 px. Ниже таблица тарифов, три скана свидетельств в оригинальном размере и информер курсов валют. В подвале кнопки соцсетей и три счётчика. Скрипты подключены в начале страницы.
Браузер доходит до текста и тарифов только после загрузки всех скриптов из head. Посетитель в это время смотрит на белый экран. Поправить это можно так:
<!-- было: в head -->
<script src='/js/slider.js'></script>
<!-- стало: перед закрывающим body -->
<script src='/js/slider.js'></script>
</body>Дальше по пунктам. Слайдер сократить до двух-трёх кадров, а фото сжать до реального размера блока. Сканы заменить миниатюрами, чтобы оригинал открывался только по клику. Информер курсов вынести ниже основного содержимого и загружать асинхронно. Кнопки соцсетей заменить обычными ссылками на страницы фирмы, а счётчики оставить только те, по которым вы действительно смотрите отчёты.
Картинки, скрипты и документы: что сделать в первую очередь
Фотографии сохраняйте в JPEG и подбирайте степень сжатия на глаз. Логотипы и значки лучше хранить в PNG. Мелкие иконки можно объединить в один файл (CSS-спрайт), и тогда браузер сделает один запрос вместо двадцати. В теге img указывайте ширину и высоту, чтобы страница не «прыгала» при загрузке.
Файлы CSS и JavaScript объедините и минифицируйте, оставьте одну версию jQuery. Для калькулятора из трёх полей не нужен тяжёлый плагин, хватит нескольких строк своего кода. Код счётчиков подключайте в асинхронном варианте, если его поддерживает сервис.
Бланки, договоры и прайс-листы в PDF не встраивайте в страницу. Давайте ссылку и рядом указывайте формат и размер файла, чтобы человек понимал, что скачивает.
Сервер, кэширование и сезонные пики
Попросите разработчика или хостинг-провайдера включить сжатие текстовых файлов (gzip, mod_deflate на Apache) и задать срок хранения для картинок, CSS и скриптов в заголовках Expires или Cache-Control. Тогда при втором визите браузер не будет скачивать неизменившиеся файлы заново.
Если сайт работает на WordPress, Joomla или «1С-Битрикс», включите кэширование страниц. Иначе CMS будет заново собирать одну и ту же страницу при каждом запросе. В периоды сдачи отчётности посетителей становится больше, поэтому проверьте, выдерживает ли тариф хостинга такую нагрузку. Для сайта с большим числом картинок может подойти CDN, но сначала разберитесь с весом страниц.
Проверочный список для обсуждения с разработчиком
- Известно ли время ответа сервера и сколько запросов делает главная страница?
- Подгоняются ли размеры картинок под реальный размер блока?
- Сокращён ли слайдер и заменены ли сканы документов миниатюрами?
- Подключены ли скрипты в конце страницы или асинхронно?
- Объединены и минифицированы ли CSS и JS, нет ли дублей jQuery?
- Включены ли gzip и кэширование статических файлов?
- Информеры и кнопки соцсетей действительно нужны? Не блокируют ли они загрузку страницы?
- Включено ли кэширование страниц в CMS?
- Проверена ли страница с мобильного телефона через мобильный интернет?
После правок замерьте результат теми же инструментами, что и в начале, и сравните. Тогда будет видно, какие изменения дали эффект, а какие можно было не делать.
