Хотите ли вы, чтобы ваш веб-сайт загружался молниеносно? Эта статья научит вас, как сделать так, чтобы веб-сайт загружался быстрее, чем вы когда-либо считали возможным.Для того чтобы понять, почему быстрый веб-сайт является важным, посмотрите на эту статистику: обычный пользователь смартфона покинет веб-сайт, если он не загружается в течение 3 секунд; Google считает, что «скорость страниц» является основным критерием для рейтинга в поисковых системах; 75% Интернет-пользователей согласились, что они не вернутся на сайт, если он не сработал в течение 4 секунд.
Иметь быстрый веб-сайта, является очень важным аспектом, если вы хотите остаться в живых в современную эпоху веб-дизайна. Честно говоря, для медленных веб-сайтов, просто не осталось больше места.
Что такое время загрузки веб-сайта?
Время загрузки веб-сайта напрямую зависит от запроса сделанного на сервер, чтобы загрузить веб-сайт. Чем больше HTTP запросов сделано на сервер, и чем дольше элементы предпринимают действие, тем медленнее будет работать веб-сайт.
Примеры запросов HTTP:
- загрузка листов стилей CSS;
- загрузки скриптов;
- загрузки изображений;
- загрузки HTML.
Другим фактором, который играет роль во время загрузки веб-сайта, является размер отдельных файлов и изображений. Большие изображения с высоким разрешением могут занять в 10 раз больше времени для загрузки, нежели обыкновенные изображения и излишне большие файлы могут существенно замедлить воспроизведение страницы.
Целью создания быстрого сайта заключается в том, чтобы сделать его более эффективным. Мы можем это сделать путем внесения ряда изменений в код, изображения и оформление нашего сайта.
Отслеживание скорости страниц
Мы можем отслеживать оценки скорости наших страниц через Page Speed от Google Insights или YSlow от Yahoo. У Google также есть плагин Page Speed, который прекрасно работает с Firefox, если у вас установлен Firebug.
Тестовый веб-сайт
Давайте возьмем веб-сайт, который находится в стадии разработки и используем его в качестве примера для этого урока. Первоначальная оценка скорости его страниц в Google составила 48 из 100 баллов. Он работает на платформе OS Commerce.
Шаг 1: сжатие изображений
Шагом номер один является сжатия всех изображений для веб-отображения. Мы можем сделать это с помощью компрессора изображений, по умолчанию встроенного в плагин Google’s Page Speed. Сохраните сжатую версию изображений в вашу локальную папку на компьютере и повторно загрузите изображения на место несжатых изображений.
Обновленный балл: 61 из 100
Шаг 2: масштабирование изображений
После сжатия изображений, мы должны изменить наши изображения так, чтобы они правильно масштабировались для веб-сайта. Такое действие позволяет избежать задержки, которая необходима серверу, для изменения размера изображений. Вы можете масштабировать изображения в Photoshop, адаптируя их под такой же размер пикселя, какой будет в вашем HTML коде.
Обновленный балл: 72 из 100
Шаг 3: использование браузерное кэширование
Кэширование браузера хранит кэшированные версии статических ресурсов. Это очень увеличивает скорость страницы и сокращает отставание сервера. Чтобы включить кэширование, вам нужно будет добавить следующий код в ваш файл .htaccess:
# BEGIN Expire headers ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType text/html "access plus 2592000 seconds" # END Expire headers
Обновленный балл: 78 из 100
Шаг 4: объединение изображений в CSS спрайты
Изображения могут быть объединены в спрайты CSS для того, чтобы сократить количество изображений, загруженных на данной странице. CSS спрайты это одно большое изображение, которое состоит из ряда небольших изображений. Сочетание 5 изображений в одном CSS спрайте, является быстрым способом ускорить веб-сайт, позволяя браузеру загрузить одно изображение вместо 5.
Самый простой способ создать CSS спрайты, это использовать программу SpriteMe
Удостоверьтесь, что вы сделали надлежащие изменения в CSS после создания спрайта изображений. Кроме того, обратите внимание на инструкцию по установке на сайте. Эта программа используется при доступе к закладкам через ваш браузер.
Обновленный балл: 82 из 100
Шаг 5: Отложить парсинг JavaScript
Javascript, который находится в верхней части HTML-документа может блокировать отображение страницы, что чрезвычайно замедляет её скорость. Для того, чтобы отложить парсинг Javascript, лучше всего, вызвать этот скрипт в конце HTML документа, а не в начале.
Вы также можете отложить парсинг Javascript с помощью атрибута «отложить/defer». Такой атрибут используется в HTML коде, чтобы отложить JavaScript, пока страница загружается. Например:
<script type="text/javascript" src="includes/general.js" defer="defer"></script>
Обновленный балл: 86 из 100
Шаг 6: уменьшить HTML, CSS, JavaScript
HTML, CSS, JavaScript могут быть “уменьшены” или сжаты, для ускорения времени их загрузки. Есть ряд ресурсов в Интернете, которые уменьшают эти типы файлов, Minifier является прекрасным примером.
Обновленный балл: 90 из 100
Дополнительные корректировки
CDN
Вы также можете рассмотреть загрузки статических ресурсов с вашего сайта на CDN или “Content Delivery Network”. CDN это еще один способ резко сократить отставание от сервера, сохраняя статические ресурсы на сетях серверов быстрых загрузок. Известными пользователями CDN являются ESPN и NBA.com.
Объединение JavaScript и CSS файлов
Загрузка нескольких JavaScript и CSS файлов может убить время загрузки сайта. Пользовательские сайты на основе CMS, которые используют плагины и темы, зачастую могут иметь 15 или более файлов JavaScript и почти столько же Cascading Style Sheets. Эти скрипты и таблицы стилей могут быть объединены в один большой файл. Сделав это, вы резко ускорите время загрузки страниц и сделаете посетителей вашего веб-сайта очень счастливыми.
Мобильная разработка веб-сайтов
При строительстве мобильных веб-приложений для пользователей смартфонов, важно придерживаться принципов Google веб-мастера для приложений. В то время как индексация мобильных веб-сайтов и приложений, по-прежнему находится в стадии разработки от Google, важно обратить внимание на требования Google для разработки. Будьте готовы к существенным изменениям в ближайшие 5 лет в том, как Google будет индексировать мобильные веб-сайты и мобильные приложения. Не удивляйтесь, если скорость страниц станет одним из основных рассмотрений Google в индексации сайтах на мобильных приложениях.
Конечно, это не все возможные варианты, но надеемся, эти советы помогут вам оптимизировать скорость загрузки вашего сайта!
