Веб

Google PageSpeed Insights solve issues and get green

2019-02-04 2019-10-18 Міжнародний консалтинг Веб

Google PageSpeed оптимізація

Google PageSpeed Insights Google [1] - це чудовий інструмент для того, щоб побачити ефективність вашого веб-сайту. Якщо ви отримали низьку оцінку, ось низка статей з простими у виконанні рішеннями для вирішення більшості питань.

Статистика сторінок Google

Це дозволило мені отримати зелений вигляд на Google PageSpeed Insights [1], збільшившись від оцінки від 17 на мобільному (рис. 1) до 89 (рис. 14), і від 35 (рис. 3) до 89 на робочому столі (рис. 16 ).

Google PageSpeed Insights solve issues and get green : Рис 1: Google Page Speed - Оцінка перед оптимізацією зображення 17 на мобільному — Рис 1: Google Page Speed - Оцінка перед оптимізацією зображення 17 на мобільному

Google PageSpeed Insights solve issues and get green : Рис 3: Google Page Speed - Оцінка перед оптимізацією зображення 35 на робочому столі — Рис 3: Google Page Speed - Оцінка перед оптимізацією зображення 35 на робочому столі

Google PageSpeed Insights solve issues and get green : Fig 14: Google Page Speed - Оцінка після активації стиснення gzip 89 на мобільному телефоні — Fig 14: Google Page Speed - Оцінка після активації стиснення gzip 89 на мобільному телефоні

Google PageSpeed Insights solve issues and get green : Рис 16: Google Page Speed - оцінка після активації стиснення gzip на робочому столі 89 — Рис 16: Google Page Speed - оцінка після активації стиснення gzip на робочому столі 89

Крок 1: оптимізуйте зображення для веб

Це дозволило мені пройти тест Google PageSpeed [1] Оптимізувати зображення [2] на веб-сайті, збільшившись з рахунку 17 на мобільному (Рис. 1) до 51 (Рис. 2), і з 35 (Рис. 3) до 59 на робочому столі (рис. 4).

Оптимізуйте зображення PageSpeed Insights Google Developers
Масовий процес і оновлення партії зображень за допомогою GIMP [3]

Ви читали?

Крок 2. Оптимізація CSS і javascript

Скасуйте JavaScript і CSS, що блокують візуалізацію, у вмісті вище.

Це дозволило мені пройти тест Google PageSpeed [1] Виключити рендеринг-блокування JavaScript і CSS у вмісті вище (разом з кешуванням браузера Leverage [6]) на веб-сайті, збільшившись з 51 на мобільному ( 5) - 72 (Фіг.6), а від 59 (Фіг.7) до 79 на робочому столі (Фіг.8).

Виправити Google PageSpeed Вилучити JavaScript і CSS, що блокують візуалізацію, у вмісті вище

Google PageSpeed Insights solve issues and get green : Рис 2: Google Page Speed - Оцінка після оптимізації зображення 51 на мобільному — Рис 2: Google Page Speed - Оцінка після оптимізації зображення 51 на мобільному

Google PageSpeed Insights solve issues and get green : Рис 4: Google Page Speed - Оцінка після оптимізації зображення 59 на робочому столі — Рис 4: Google Page Speed - Оцінка після оптимізації зображення 59 на робочому столі

Крок 3. Увімкніть кеш веб-браузера

Плече кешування дозволило мені пройти тест Google PageSpeed [1] Використовувати кешування браузера [5] (разом з усуненням блокування JavaScript і CSS у контенті [4]) на веб-сайті, збільшуючись з рахунку 51 на мобільному (рис. 9) - 72 (рис. 10), а з 59 (рис. 11) до 79 на робочому столі (рис. 12).

Використовуйте кешування браузера PageSpeed Insights Google Developers
Виправити Google PageSpeed кешування браузера в htaccess [6]

Google PageSpeed Insights solve issues and get green : Рисунок 5: Швидкість Google Page - показник, який виключає JS і CSS, що блокують візуалізацію, у вмісті 51 на мобільному телефоні — Рисунок 5: Швидкість Google Page - показник, який виключає JS і CSS, що блокують візуалізацію, у вмісті 51 на мобільному телефоні

Google PageSpeed Insights solve issues and get green : Рис 6: Швидкість Google Page - показник після усунення блокування JS та CSS у верхній частині вмісту 72 на мобільних пристроях — Рис 6: Швидкість Google Page - показник після усунення блокування JS та CSS у верхній частині вмісту 72 на мобільних пристроях

Google PageSpeed Insights solve issues and get green : Рис 7: Швидкість сторінки Google - показник, який виключає JS і CSS, що блокують візуалізацію, у вмісті 59 на робочому столі — Рис 7: Швидкість сторінки Google - показник, який виключає JS і CSS, що блокують візуалізацію, у вмісті 59 на робочому столі

Google PageSpeed Insights solve issues and get green : Мал. 8: Швидкість сторінки Google - оцінка після виключення JS і CSS, що блокують візуалізацію, у вмісті вище 79 на робочому столі — Мал. 8: Швидкість сторінки Google - оцінка після виключення JS і CSS, що блокують візуалізацію, у вмісті вище 79 на робочому столі

Крок 4. Увімкніть htaccess стиснення

Увімкнення стиснення в htaccess дозволило мені пройти тест Google PageSpeed [1], використовуючи кеш браузера [7] на веб-сайті, збільшившись з рахунку 72 на мобільному (Рис. 13) до 89 (Рис. 14), і з 79 ( Фіг 15) до 89 на робочому столі (Фіг 16).