Одна из самых важных задач для менеджеров веб-сайтов — сделать просмотр как можно более приятным. На самом деле, при слишком длительном времени загрузки вы рискуете вызвать у посетителей нетерпение, а при растущем трафике с мобильных устройств эту проблему нельзя упускать из виду. Если вы следите за работой своего сайта и хотите ее улучшить, проверьте, чтобы ваши посетители проводили больше времени на вашей странице и не покидали ее после первого просмотра. Таким образом, вы будете лучше оценены поисковыми системами, и получите лучшее позиционирование.
Вы можете проверить текущую скорость вашего сайта с помощью бесплатного теста скорости, такого как Google PageSpeed Insights или pingdom. Этот тип теста измеряет и оценивает производительность сайта с учетом независимых от сети аспектов, таких как мультимедийный контент или структура кода HTML. Эти инструменты анализируют как настольную, так и мобильную версии вашего сайта, давая рекомендации по их улучшению.
Какие аспекты влияют на скорость загрузки? В этой статье мы говорим о том, что может замедлять работу сайта, и раскрываем некоторые возможные решения.
Хостинг
Сначала спросите себя, подходит ли используемый вами хостинг для нужд вашего сайта. Многие операторы сайтов хотят сэкономить на производительности и емкости серверов и выбирают самое дешевое предложение. Следствием этого является то, что в самый неподходящий момент не хватает пропускной способности для обработки всех запросов пользователей. Особенно во время большого трафика и в случае быстрого роста числа посетителей дешевые хостинговые решения, в которых, например, несколько клиентов используют один и тот же сервер, очень часто оказываются неподходящими. Еще одна типичная ошибка — разместить свой сайт на сервере за границей., хотя предложение в основном ограничено внутренним рынком: это также увеличивает время загрузки для ваших посетителей.
Что делать :
- Используйте гибкие хостинговые решения с неограниченным веб-пространством и трафиком.
- Используйте сервер, который находится в дата-центрах той страны, откуда приходит большинство ваших посетителей.
- Используйте сеть доставки контента, если хотите охватить международную аудиторию.
- Управляйте сервером самостоятельно и адаптируйте его под свой проект.
HTML, CSS и JavaScript
Когда пользователи просматривают ваш сайт, их браузер запрашивает файл HTML с вашего сервера и отображает его в соответствии с указанным форматированием CSS. То же самое касается элементов JavaScript, которые отображаются в виде баннеров или бегущих строк. Чем больше файлы, тем больше кодов нужно прочитать и передать , и тем больше времени занимает процесс. Однако каскадные таблицы стилей и скрипты особенно важны для динамических сайтов: поэтому отказ от них в пользу высокой скорости сайта не является хорошим решением. Вам лучше сосредоточиться на оптимизации ваших кодов.
- Используйте файлы HTML только для информации, несовместимой с CSS
- Используйте отдельные файлы для CSS и JavaScript и пишите CSS и JavaScript прямо на HTML-странице только в исключительных случаях (команды JavaScript всегда должны располагаться в конце документа, перед элементом body ).
- Сжатие и суммирование файлов кода.
- Используйте новую технологию программирования WebAssembly.
Изображения и внешний контент
Мультимедийный контент является важным компонентом сайта и, так же как дизайн и верстка, способен значительно повысить эффективность текстового контента. Особенно в электронной коммерции их цель - представить ваши продукты с качественными изображениями . Каждое добавленное изображение увеличивает время загрузки страницы, особенно если они сохранены на вашем сервере. Это также относится к другим медиафайлам, таким как музыка, видео или PDF-файлы.
Что делать :
- Загружайте как можно меньше элементов с внешних страниц.
Избегайте ненужных изображений, видео и других мультимедийных элементов. - Сжимайте изображения с помощью инструмента.
- Сохранение изображений на внешний сервер.
- Укажите ширину и высоту изображений (иначе они рассчитываются браузером автоматически).
- Используйте иконки SVG ( Scalable Vector Graphics ).
- Задержите процесс загрузки всех изображений за пределами области отображения с помощью плагина jQuery Lazy Load (они загружаются только тогда, когда посетитель прокручивает панель до изображения).
- Используйте эффективный формат изображений WebP.
Кэширование
Многие сайты имеют медленную загрузку, потому что они не используют системы кэширования. Если вы начнете кэшировать контент, вы сможете оптимизировать свой сайт с гораздо меньшими усилиями и быстрее. Кэшированный контент не нужно снова запрашивать с сервера при каждом просмотре, и поэтому он загружается быстрее. Плюс веб-сервер работает без перезагрузки, который, таким образом, должен обрабатывать меньше запросов. Вы можете кэшировать все статические элементы, такие как файлы JavaScript и CSS, изображения или документы, и определять, как долго они должны оставаться там.
Что делать:
- Используйте браузер посетителя в качестве кеша (кэш браузера): например, на сервере apache включите модуль mod_expires и определите, как долго связанные типы файлов должны оставаться в кеше; обо всем остальном позаботится браузер пользователя.
- Настройте обратный прокси-сервер и используйте его в качестве кэша (веб-кеша) или используйте сеть доставки контента, которая дает вам доступ ко всей сети глобально распределенных прокси-серверов.
- Используйте программное обеспечение для кэширования, такое как memcached, для хранения динамического содержимого в памяти и, таким образом, уменьшения доступа к данным.
Дополнительные советы и рекомендации по оптимизации сайта
В дополнение к пунктам, изложенным выше для оптимизации производительности вашего сайта, есть и другие небольшие меры, которые помогают сократить время загрузки, например:
- Свести к минимуму редиректы
- Введите кодировку символов в HTML-документе
- Регулярно удаляйте плохой контент
- Избегайте чрезмерного использования плагинов в CMS
- Ограничьте информацию, собираемую в файлах cookie
- Используйте фавиконы (поскольку браузеры всегда запрашивают у веб-серверов файлы favicon.ico)
- Включите протокол HTTP/2 .
Если вы никогда раньше не применяли меры, которые делают ваш сайт быстрее, вам следует начать это делать. В исследовании 2017 года Google обнаружил, что вероятность того, что пользователь покинет сайт, увеличивается на 123% для страниц, посещенных с мобильных устройств, если время загрузки составляет более 10 секунд. Уже с 5 секунд вероятность на 90% выше, чем обычно. Вот почему обеспечение быстрой и бесперебойной работы сайта должно быть приоритетом для каждого веб-мастера.
Если вы не хотите сразу потерять потенциальных клиентов или заинтересованных лиц, вам следует действовать заблаговременно, оптимизируя свой сайт и делая его конкурентоспособным в эпоху мобильных устройств.