Оптимизация файлов, минимизация CSS и JS, повышение производительности сайта

1. Как проверить время загрузки страницы?
2. Миниатюризация и оптимизация изображений
3. Сжатие Gzip
4. Как использовать сжатие GZIP?
5. Минификация и оптимизация CSS, JS и HTML
6. Объединение файлов JS и CSS
7. Модификация URL
8. Включение кеша
9. Облегчение вашей жизни и минификации? Глоток, Земля и связанные с ними
10. Expire заголовки
11. Использование UglifyJS и UglifyCSS
12. Только блокировка ресурсов CSS и JS
13. Это все?

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

Одной из ключевых целей оптимизации является сокращение времени загрузки страницы. Это время, в свою очередь, является одним из важнейших элементов UX и SEO. Счастливым пользователем является тот, кто не должен ждать более 3 секунд, чтобы выполнить запрос на сайте. Кроме того, Google определенно более широко использует более быстрые сайты.

Мне не нужно напоминать вам, что бесплатный сайт эффективно отталкивает потенциальных клиентов, верно?

Хорошо. Длинное вступление для нас. Теперь пришло время приступить к работе. Субъективного ощущения, что сайт загружается слишком долго, недостаточно. Конечно, это может быть воспалением, когда вы отправите его в мастерскую и оптимизируете его. Тем не менее, весь процесс должен начинаться с момента загрузки страницы.

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

Вы можете проверить это время с помощью двух бесплатных инструментов: Google PageSpeed ​​Insights и Gtmetrix.

Это экран из инструмента Google. Ниже инструмент подсказывает нам индивидуальные действия, которые можно выполнить, чтобы сократить время зарядки. Список включает, среди прочего:

• Приоритетность видимости контента
• Уменьшено время отклика сервера
• Как избежать перенаправления целевых страниц
• Устранение блокировки кода рендеринга JavaScript и CSS в той части страницы, которая видна на экране.
• И многое другое

С каждым действием Google отправляет вас на подстраницы, объясняя и инструктируя, как выполнить действие.

Анализ сайта GTmetrix выглядит так, как показано выше. Инструмент на стартовом экране предоставляет нам основные детали, связанные со временем зарядки, размером или низким результатом. Ниже представлены вкладки, в которых создатели представляют подробные рекомендации по ускорению работы сайта. Они делятся на тип (фотографии, CSS, JS, сервер, контент) и приоритет.

Миниатюризация и оптимизация изображений

Оптимизация изображений является одним из основных действий, которые мы должны сделать. Есть несколько правил для подражания. В первую очередь? не переусердствуйте с графическим разрешением. Разрешение 720p - это верхний предел, который вы должны соблюдать. Отрегулируйте разрешение в соответствии с функцией, назначением и расположением изображений.

Во-вторых? используйте соответствующее расширение файла. Вероятно, никто в здравом уме не публикует на сайте фотографии и графику в формате .png. Расширения .jpg и .gif работают лучше всего. Кроме того, попытайтесь сжать их таким образом, чтобы сохранить золотую середину между их качеством и размером.

Стоит знать, что сжатие формата .jpg на 90% способно уменьшить его размеры более чем на 50%. Это определенный порог, поскольку дальнейшее сжатие не дает заметных результатов. Инструмент, полезный при оптимизации изображений, http://compresspng.com/ ,

Сжатие Gzip

Сжатие Gzip основано на уменьшении объема данных, передаваемых между сервером и пользователем. Весь процесс включает сжатие сервером определенных файлов, а затем их распаковку на уровне браузера. Обычно сжатые файлы: XML, JS, CSS и HTML. Сжатие Gzip может снизить вес HTTP-ответов до 70%, а текстовых файлов - до 80%.

На сервере apache2 вы можете подключить сжатие gzip, набрав в консоли: sudo a2enmod deflat.

Как использовать сжатие GZIP?

Обратите внимание, что сжатие зависит от сервера и загружает его немного. Однако в большинстве случаев просто добавьте токен: AddOutputFilterByType DEFLATE text / css application / x-javascript text / x-component text / html text / richtext image / svg + xml text / обычный текст / xsd текст / xsl текст / xml изображение / x -икон в файл .htcaccess ? вы найдете его в главном каталоге установки WP. В apache2 вы можете включить сжатие gzim с помощью команды: sudo a2enmod deflate .

