Скорость сайта? Это вообще имеет значение? Разве недостаточно хорошего дизайна и отличного контента?
Думайте сами! Если пользователю приходится ждать, чтобы взглянуть на ваш веб-сайт, как дизайн, изображения или контент произведут впечатление? Логично, не так ли?
Давайте сначала пройдемся по некоторым статистическим данным.
Amazon сообщила об увеличении дохода на 1% за каждые 100 миллисекунд улучшения скорости сайта. (Источник: Amazon) Так же поступили и в Walmart, они отметили увеличение конверсии на 2% на каждую 1 секунду улучшения скорости интернета.
В дополнение к этому исследование Akamai выявило:
47% людей ожидают, что веб-страница загрузится за две секунды или меньше.
40% покинут веб-страницу, если она загружается более трех секунд.
52% онлайн-покупателей говорят, что быстрая загрузка страниц важна для их лояльности к сайту.
Итак, прежде чем перейти к списку, вот очень важный СОВЕТ:
Создайте резервную копию, прежде чем вносить какие-либо изменения! Мы же не хотим совершать постоянные ошибки, верно?
- 1. Минимизируйте HTTP-запросы
Факторами, влияющими на время загрузки веб-страницы, являются скрипты, flash, изображения, таблицы стилей и т. д. Для каждого из этих элементов делается один HTTP-запрос, следовательно, чем больше элементов на вашей странице, тем больше будет время загрузки.
Самый быстрый способ справиться с этим — упростить дизайн. Итак, вы, возможно, уже поняли,
- Оптимизация количества элементов
- Используйте CSS вместо изображений
- Объедините таблицы стилей и уменьшите количество
- Сокращение скриптов; разместить их внизу страницы
Ленчик лучше!
Итак, суть здесь такова: чтобы повысить производительность веб-страницы, уменьшите количество HTTP-запросов.
2. Сокращение времени отклика сервера
Сокращение времени отклика вашего сервера поможет вашей веб-странице загружаться быстрее. Звучит разумно? Хорошо. Таким образом, ваша цель должна заключаться в том, чтобы время отклика сервера составляло менее 200 миллисекунд. Поэтому очень важно тщательно выбирать свой веб-хост (сервер).
HTTP Keep-Alive позволяет TCP-соединениям оставаться активными и помогает уменьшить задержку для последующих запросов. Поэтому обратитесь к своему хостинг-провайдеру и попросите его подумать дважды. Большинство хостинговых компаний отключают эту функцию, потому что это необязательная функция (всякий раз, когда она передает менее 60 байт за запрос).
3. Использовать сжатие
Сжатие — это способ ускорить загрузку тяжелых страниц размером 100 КБ и более; в процессе создания качественного контента страницы часто становятся большими. Эти страницы загружаются медленно и громоздко, что убивает время загрузки вашей страницы.
Сжатие страниц снижает пропускную способность, тем самым уменьшая количество ответов HTTP.
Вы можете использовать Gzip для сжатия файлов перед их загрузкой сервером, либо вызвав сторонний модуль, либо используя встроенные процедуры. Большинство серверов поддерживают Gzip.
Вы можете включить его, добавив в файл .htaccess следующий код: # сжимать текст, html, javascript, css и xml:
AddOutputFilterByType DEFLATE текстовый/обычный
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
Приложение AddOutputFilterByType DEFLATE/xml
Приложение AddOutputFilterByType DEFLATE/xhtml+xml
Приложение AddOutputFilterByType DEFLATE/rss+xml
Приложение AddOutputFilterByType DEFLATE/javascript
Приложение AddOutputFilterByType DEFLATE/x-javascript
# Или сжимайте определенные типы файлов по расширению:
«‹файлы *.html›»
SetOutputFilter DEFLATE
«‹/файлы›»
Или используйте следующий код PHP в верхней части файла HTML/PHP:
Или просто используйте плагины для вашей CMS (например, плагин WP HTTP Compression для WordPress).
Однако некоторые внешние javascripts (AdRoll, Simpli и CloudFront) могут уменьшить размер передаваемых данных более чем на 60 % с помощью gzip. (Источник: Моз)
4. Включить кеширование браузера
Вы знали Кэша? Да, это помогает ускорить время загрузки вашей веб-страницы. Таким образом, когда вы посещаете веб-страницу в первый раз, ваш браузер сохраняет элементы страницы на вашем жестком диске в кеше или во временном хранилище. Это позволяет браузеру сократить время загрузки веб-страницы при последующих посещениях. Он должен загружать только несколько элементов и, следовательно, кэширование экономит ваше время.
Примечание. Для всех кэшируемых ресурсов (файлы JS и CSS, файлы изображений, мультимедийные файлы, PDF-файлы и т. д.) установите срок действия от 1 недели до 1 года в будущем. Установка его более чем на 1 год нарушает рекомендации RFC. (Источник: The Daily Egg)
5. Сокращение ресурсов
Грязный код может замедлить работу вашего сайта. Как говорится: «Всегда найдется тот, кто даст дешевле, но главное — качество».
Каждый ненужный фрагмент кода увеличивает размер веб-страницы, очень важно исключить лишние пробелы, разрывы строк и отступы в коде, чтобы сделать его компактнее. Это уменьшит ваш код и даст вам оптимизированный HTML-код.
Вот что говорит Google: используйте расширение Chrome Pagespeed Insights, чтобы сгенерировать оптимизированную версию вашего HTML-кода. Запустите анализ своей HTML-страницы и перейдите к правилу Minify HTML. Нажмите Просмотреть оптимизированный контент, чтобы получить оптимизированный HTML-код. Чтобы минимизировать CSS, вы можете попробовать YUI Compressor и cssmin.js. Чтобы минимизировать JavaScript, попробуйте Closure Compiler, JSMin или YUI Compressor. Вы можете создать процесс сборки, который использует эти инструменты для минимизации и переименования файлов разработки и сохранения их в рабочем каталоге.
6. Оптимизация изображений
Для оптимизации изображений учитывайте: размер, формат и атрибут src.
Размер изображения по ширине вашей веб-страницы. Уменьшите глубину цвета до минимума, JPEG/PNG — ваш лучший вариант. Не оставляйте комментарии к изображениям. GIF-файлы должны быть небольшими и простыми изображениями размером не более 10x10 пикселей и цветовой палитрой не более 3. Для анимированных изображений не используйте файлы BMP или TIFF.
Для атрибута Src: избегайте пустых кодов src. Используйте ‹img src=""› в качестве кода изображения. Пустые источники приводят к ненужному трафику, которого мы, похоже, избегаем.
Вы также можете использовать плагины для оптимизации ресурсов вашей веб-страницы.
7. Оптимизируйте доставку CSS
CSS отвечает за требования к стилю веб-страницы. Веб-сайт получает доступ к этой информации либо во внешнем файле, который загружается до отображения вашей страницы, либо во встроенном файле, который вставляется в HTML-документ. Внешний CSS загружается в заголовок HTML-кода, а встроенный CSS встраивается в HTML-код страницы. Внешняя таблица стилей уменьшает размер кода и уменьшает его дублирование. Инструмент доставки CSS может помочь вам определить количество внешних листов, которые использует ваш сайт. Внешняя таблица стилей уменьшит HTTP-запросы и, в свою очередь, ускорит загрузку.
8. Контент верхней части страницы важен
Поскольку все мы знаем, насколько важно первое впечатление, мы хотим произвести его по максимуму. Имея в виду UX, раздел, который первым бросается в глаза пользователю: верхняя часть (верхняя часть веб-страницы) должна загружаться быстрее, чем остальная часть страницы. Это значительно, даже если остальная часть веб-страницы загружается после первого раздела. Здесь вы можете разумно использовать CSS, разделив его на две части: короткую встроенную часть, которая стилизует элементы в верхней части страницы, и другую внешнюю часть, которую можно отложить.
Наряду с приведенными выше советами у нас есть два дополнительных совета для вашей веб-страницы!
9. Сократите использование плагинов:
Это сделает страницу медленнее и подвержено проблемам безопасности и другим техническим проблемам. Отключите плагины выборочно, а затем попробуйте измерить производительность вашей веб-страницы.
10. Уменьшить перенаправление:
Мы узнали, что чем меньше количество HTTP-запросов, тем выше скорость загрузки веб-страницы. Перенаправления просто добавляются к HTTP-запросу, сделанному на сервер, и замедляют работу вашей страницы.
У вас есть уникальные идеи по ускорению веб-сайта или веб-страницы? Поделитесь своими советами ниже.
