нашого

PageSpeed ​​Insights - це інструмент Google для аналізу та оцінки швидкості завантаження веб-сторінки, а найголовніше - також надає ряд дуже корисних пропозиції Y пов'язані інструменти щоб покращити цю швидкість завантаження.

Для оцінки завантаження нашої веб-сторінки, а також нашої реалізації, Page Insights базується на цьому документі найкращих практик, який охоплює як зовнішній рівень (завантаження зображень, файлів JavaScript, CSS тощо), так і конфігурацію сервера.

Загалом, не вдаючись до деталей, ми можемо узагальнити цілі цих передових практик головним чином у наступних трьох:

  • Мінімізуйте кількість HTTP-запитів, які виникають,
  • Зменшіть розмір відповідей на ці запити HTTP,
  • і оптимізувати візуалізацію сторінки в браузері.

PageSpeed ​​проаналізує наш веб-сайт і призначить нам a пунктуація або оцінка зі 100, що оцінює, наскільки швидше може бути завантаження цього веб-сайту. Дуже високий бал, близький до 100, вказує на те, що мало що вдосконалити (тобто сторінка вже завантажується якомога швидше або ближче до неї), тоді як низький бал вказує на те, що ми можемо зробити чимало поліпшень. Важливо зазначити, що цей бал є відносний на сторінку, на якій ми перебуваємо, тобто вона не надходить на основі часу, необхідного для завантаження сторінки, якщо не на основі кількості передові практики до того, як коментували, ми дотримувались і впроваджували.

Ми можемо використовувати PageInsight як онлайн-послугу, ввівши URL-адресу сторінки, яку ми хочемо оцінити:



А також розширення з відкритим кодом доступне для Інструментів розробника Chrome у браузері Chrome, а також для Firebug для тих, хто залишається вірним Firefox. У цій статті ми будемо покладатися на розширення для Інструменти розробника Chrome на Mac, але робота практично однакова у всіх версіях.

Використання розширення Chrome Developer Tools

Після встановлення розширення, коли наша веб-сторінка відкрита в Chrome, ми спочатку відкриємо Chrome Dev Tools:


Інструменти -> Інструменти розробника або Ctrl + Shift + I (на Mac: ⌥⌘I)

І як тільки інтерфейс буде відкритий, ми побачимо, що з’являється нова вкладка PageSpeed, в якій ми знайдемо заклик до дії:

Натискання будь-якої з червоних кнопок ANALYZE або START ANALYZING призведе до перезавантаження нашої сторінки, і через короткий час аналізу нам будуть показані результати аналізу, починаючи з оцінки. Оцінка швидкості сторінки який приходить для оцінки заходів, які ми вжили на нашому сайті для покращення швидкості завантаження.

Реалізація: Підвищення швидкості завантаження lostiemposchange.com

У випадку з будинком lostiemposchange.com Спочатку ми отримали таку оцінку:


Оцінка початкової швидкості сторінки lostiemposchange.com: 86 (із 100)

Оцінка в 86 балів зі 100 можливе - це зовсім не погано, але, очевидно, нам потрібно багато чого вдосконалити.

На щастя, в лівій області a список пропозицій що плагін пропонує нам покращити швидкість завантаження. Ці пропозиції відображаються за категоріями у 3 кольори: червоний, жовтий та синій, як ви їх розглядаєте Високий пріоритет, Середній пріоритет Y Низький пріоритет відповідно. Крім того, у кожній окремій пропозиції ми отримуємо детальну інформацію про те, як ми можемо реалізувати це у конкретному випадку нашого веб-сайту.

Очевидно, спочатку потрібно спробувати застосувати пропозиції, позначені як Високий пріоритет червоним, оскільки вони найбільше впливають на швидкість завантаження. Передові практики, які ми вже правильно застосували, також відображаються зеленим кольором і менш помітними.


На панелі ліворуч PageSpeed ​​Insights пропонує нам поради щодо покращення швидкості завантаження нашого веб-сайту

Давайте проаналізуємо деякі з цих пропозицій і як їх реалізувати на нашій сторінці взявши за приклад наш випадок у lostiemposchange.com, звичайно, роблячи особливий акцент на найвищому пріоритеті, але також дивлячись на найпростіші і з невеликими зусиллями може негайно покращити швидкість завантаження веб-сайту.

Високий пріоритет

  • Скористайтеся кешем браузера

