Играет роль каждая секунда
Согласно исследованиям, среднее время загрузки мобильной страницы составляет 9,2 секунды. Между тем, Google рекомендует, чтобы открытие страницы занимало не более 3 секунд. Как повысить скорость страницы и снизить показатель отказов?
Наверняка многие из вас, просматривая веб-страницы, сталкивались с сайтом, который загружался слишком долго, из-за чего вы нервничали и в конечном итоге закрывали вкладку браузера. В настоящее время создаются красивые веб-сайты, которые, к сожалению, содержат все больше и больше решений, функций и графики. Они увеличивают вес сайта и, следовательно, время его загрузки.
При загрузке сайта каждая дополнительная секунда снижает удовлетворенность пользователей на 16%, количество просмотров страниц на 11%, что вызывает снижение конверсии на 7%. Может случиться и так, что пользователь больше никогда не вернется на сайт.
Согласно последним сообщениям, Google также будет уделять все больше и больше внимания скорости загрузки страниц.
Ниже представлено несколько способов эффективного ускорения вашего сайта, которые уменьшат раздражение пользователей и повысят коэффициент конверсии.
Сервер с хорошими параметрами
Даже оптимизированный веб-сайт может иметь длительное время загрузки. Одной из причин могут быть плохие параметры сервера, на котором расположен сайт, что значительно увеличивает время его отклика. Google рекомендует, чтобы время ответа сервера не превышало 0,2 секунды.
Сегодняшний рынок компаний, предлагающих хостинг веб-сайтов, очень велик, поэтому, если вы находитесь на этапе смены или выбора хостинга, стоит сравнить предложения разных провайдеров и избегать самых дешевых. Из-за размера этого рынка услуг легко найти действительно конкурентоспособные предложения по хорошим ценам.
Оптимизация графических файлов
Графика, несомненно, является одним из наиболее распространенных элементов, вызывающих большой вес страницы и длительное время загрузки. Многие люди, создающие собственные сайты, забывают об этом важном аспекте. Ошибки оптимизации графики включают в себя отсутствие сжатия или установку слишком большого размера фотографии, несмотря на то, что она отображается на странице в меньшем размере.
Когда дело доходит до встраивания графики в нужном размере, следует помнить об одном: если изображение 250×250, оно должно быть добавлено на страницу именно в этом размере, а не больше. Здесь помогут простые графические редакторы, которые имеют возможность масштабировать и обрезать изображения.
Если на сайте большое количество графических элементов, то сразу после их оптимизации вы ощутите видимые эффекты в виде более высокой производительности страницы.
Объединение и минимизация CSS и JS
Объединение всех файлов CSS и JS в один позволяет уменьшить количество запросов к серверу, что минимизирует время загрузки страницы. Это связано с тем, что один файл большего размера будет загружен быстрее, чем двадцать файлов меньшего размера.
Каждый файл загружается по очереди, поэтому браузер должен дождаться завершения загрузки текущих файлов, чтобы загрузить новые файлы. Следующим шагом после объединения файлов CSS и JS является их минификация, т. е. удаление ненужных символов, строк и пробелов без изменения функциональности кода. Такая процедура может уменьшить файлы с нескольких десятков до нескольких сотен килобайт, в зависимости от размера файла.
Перемещение ненужных скриптов
Все JS-скрипты, не влияющие на правильную загрузку сайта, должны быть перемещены вниз страницы до закрытия тега </body> (конечно, только если это не оказывает негативного влияния на работу страницы). Такое изменение позволит быстрее подгружать нужный контент, так как скрипты не будут загружаться в начале загрузки WWW, что также положительно скажется на восприятии сайта пользователем.
CSS-спрайты
Современные веб-сайты характеризуются тем, что содержат множество мелких графических элементов (в виде иконок, стрелок и т. д.), которые придают веб-сайту более качественный и современный вид. Их появление, однако, может вызвать задержку загрузки страницы и увеличить количество запросов к серверу из-за загрузки каждого маленького изображения по очереди.
Решением этой проблемы являются спрайты CSS, которые представляют собой технику, позволяющую объединять небольшие графические объекты в один файл и использовать их на странице таким же образом, используя стили CSS.
Кэш браузера
Очень хороший способ повысить производительность страницы — настроить кэширование данных. Благодаря этому решению браузер будет хранить веб-ресурсы на жестком диске пользователя. Это можно сделать с помощью плагина (например, в WordPress) или добавив несколько строк кода в файл .htaccess.
Для человека, который посещает ваш сайт во второй и последующий разы, ресурсы сайта не будут загружаться с сервера. Они будут загружены из кэша, благодаря чему страница будет загружаться намного быстрее.