- Почему оптимизация важна?
- Нужно ли оптимизировать мой сайт?
- Как исправить потенциальные проблемы?
- Минимизация 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 в целом и использовать эту технику, например, только для домашней страницы.