Зручно заважати браузеру надсилати запити на статичні ресурси (наприклад, зображення), які вже завантажуються за попередні відвідування (відомі як кешовані). Тому важливо додати значення для атрибутів термін придатності або максимальний вік у заголовку HTTP відповіді для цих елементів на значення з деякою відстанню в майбутньому, щоб сказати браузеру використовувати кешовану версію, якщо вона є.

Активуйте Keep-Alive

Keep-Alive - це фантастична особливість серверів Apache, яка дозволяє серверу та клієнту узгоджувати один HTTP-запит для передачі декількох ресурсів, замість того, щоб відкривати новий запит на ресурс. Неважко зрозуміти, що це дуже добре відповідає нашій меті мінімізувати кількість HTTP-запитів.

Оскільки ви є пропозицією вище, і ця пропозиція від конфігурація сервера, у разі використання a сервер apache Ми можемо налаштувати їх, змінивши файл .htaccess на нашому веб-сайті. Наприклад, це директиви, які ми додали до .htaccess timeschange.com на сервері для реалізації обох запропонованих функціональних можливостей:

Середній пріоритет

  • Об’єднайте зображення в CSS-спрайти

Ми також можемо зберігати запити на сервері, якщо замість того, щоб завантажувати зображення, що використовуються в нашому CSS, як фон, одне за одним, ми об'єднуємо їх у Image Sprite, а пізніше показуємо відповідну частину шляхом репозиціонування за допомогою коду CSS. Цей прийом застосовується не до всіх зображень, і це буде залежати від того, як зібрана структура CSS, від того, повторюються ці зображення по горизонталі чи вертикалі, чи завжди контейнер зображень буде однакового розміру або буде залежати від його вмісту тощо.

На щастя у нашому випадку losttimechange.com Ми отримали безцінну підтримку чудового Елі Паділли, викладача CSS усіх речей 😉, і нам вдалося згрупувати чотири маленькі фонові зображення, на яких PageSpeed ​​вказувало, що вони завантажуються окремо, і ми вміщували їх у спрайт-лист, як це:


Приклад спрайт-листа з прозорим фоном та комбінованими елементами: стани ввімкнення та вимкнення кнопки пошуку та точки маркування списків у нижньому колонтитулі та в тілі кожного повідомлення відповідно.

Корпус кнопки зі статусом увімкнення/вимкнення є книжковим прикладом для цієї техніки без надто великих ускладнень. Для куль стихії З переліків ми ускладнили, що вміст може мати різну висоту, отже, зсув між одним та іншим у спрайті.

Щодо модифікацій в CSS, код без Image Sprite оригінал був таким:

І код CSS із зображенням Спрайт це буде виглядати так:

І зараз єдиним зображенням, яке завантажується у цих правилах CSS, є images/sprites.png, тому ми зменшили чотири HTTP-запити до одного.

Звичайно, PageSpeed ​​не враховує структурування нашого CSS або нашого вмісту, тому продовжує пропонувати нам можливість комбінування зображень в одному спрайті, навіть якщо ми не маємо можливості їх поєднати або навіть якщо цього не робимо. мати контроль над ними, оскільки вони залежать від зовнішніх сайтів Twitter, Facebook, WordPress тощо. Обслуговуйте ресурси з узгодженої URL-адреси

Проблема, яку ми маємо тут, полягає в тому, що ми обслуговуємо однаковий статичний вміст, але завантажуємо його з двох різних URL-адрес. Це велика помилка, оскільки браузер повинен зробити два запити на один і той же ресурс, тобто ми завжди робимо запит і завантаження даних більше і ми могли б заощадити не менше ніж 68,7 КБ, не малу вагу.

На жаль для нас, вивчаючи "винні" клопотання, ми бачимо, що вони такі:

  • http: //platform.twitter.com/…/follow_button.1363148939.html та:
  • https: //platform.twitter.com/…/follow_button.1363148939.html

Схоже, що винуватцем є кнопка слідування кнопки віджет від Twitter! Деякий програміст у Twitter використовував на сайті http а в іншому https і ця пропозиція в цьому випадку натрапить на глухі вуха.

Низький пріоритет

Усі наступні моменти є менш критичними, ніж розглянуті вище, але багато з них дуже легко вирішити, і тому їх варто вивчити. Кожна піщинка на рахунку!

    Оптимізуйте зображення

PageSpeed ​​аналізує нас, якщо зображення, які ми обслуговуємо, добре оптимізовані, і попереджатиме, які з них можна стискати, щоб важити менше, очевидно, стиснення без втрат, щоб не втратити ні йоти якості.

