1. Почему оптимизация важна?
2. Нужно ли оптимизировать мой сайт?
3. Как исправить потенциальные проблемы?
4. Минимизация HTML
5. Оптимизация изображения
6. Сжатие Gzip
7. Expire заголовки
8. Отключите блокировку ресурсов 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 в целом и использовать эту технику, например, только для домашней страницы.