Отправляет email-рассылки с помощью сервиса Sendsay

Актуальная информация

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 8 RSS
  Март 2020   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
27.03.2020
00:00:41
01:19:06
28
29
30
30.03.2020
00:01:05
13:27:21
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://https://prostoneiz.ru/
Открыта: 11-03-2020

Автор
Prostota

Статистика

8 подписчиков
0 за неделю
←   Все выпуски   →

Актуальная информация Увеличение скорости загрузки сайта


Увеличение скорости загрузки сайта
 

Google PageSpeed ​​Insights. Увеличение скорости загрузки сайта

При выполнении различных тестов в частности с помощью Google PageSpeed ​​Insights , WebPageTest или KeyCDN Speed ​​Speed ​​Test можно убедиться что ваш сайт имеет низкую скорость загрузки. Эти показатели могут быть очень полезными. В частности они могут предоставить вам ценную информацию, чтобы помочь оптимизировать ваш сайт, не забывайте о воспринимаемой производительности, в частности, об опыте пользователя.

Зачем заботиться о скорости страницы?

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

Стоит сказать, что по мере увеличения времени загрузки веб-страницы увеличивается вероятность отскока ваших посетителей .

Также можно с уверенностью сказать, что с увеличением времени загрузки веб-страницы увеличивается вероятность посещаемости вашего сайта новыми клиентами.

WordPress и Google PageSpeed ​​Insights

Когда дело доходит до попытки ускорить WordPress , иногда это может быть довольно сложно. WordPress не самая быстрая платформа, особенно с точки зрения разработчиков. То, как сценарии ставятся в очередь и работают сторонние плагины, может сделать это своего рода кошмаром.

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

Google PageSpeed ​​Insights говорит нам, что нам нужно оптимизировать наши изображения. Чтобы исправить это, мы просто устанавливаем и запускаем плагин Optimus , который представляет собой плагин для оптимизации изображений. Этот плагин ориентирован на интеллектуальное сжатие , то есть использует комбинацию методов сжатия без потерь и с потерями. Он имеет функцию массовой оптимизации, поэтому после первой установки вы можете сжать всю галерею изображений одним щелчком мыши. С этого момента он будет автоматически сжимать ваши изображения при загрузке. Мы также используем плагин, потому что он конвертирует наши изображения в формат WebP. Это позволяет даже быстрее загружать сайт.

Имейте в виду, что PageSpeed ​​Insights может показать две разные рекомендации по оптимизации изображений, в том числе:

  1. Оптимизация изображений: «Сжатие… может сэкономить 4,7 КиБ (30% снижение)».
  2. Оптимизация изображений: «Сжатие и изменение размера… может сэкономить 5,8 КиБ (сокращение на 51%)».

Первая рекомендация ориентирована исключительно на сжатие вашего изображения, тогда как вторая рекомендация ориентирована на сжатие и изменение размера. Если размеры вашего изображения слишком велики и должны быть уменьшены для браузера, эта рекомендация будет активирована.

2. Сократить JavaScript и CSS

Google PageSpeed ​​Insights теперь говорит нам, что нам нужно минимизировать наш JavaScript, CSS и HTML . Чтобы решить эту проблему, мы устанавливаем бесплатный плагин Autoptimize . В настройках плагина вы захотите проверить следующее:

  • Оптимизировать HTML-код
  • Оптимизировать код JavaScript
  • Оптимизировать код CSS

Мы также используем бесплатный плагин KeyCDN Cache Enabler для доставки изображений в формате WebP, которые мы конвертировали ранее для ускорения загрузки. В настройках обязательно проверьте параметр «Создать дополнительную кэшированную версию для поддержки изображений WebP».

3. Рендеринг-блокировка ресурсов

Google PageSpeed ​​Insights теперь сообщает нам, что у нас JavaScript и CSS выше сгиба . Большинство людей сталкиваются с тремя общими сценариями, а именно: ваши файлы JavaScript / CSS, Font Awesome и Google Fonts. Шрифты блокируют рендеринг.

Файлы