Перевага використання розширення Chrome Dev Tools Замість Інтернет-сервісу, це також те, що якщо зображення можна оптимізувати, PageSpeed ​​сам стискає його та пропонує нам для завантаження (воно трохи приховане, ми можемо знайти його за посиланням переглянути оптимізований вміст). Незважаючи на те, що для цього існують програми та веб-програми, PageSpeed ​​дійсно зручна, оскільки вона визначає образ, що порушує, і в той же час пропонує нам уже оптимізований без необхідності будь-яких додаткових дій з нашого боку.

Після оптимізації всіх зображень на передній панелі lostiemposcambian.com ми виявили, що деякі з них знову поза нашим контролем, оскільки вони залежать від WordPress або Twitter.

Згорніть файли CSS та JavaScript

Ми завжди повинні зводити до мінімуму наші CSS-файли та JavaScripts, щоб вони займали якомога менше місця. Як ми бачили із зображеннями, у випадку, якщо наші файли CSS та JavaScript можна згорнути, PageSpeed ​​пропонує нам завантажити згорнутий файл для заміни у виробництві. Чудово! 🙂

Вбудуйте невеликі фрагменти CSS/JavaScript замість зовнішніх файлів

Кожен додатковий файл представляє ще один запит HTTP. Для дуже маленьких файлів вартість надсилання цього додаткового запиту є надмірною щодо їх ваги, тому ми повинні включати їх вбудованими в інші CSS або JavaScript або, можливо, навіть в той самий HTML-файл. Як і попередні, це не завжди буде повністю залежати від нас (WordPress, Я дивлюсь на вас!)

Уникайте поганих запитів

Звичайно, запит, який закінчується статусом HTTP сім'ї 4xx (помилка клієнта) - марно витрачений запит. Найпоширенішим, як правило, є 404 (ресурс не знайдено) і якщо у нас є одна або декілька з них, зручно виправити їх вручну, видаливши або виправивши.

Вкажіть розміри зображень у HTML

Ми завжди повинні вказувати розміри зображень на етикетці, використовуючи атрибути ширини та висоти. Це пов’язано з тим, що в іншому випадку браузер не буде знати цих розмірів, поки зображення не буде завантажено, і тому він зробить два проходи для відтворення вмісту сторінки: один перед завантаженням зображення та інший після, оскільки макет може повністю змінюватися залежно від зображення розмір.

Якщо в будь-якому випадку внаслідок упущення чи людської помилки ми не маємо цих атрибутів, PageSpeed ​​підкаже нам, куди їх додати та якими мають бути їх значення, для більшої зручності.

Подавайте зображення правильного розміру

Що стосується попереднього пункту, важливо обслуговувати наші зображення правильного розміру, зазначеного розмірами в HTML, щоб не залишати браузеру завдання змінити розмір зображень. Ми повинні обслуговувати зображення такого розміру, з якими вони будуть відображатися, оскільки, якщо ми не змусимо механізм візуалізації браузера виконувати додаткову роботу, ми також можемо завантажувати байти більше, якщо показуємо зображення менше, ніж воно насправді є.

У випадку з цим блогом, для людська помилка ми неправильно вказали деякі розміри, а браузер змінив розмір деяких зображень. Дуже важку помилку виявити без використання PageSpeed, оскільки неправильні зображення здавалися неозброєним оком.

Після того, як усі ці кроки будуть застосовані, ми можемо перевірити, що якщо ми знову запустимо аналізатор PageSpeed ​​Insights, ми побачимо, що ми пройшли початковий бал 86 із 100 на нашому сайті lostiemposchange.com перейти до видатного 95 зі 100 для дому, а також коливається приблизно 90-95 зі 100 для окремих постів. Завдяки новій конфігурації сервера найбільшу користь отримають періодичні відвідувачі, але нові відвідувачі також помітять поліпшення завдяки загальному зменшенню кількості HTTP-запитів і ваги багатьох завантажених файлів (оптимізовані зображення та CSS-файли та JavaScripts мінімізований).

Таким чином, чудовий інструмент, який ми повністю рекомендуємо веб-розробникам та веб-майстрам, оскільки він може допомогти нам значно покращити швидкість завантаження нашого веб-сайту. Ми впевнені, що користувачі (в даному випадку ви, шановні читачі) будуть дякувати нам усім мілісекунда Y байт що ми стираємо HTTP-запити та час завантаження сторінки! 😉