Иногда сжатие gzip можно подключить из панели администрирования сервера. Если вы не уверены, предоставляет ли ваша хостинговая компания такие инструменты? связаться с ними.

Вы можете проверить сжатие страниц, используя этот бесплатный инструмент: http://www.gidnetwork.com/tools/gzip-test.php , И его интерфейс после анализа страницы выглядит так:

Минификация и оптимизация CSS, JS и HTML

Сокращение HTML-файлов, JavaScript-скриптов и CSS-листов - это прежде всего их очистка. Во время минификации мы удаляем ненужные комментарии, символы и пробелы. Благодаря таким процедурам мы действительно уменьшаем вес и объем отдельных компонентов сайта.

Это код перед минификацией:

И после минификации:

Объединение файлов JS и CSS

Также неплохо объединить несколько небольших CSS-файлов с JS в один большой. Таким образом, сервер получит один, а не около десятка запросов. относительно одного большого файла. В WordPress вы можете комбинировать файлы JS и CSS, установив плагин JS & CSS Script Optimize В принципе, для правильного подключения файлов вам просто нужно установить и активировать плагин, который сделает всю работу за вас.

Вот как выглядит количество запросов перед подключением файла JS и CSS:

А вот так выглядит количество запросов после объединения файлов:

Модификация URL

Изменение URL-адресов в WP и других CMS позволяет ускорить загрузку страниц, а также повлияет на позиционирование. К сожалению, форматы URL, которые являются наиболее дружественными для SEO, в то же время менее дружественны по отношению к их весу. Наиболее предпочтительными с точки зрения минимизации URL являются: /% postname% / и /% post_id% /% postname% /.

Включение кеша

Сайт с поддержкой Cache позволяет значительно ускорить работу сайтов. Особенно заметную разницу можно увидеть на больших страницах со значительным движением. Примечание. Включение кэширования на страницах с минимальным трафиком может не дать никаких результатов.

В WordPress кешем можно управлять с помощью плагина SuperCacher. После установки меню плагинов выглядит следующим образом:

Облегчение вашей жизни и минификации? Глоток, Земля и связанные с ними

Поклонников Gulp столько же, сколько Grunt. Обе программы отлично подходят для автоматизации работы? среди прочего для минимизации стилей и сценариев. Конечно, эти инструменты намного сложнее и сложнее, и вы можете написать о них отдельную обширную статью. Тем не менее, мы можем упростить минимизацию, установив соответствующие плагины в текстовых редакторах. Эти плагины способны сразу скомпилировать две версии кода? работает и минимизируется.

Expire заголовки

Что такое истекающие заголовки? Ну, они сообщают браузеру, будет ли ресурс загружен из кэша браузера или с сервера. Управление заголовками с истекшим сроком действия позволяет пользователям загружать отдельные элементы страницы гораздо быстрее, чем они уже посетили сайт один раз. Оптимизация с использованием заголовков expire заключается в размещении файлов (в основном изображений) в кеше браузера, одновременно освобождая сервер, например:

<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 месяц" </ IfModule>

Использование UglifyJS и UglifyCSS

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

Они доступны в виде модулей Node.js. Так что их глобальная установка довольно проста. Все, что вам нужно сделать, это ввести следующую командную консоль: $ npm install -g uglify-js , а затем: $ uglifyjs? Help. Если вас интересует только локальная установка, введите следующее в каталог проекта:
$ cd / path / to / your / symfony / project

$ npm install uglify-js -prefix app / Ресурсы

Установка UglifyCSS аналогична. Полная установка и использование UglifyJS и UglifyCSS можно найти в этой записи ,

Только блокировка ресурсов CSS и JS

Блокирование скриптов рендеринга может быть сделано двумя способами. Первый, относительно простой, - это вложение скрипта в самый конец кода перед закрытием тега </ body>. Второй, немного более сложный способ - использовать асинхронную зарядку (параметр async или defer ).

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

Проблема возникает в случае стилей CSS из-за необходимости объявления в разделе <head>. Блокирующий рендеринг лучше всего использовать для небольших файлов CSS и только для отдельных подстраниц. Почему? Что касается CSS, лучше всего использовать блокировку рендеринга, поместив код первого загруженного экрана сайта во встроенный тег <style>, а затем перезарядив код, невидимый на первом загруженном экране, после рендеринга страницы.

Это все?

Знаете ли вы другие методы для оптимизации кода? Поделитесь ими в комментариях.