Первая проблема, с которой нам приходится сталкиваться, это все наши файлы JavaScript и CSS, которые находятся выше сгиба, блокируют рендеринг. Чтобы это исправить, мы возвращаемся к плагину Autoptimize, который мы установили ранее, и сохраняем следующие настройки.

  1. В разделе «Параметры JavaScript» снимите флажок «Принудительно использовать JavaScript в <head>?»
  2. Под опциями CSS установите флажок «Inline all CSS?»

Font Awesome

Многие люди, которые используют Font Awesome, берут файл CSS и помещают его в свой заголовок. Проблема заключается в том, что если вы поместите его в свой заголовок, он станет блокировать рендеринг, . Вместо этого мы берем следующий код и перемещаем его в нижний колонтитул, прямо перед </body>тегом.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" rel="stylesheet">

Примечание. Выполнение этого приведет к ошибке, которая является вспышкой неустановленного текста.

Google Fonts

Третья проблема связана с нашим Google Fonts. По умолчанию WordPress использует вызываемый хук, wp_enqueue_scripts который загружает шрифт в ваш заголовок. Это автоматически приводит к блокировке рендера. Чтобы это исправить, мы устанавливаем бесплатный плагин под названием « Disable Google Fonts» . Если вы используете пользовательскую тему, это может немного отличаться, также вы можете спросить своего разработчика темы, как отключить Google Fonts.

Затем мы добавляем наш Google Font со следующим кодом в нижний колонтитул прямо перед </body>тегом.

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Примечание. Это приведет к появлению Ошибке, который представляет собой вспышку невидимого текста.

Вы также можете загружать свои Google Fonts асинхронно, используя Google Font Loader . Просто поместите следующий код в нижний колонтитул.

<script type="text/javascript">
    WebFontConfig = {
        google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
    };

    (function() {
        var wf = document.createElement('script');
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>

4. Используйте кеширование браузера

Теперь мы получаем предупреждение об использовании кэширования браузера. Мы используем KeyCDN, интегрированный с нашим бесплатным плагином CDN Enabler , и это означает, что любые ресурсы, доставленные из CDN, уже имеют заголовки Cache-Control . Однако был один файл, который не доставлялся с CDN. Чтобы это исправить, мы просто добавляем заголовки Cache-Control на наш сервер происхождения, добавляя следующий код в наш .htaccessфайл. 

<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=604800, public"
</filesMatch>

Вот код, если вы находитесь на сервере Nginx.

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 7d;
    add_header Cache-Control "public, no-transform";
}

Еще одна проблема, с которой мы сталкиваемся, связана с Google Analytics. Самое смешное, что это предупреждение от собственного скрипта ( https://www.google-analytics.com/analytics.js). Проблема возникает из-за того, что срок действия кэша их скрипта составляет всего 2 часа. Google уже сказал, что они не будут это исправлять . В результате почти все аналитики получают предупреждение, которое они не могут исправить. Наиболее неприятная часть этого, вероятно, предназначена для людей, которые имеют дело с клиентами, желающими улучшить Google PageSpeed ​​Insights. Сказать клиенту, что вы не можете что-то исправить, потому что Google не позволит вам использовать свой собственный инструмент, звучит немного безумно.

Существует бесплатный плагин WordPress под названием Complete Analytics Optimization Suite, который настраивает задание cron для периодической синхронизации с последней версией analytics.js. Это также позволяет вам обслуживать его из вашего собственного CDN. Это избавит от предупреждения «использовать кэширование браузера» с помощью Google Analytics.

5.Включить сжатие

Мы уже включили Gzip на нашем исходном сервере, и по умолчанию Gzip включен на всех пограничных серверах, откуда доставляются ресурсы. Ниже приведены инструкции, если вам нужно включить его на исходном сервере.

Apache

Вы можете включить сжатие, добавив следующее в ваш .htaccessфайл.

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    # Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent
</IfModule>

Nginx

Вы можете включить сжатие, добавив следующее в ваш nginx.confфайл.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

6. Уменьшите время отклика сервера

Наконец, есть предупреждение о сокращении времени отклика сервера. Лучшие рекомендации для этого – использовать быстрый веб-хостинг, а также внедрить CDN.
В избранное