Оптимизировать время загрузки страницы

Почему оптимизация важна?
Нужно ли оптимизировать мой сайт?
Как исправить потенциальные проблемы?
Минимизация HTML
Оптимизация изображения
Сжатие Gzip
Expire заголовки
Отключите блокировку ресурсов CSS и Javascript

Почему важна оптимизация страницы? Требуется ли оптимизация вашего сайта, как это сделать и устранить потенциальные проблемы?

Почему оптимизация важна?

Время загрузки сайта является одним из наиболее важных элементов пользовательского опыта, а также одним из факторов, когда речь заходит о SEO. В настоящее время у пользователей нет терпения ждать долгой загрузки страницы. Более 40% пользователей покидают сайт, если он загружается 3 секунды или более ( источник ). Если страница загружается слишком медленно, вы теряете потенциальных клиентов. Многие люди также используют мобильные устройства, поэтому этот фактор здесь еще важнее.

В следующей статье я постараюсь представить наиболее распространенные проблемы и способы их решения, которые помогут ускорить работу сайта и повысить удовлетворенность пользователей его использованием.

Нужно ли оптимизировать мой сайт?

Для измерения скорости загрузки страницы и поиска потенциальных проблем мы используем 2 бесплатных инструмента:

Как исправить потенциальные проблемы?

Минификация и оптимизация CSS и JavaScript

Процесс минимизации состоит в удалении ненужных символов, таких как пробелы, символы новой строки, комментарии. Кроме того, имена переменных для их более коротких эквивалентов оптимизируются в файлах JS.
Для минимизации CSS и JS вы можете использовать, например, глотание или онлайн инструменты, например http://tools.w3clubs.com/cssmin/ на основе YUI компрессора.

После изменения файлов лучше всего объединить их в один, что уменьшит количество запросов к серверу и ускорит их загрузку.

Минимизация HTML

Как и в случае файлов CSS и JS, минификация состоит в удалении ненужных символов. Для динамических страниц мы не можем сделать это вручную с помощью онлайн-инструментов, поэтому нам все равно придется использовать модуль PageSpeed от Google https://developers.google.com/speed/pagespeed/module/ или вырезать ненужные символы вручную в коде, например в php:

$ content = preg_replace ('/ \ x20 + /', '', $ content); // удаляем несколько пробелов (отступы в коде HTML)

Оптимизация изображения

Разрешение изображений на странице не должно быть слишком большим, например, в 3-4 раза больше, чем размер, в котором он отображается на странице.

Вы также должны применить соответствующий уровень сжатия для файлов JPG, поддерживая баланс между качеством и размером файла.

Часто изменение сжатия JPG до 90% приводит к уменьшению размера на 55% без существенной потери качества (на снимке с большим количеством деталей изменение будет еще менее заметным). Дальнейшее сокращение, однако, не дает таких впечатляющих результатов, и уже наблюдается заметное ухудшение качества.

Вы можете использовать этот онлайн-инструмент для сжатия файлов JPG и PNG ( http://compresspng.com/ ).

Сжатие Gzip

Сжатие сокращает время загрузки страницы за счет уменьшения размера отправляемых файлов. Gzip в настоящее время является наиболее популярным и эффективным методом сжатия - он уменьшает размер HTTP-ответа до 70%.

В apache2 сжатие можно включить с помощью команды:

sudo a2enmod выкачать

Иногда вам нужно вручную добавить сжатие GZIP для файлов SVG в файле .htaccess или конфигурации виртуального хоста:

AddType image / svg + xml svg svgz AddEncoding gzip svgz

Expire заголовки

Заголовки Expire сообщают браузеру, следует ли загружать ресурс с сервера или из кэша браузера. Если вы установите этот заголовок, например, для файлов изображений jpg, браузер будет хранить эти ресурсы в кэше браузера в течение времени, указанного в заголовке. Пользователь, посещающий веб-сайт еще раз, будет загружаться быстрее, потому что браузер уже загрузит эти фотографии.

Ниже приведен пример настроек заголовка для файлов фотографий, svg, css и javascript.

<IfModule mod_expires.c> Заголовок сброшен ETag FileETag Нет ExpiresActive On Заголовок добавляет Cache-Control "общедоступный доступ" ExpiresDefault "плюс 1 месяц" ExpiresByType image / x-icon "доступ плюс 1 год" ExpiresByType image / gif "доступ плюс 1 месяц" ExpiresByType image / png "Доступ плюс 1 месяц" ExpiresByType image / jpg "Доступ плюс 1 месяц" ExpiresByType image / jpeg "Доступ плюс 1 месяц" ExpiresByType image / svg + xml "Доступ плюс 1 месяц" ExpiresByType text / css "Доступ плюс 1 месяц "ExpiresByType application / javascript" доступ плюс 1 год "ExpiresByType application / x-javascript" доступ плюс 1 год "</ IfModule>

Отключите блокировку ресурсов CSS и Javascript

Что касается скриптов, которые блокируют рендеринг страницы, есть 2 варианта.
Первый заключается в размещении сценариев в конце страницы перед закрытием тега.
Второе - использовать параметр async (асинхронный) или defer.

Параметр async приводит к загрузке сценариев без блокировки парсинга HTML, однако порядок их выполнения может не сохраняться (это не будет порядок, в котором файлы включены в код). Если у нас есть файлы JavaScript, подключенные в 1, то это не будет проблемой. Файл будет выполнен, как только он будет загружен.

Параметр defer также не блокирует синтаксический анализ HTML, файлы сохраняют порядок выполнения и выполняются после завершения анализа HTML.

Различия проиллюстрированы на следующем рисунке:

В случае с CSS это немного сложнее, потому что CSS-файлы должны быть объявлены в части страницы.
Согласно Google, решение состоит в том, чтобы поместить код CSS, необходимый для отображения части страницы, видимой на экране, в виде встроенного тега, и загрузить остальную часть кода CSS после визуализации страницы. Однако вы должны подойти к & # 347; & # 263; на это с уверенностью & # 261; Дозирование & # 261; sharp & # 380; no & # 347; ci: встроенные стили не являются s & # 261; хранится в памяти & # 281; для веб-браузера, может & # 263; трудно отделить & # 263; такой код для каждой подстраницы и иногда может быть замечен & # 263; для моментов & # 281; nieostylowan & # 261; Тре & # 347; & # 263;.
Это можно сделать для небольших файлов CSS в целом и использовать эту технику, например, только для домашней страницы.

IT T Бизнес