PageSpeed ​​оптимізація для кращого рейтингу

1. Перший крок: розпізнати, де можлива оптимізація швидкості сторінки Щоб перевірити статус-кво, Google...
2. Інші інструменти для оптимізації часу завантаження
3. Ви хочете більше перегляду сторінок прямо зараз?
4. Оптимізація сторінок за допомогою кешування серверів
5. 2. Оптимізація сторінок за допомогою кешування браузера
6. Кешування браузера через mod_headers
7. Кешування браузера через mod_expires
8. Кешування браузера та зміни на веб-сайті
9. 3. Оптимізація сторінок за допомогою мінімізації запитів HTTP
10. 4. Уникайте зайвих переадресацій
12. 6. Стиснення CSS і JavaScript
13. 7. Використовуйте компресію gzip
14. 8. Оптимізація сторін за допомогою асинхронного навантаження
15. Асинхронне завантаження JavaScript
16. 9. Використовуйте субдомени, щоб отримати більше HTTP-запитів
17. 10. Оптимізуйте швидкість сторінки за допомогою мережі доставки контенту (CDN)
18. 11. Поліпшення часу відгуку вашого сервера
19. 12. Уникайте поганих запитів
20. 13. Використовуйте CSS3 замість графіки для кнопок, значків і фонів
21. 14. Використовуйте зображення з правильними розмірами
22. 15. Використовуйте правильний формат файлів для зображень
23. 16. Зменште інформацію про зображення на фотографіях
24. 17. Видаліть дані EXIF ​​і мета-теги
25. 18. Спочатку подумайте про користувачів мобільних пристроїв
26. Запалити наступний рівень

Перший крок: розпізнати, де можлива оптимізація швидкості сторінки

Щоб перевірити статус-кво, Google надає вам потужний інструмент: PageSpeed ​​Insights ,

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

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

Результати PageSpeed ​​Insights можна знайти або через сайт або через Додаток браузера (Firefox / Chrome) використовуйте безкоштовно.

Що дійсно означає PageSpeed?

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

Як насправді виміряти швидкість сторінки - орієнтовані на користувача показники продуктивності

Швидкість завантаження сторінки важлива. Але як саме ви насправді відповідаєте на питання про швидкість програми або сторінки? Чи завантажується моя сторінка швидко чи ні? Що ж означає "швидкий"? Ми покажемо вам показники, які спрямовують користувача на фокус, оскільки, врешті-решт, це зрештою стосується швидкого пошуку програми чи веб-сайту.

На Блог розробників Google показує Філіпа Уолтона Поширена приказка "Моя програма завантажується в X.XX секундах" навряд чи відображає реальність. Швидше за все, час зарядки залежить, з одного боку, від дуже окремих факторів, таких як пристрій або підключення до Інтернету. З іншого боку, час завантаження не описує жодного моменту, але його слід вважати набагато більш диференційованим. Наведені нижче питання показують, які різні рівні зареєстровані користувачем під час завантаження сторінки / програми:

• Чи відбувається щось? Чи успішно починається навігація? Чи відповідає сервер?
• Це те, що вже можна використовувати? Чи було запущено достатньо вмісту, який може залучати користувачів?
• Чи можна використовувати це? Чи можуть користувачі вже взаємодіяти зі сторінкою (посилання, текстові поля тощо), або ж її ще потрібно завантажити?
• Це приємно? Чи відбуваються взаємодії безперебійно і без зволікань?

Філіп Уолтон пропонує деякі показники для цього:

Перша фарба (FP)

Читання "Перша фарба" відповідає на запитання користувача "Чи щось сталося?". Мова йде про перший момент, коли перші пікселі з'являються на екрані і, таким чином, вперше з'являється будь-який колір. Так щось відбувається.

Перша змістовна фарба (FCP)

За допомогою цього виміряного значення, це вже крок більш конкретний: Це вже не просто будь-який колір, який з'являється на екрані, але перший вміст, так що перший текст або перше зображення. Скільки часу потрібно для відображення першого текстового / мальовничого вмісту?

Перша значуща фарба (FMP) і таймер елемента героя

Ось питання: «Чи можна це використовувати?». Чи є корисний вміст, який показується? Кожен веб-сайт містить різні корисні та важливі матеріали. Найбільш важливий вміст сторінки також називається "Зміст героя". Наприклад, на сторінці погоди це буде поточний звіт про погоду для конкретного місця. Якщо цей вміст героя завантажується особливо швидко, користувач навряд чи помітить, що менш важливий вміст лише поступово додається.

Довгі завдання

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

Час до інтерактивного (TTI)

Показник "Час до інтерактивного" тепер відноситься до кількості часу, доки сторінка не тільки видима, але й готова до взаємодії з користувачем.

Щоб зрозуміти відображені значення ще краще, допомагає наступна класифікація Філіпа Уолтона:

• Чи відбувається щось? Перша фарба (FP) / перша розфарбована фарба (FCP)
• Це те, що вже можна використовувати? Перша значуща фарба (FMP) / Геометричний час
• Чи можна використовувати це? Час до інтерактивного (TTI)
• Це приємно? Відсутність тривалих завдань

джерело: Розробники Google

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

Щоб отримати додаткові поради щодо оптимізації сторінок, відвідайте наш 121WATT блозі.

Інші інструменти для оптимізації часу завантаження

Перш ніж перейти до конкретних порад щодо оптимізації сторінок, я хотів би поділитися ще кількома Інструменти Інтернет-маркетингу ім'я, яке ми використовуємо в нашій щоденній роботі:

Ви хочете більше перегляду сторінок прямо зараз?

Перша примітка для всіх розробників : оптимізація Pagespeed не є проектом - це процес. Кожне нове розширення, кожен новий сценарій і кожна зміна на сервері вимагає перегляду ефективності веб-сайту. Дуже важливо заздалегідь перевірити на тестовому сервері, який вплив ці зміни матимуть пізніше на живий веб-сайт.

Якщо ви маркетолог , пам'ятайте, що будь-яке бажання, яке ви маєте над розробником, може вплинути на швидкість ваших сайтів. Навіть якщо Марк Цукерберг особисто пише код для вашого проекту.

Оптимізація сторінок за допомогою кешування серверів

За допомогою кешування ви можете зберегти ваш веб-сервер і вашу базу даних, тому що менше даних з бази даних потрібно запитувати і обчислювати сервером.

Цей метод можна використовувати для економії ресурсів, оскільки результат дзвінків після першого запиту залишається в пам'яті сервера.

Коли викликається сторінка, яка вже знаходиться в кеші сервера, браузер звертається до кешу сервера, обходячи складний і ресурсозбережений запит сторінки у фоновому режимі.

Кеш сервера не слід плутати з кешем браузера. Кешовані дані не зберігаються на пристрої, де знаходиться браузер, як у випадку кешування браузера, але, як зазначено, на сервері.

Увага : якщо дані на вашому веб-сайті змінено, кеш сервера також повинен бути видалений і відновлений. Також не кешуйте форми для виїзду, що може бути дуже складним у процесі конверсії.

Якщо ви використовуєте WordPress, ви можете це зробити Плагін WP Rocket Використовуйте, щоб налаштувати кешування досить легко і швидко.

2. Оптимізація сторінок за допомогою кешування браузера

Цей метод кешування позитивно впливає на час завантаження веб-сайту, коли відвідувачі повертаються.

У кешуванні браузера елементи веб-сайту, які не змінюються - зазвичай зображення, JavaScript і CSS - зберігаються в пам'яті браузера на пристрої відвідувача. Вам не доведеться перезавантажуватись, переглянувши сайт. Вже час очікування набагато коротше.

Можна ввімкнути кешування веб-переглядача за допомогою розширення для CMS або вручну за допомогою .htaccess Активуйте файл.

Якщо ви використовуєте WordPress, ці плагіни допоможуть вам:

Вручну налаштування кешування веб-переглядача трохи складніше.

По-перше, потрібно переконатися, що або mod_headers, або mod_expires виконують свою роботу на вашому сервері, тому вони включені.

Кешування браузера через mod_headers

У випадку mod_headers, правильний запис у .htaccess виглядає так:

У дужках тут встановлюються типи файлів, які потрібно кешувати.

Age = 2592000 встановлює тривалість кешування в секундах. У цьому випадку 30 днів.

Кешування браузера через mod_expires

У цьому варіанті ви додаєте цей код у свій файл .htaccess:

Як видно з коду, можна визначити тривалість кешування для кожного типу файлу. Таким чином, ви можете працювати з такими значеннями тут:

• 1 місяць
• 2 тижні
• 3600 секунд

Кешування браузера та зміни на веб-сайті

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

Ви можете це зробити MD5 хеш для вирішення проблеми. Всі файли, що належать до кешованого типу, додаються до унікального рядка. Якщо такий файл змінюється, буде додано новий хеш. Як результат, цей файл розпізнається новим і знову запитується сервером.

3. Оптимізація сторінок за допомогою мінімізації запитів HTTP

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

Браузери можуть виконувати від 2 до 8 запитів одночасно і на домен. Отже, є верхня межа. Якщо це перевищено, інші дзвінки повинні чекати, поки інші будуть виконані. Чим довше потрібно, тим довше потрібно відображення всієї веб-сторінки.

Завдання : збереження запитів сервера на домен. Так що не дайте вашому HTML декілька невеликих CSS-файлів, але підсумуйте, що слід підсумувати. Це також стосується файлів JavaScript.

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

Звичайно, тут є концептуальні рішення. Таким чином, ви можете створювати файли CSS, які представляють типи сторінок, які є дуже схожі, і таким чином уникають надмірності.

Однак тема "верхня межа запиту" скоро застаріла , оскільки HTTP / 2 знаходиться в початкових блоках. Це виключає необхідність поєднання файлів CSS і JavaScript, оскільки ліміт верхнього запиту більше не актуальний. Як результат, описаний вище оптимізаційний підхід є зворотним. Тепер ваш сервер повинен в кращому випадку надавати файли з більш витонченими розмірами. Так тільки CSS, який дійсно використовується на цій веб-сторінці.

Але ваш сервер і браузер відвідувача сайту повинні розуміти HTTP / 2. Сучасні браузери можуть робити це в останніх версіях. На стороні сервера в даний час можливо в Німеччині, але тільки кілька хостерів. Це також тому, що остаточна специфікація для HTTP / 2 поки що недоступна. У багатьох місцях це все ще означає: почекайте і подивіться .

На щастя, Google вже розуміє HTTP / 2. А для старих браузерів HTTP / 2 повністю зворотно сумісний.

4. Уникайте зайвих переадресацій

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

Ось приклад:

Блог 121WATT знизився на початку 121watt.de/blog , потім встали blog.121watt.de переїхали, а потім знову відкрили через кілька років 121watt.de/blog для запуску. У якийсь момент ми ввели https, який розширив наші URL-адреси в журналі за буквою "s".

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

Антидот називається "документацією". Повна, добросовісна і легка для розуміння документація. Що взагалі є гарною ідеєю під час запуску веб-сайту, є незамінним у оптимізації сторінок для переадресацій.

І як ви усунете таке гальмо зв'язку? Це не складно. Ви можете технічно обійти ланцюжок перенаправлення, скориставшись ярликом. Від початкового посилання на поточне посилання. Однак, щоб зберегти зворотні посилання з будь-якої попередньої URL-адреси, кожен із цих URL-адрес має вказувати безпосередньо на поточне посилання.

5. Завантаження вмісту через AJAX

Коли викликається довгий веб-сайт, завантажується багато даних. Запит на доставку сторінки надсилається на сервер, і сервер добре реагує на всю сторінку, тому всі дані вони складають.

Це може бути багато коду, який повертається. Наприклад, у сторінки наших семінарів ,

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

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

Найвідомішим прикладом і піонером у цій сфері було Pinterest , Тут було майже неможливо відразу ж завантажити всі повідомлення по темі. Таким чином, наступні пункти були перезавантажені, коли глядач сторінки прокручується до самого кінця. Buzzword: прокручування inifnite.

Анімація заряду була тоді частиною досвіду. Сьогодні ви можете зберегти їх, вже перезавантаживши частини сторінки, які ще не перебувають у полі зору користувача.

До речі, перезавантаження через AJAX особливо варто на смартфонах. Навіть з нормальними довгими сторонами. Тому що дисплеї настільки вузькі, що навіть короткі сторінки можуть швидко стати дуже довгими.

6. Стиснення CSS і JavaScript

Будь-який виклик CSS, HTML або JS повинен бути завантажений. Чим менше він, тим швидше він працює, ви можете зменшити обсяг даних, стиснувши його.

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

Звичайно, ніхто не робить це вручну. Винахідливий розробник інтерфейсу залишає це Taskrunner. Такі набори інструментів, як наприклад хрюкати , ковтання або Webpack надають багато можливостей для автоматизації повторюваних завдань розробки. Серед іншого просто стиснення JavaScript і CSS.

Ось як стиск впливає на JS-файл.

У цьому прикладі розмір файлу нашого файлу JavaScript можна зменшити на 25%. Для великих файлів процентна економія може бути навіть вищою. Написавши цю статтю, наш розробник Роберт зменшив файл JS об'ємом 238 кб до 35 кб. Це відповідає зниженню більш ніж на 85% .

У JavaScript можна також обрізати імена змінних. Найкоротша назва звичайно однозначна. Але не можна так погано програмувати. Говорячи змінні завжди кращий вибір.

Таким чином, змінні скорочуються вищезазначеним Taskrunner після програмування. Це зберігає додаткові дані.

7. Використовуйте компресію gzip

Gzip стискає файли. Розмір файлу буде зменшено. Як результат, ці файли також можуть передаватися швидше.

Активація gzip на веб-серверах фактично стандартна. Тим не менш, це гарна ідея, щоб перевірити, якщо метод стиснення дійсно включений, що допомагає при оптимізації швидкості сторінки.

Тут ви дізнаєтеся більше про це Активація GZip ,

8. Оптимізація сторін за допомогою асинхронного навантаження

Веб-сторінка завжди завантажується під час завантаження в тому порядку, в якому елементи, які потрібно завантажити, з'являються в коді. Якщо елемент у цій послідовності ще не повністю оброблений, наступний елемент не може бути оброблений і тому ще не відображений.

Позиціонування CSS і JS-файлів у HTML тому довгий час визначалося особливостями синхронного завантаження: CSS в <head>, JS в кінці <body>.

• CSS завантажується на початку, щоб браузер знав, як відображати ваш сайт. Якщо ви зв'язали свої CSS-файли в нижній частині HTML-коду, HTML спочатку буде завантажений без стилів, тобто потворний, як нічний темний, а потім спочатку стилізований.
• JavaScript відрізняється. Він підтримує поведінку вашого сайту, а не зовнішній вигляд. Оскільки відвідувачу потрібна інформація на сайті в разі сумнівів, JavaScript і, таким чином, функціональні можливості сайту завантажуються наприкінці з синхронним завантаженням.

Проте JavaScript та CSS можна також завантажувати асинхронно. Але перш ніж ми підемо в глибину Росії Шлях критичної візуалізації Я поясню коротко, чому ви повинні завантажувати JavaScript асинхронно.

Асинхронне завантаження JavaScript

При завантаженні JavaScript асинхронно, не має значення, чи файли JS знаходяться у верхній або нижній частині HTML.

Чому?

Асинхронне завантаження циклів через код зверху вниз і завантажує компоненти, як звичайно, в порядку, у якому вони з'являються у файлі HTML. Різниця тепер полягає в тому, що завантажуваний файл не повинен бути повністю завантажений до того, як залишиться завантажений файл. Він починає завантажуватися і завантажується у фоновому режимі, тоді як наступні рядки коду обробляються по частинах.

Перевага: деякі скрипти - наприклад, для відстеження вашого сайту - повинні бути завантажені для кращої функції вже на початку. Асинхронне завантаження забороняє блокувати об’яву вашого сайту.

9. Використовуйте субдомени, щоб отримати більше HTTP-запитів

Ви пам'ятаєте, що браузер може обробляти до 8 запитів одночасно? Ви можете вирішити цю проблему за допомогою маленького трюку. Оскільки це обмеження застосовується лише на рівні домену. Отже, якщо ви можете завантажити додаткові скрипти та файли з інших доменів, можна завантажити 8 додаткових файлів на домен.

Таким чином, ваші файли CSS і JS можна завантажувати одним або кількома субдоменами. Чому?

Припустимо, ваш сайт складається з 28 файлів. HTML, CSS, JS і різні картинки. Для простоти припустимо, що ці файли мають однаковий розмір. Наприклад, 15 кб.

Якщо всі 28 файлів були розміщені на вашому основному домені, браузер вашого відвідувача може завантажити їх у 4 кроки: 8, 8, 8, 4.

Якщо завантаження файлу займало в цілому 50 мілісекунд, то теоретично файли будуть завантажені протягом 200 мілісекунд .

Якщо всі файли поширювалися на ваш основний домен і 3 піддомени, браузер вашого відвідувача міг би отримати 28 запитів одночасно. Теоретичний час завантаження для всіх 28 файлів зараз: 50 мілісекунд .

Звичайно, цей приклад лише ілюструє відносини між браузерами, файлами та доменами. Розповсюдження веб-сайту з 100 файлами для завантаження на більш ніж 12 субдоменів з метою досягнення найкоротшого часу завантаження не тільки громіздке, але й занадто багато часу для адміністрування.

Іноді допомагає помістити всі зображення на домен bilder.deinedomain.de. JavaScript і CSS у більшості випадків повинні існувати лише як один файл.

Все це відсутня в HTTP / 2. Тут запит на домен більше не обмежений.

10. Оптимізуйте швидкість сторінки за допомогою мережі доставки контенту (CDN)

CDN дозволяє завантажувати елементи вашого сайту, не обтяжуючи власного сервера. Це працює зі скриптами, зображеннями, CSS і всіма іншими елементами, які потрібно завантажити через HTTP-запит.

Однією з переваг є збереження HTTP-запитів на вашому власному сервері. По-друге, CDN працюють на регіональному рівні. Тому, коли клієнт завантажує товари в Німеччині, вони завантажуються з місця в Німеччині, а не в США або на Філіппінах. Таким чином, швидкість знову збільшується на більш короткі шляхи передачі.

Є багато постачальників CDN. Для малих і величезних проектів. Потім вони дешеві або дорогі.

У 121WATT ми використовуємо MaxCDN ,

Ви відчуваєте, як отримати більше SEO? Тоді ви знайдете наступні дати для нашої SEO-структури або технічного SEO-семінару:

11. Поліпшення часу відгуку вашого сервера

Коли ваш веб-сайт викликається, ваш веб-сервер повинен відповісти даними. Чим швидше будуть відповідати індивідуальні запити, тим швидше завантажиться ваш веб-сайт.

Цей момент дуже важливий. Тому що незалежно від того, наскільки зразко ви реалізували інші пункти цієї статті: Якщо ваш сервер не реагує швидко, ваша сторінка буде повільною.

І як швидко "швидко"? Google пише в PageSpeed ​​Insights, що значення має бути нижче 200 мс , Лише тоді Google-Bot постійно і регулярно відвідує цю URL-адресу.

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

Зробіть це зручним тут і оберіть другий варіант, якщо зможете.

Додаткові поради для більш короткого часу відповіді Ви можете знайти в цій статті ,

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

Якщо ваш веб-сайт викликається і ваш веб-сервер отримує запит на доставку файлу, він також повинен доставити. Якщо окремі елементи, такі як зображення, JavaScript або CSS не знайдені, то безперебійне спілкування між клієнтом і сервером стає гарячою дискусією про відсутність вмісту. Це пов'язує ресурси, наприклад, непотрібними DNS Переглядів спрацьовує.

Ви можете легко виправити відсутність запитаних файлів:

1. Знову відсутня наявний файл, де він був спочатку
2. Перенаправляйте на нове ім'я файлу або місце, де зараз можна знайти файл

Але спочатку потрібно розкрити запити про ванну. Ви можете зробити це знову Використовуйте кричачу жабу ,

404 помилок на сайті, які були виявлені в Screaming Frog

13. Використовуйте CSS3 замість графіки для кнопок, значків і фонів

Так - цей наконечник старий. Але ви не вірите, скільки разів він ігнорував.

Кілька років тому графіка повинна була бути інтегрована в веб-сайти як зображення, тобто PNG або JPG. Крім того, на таких жахливих методах, як Розсувні двері Доводилося вдаватися до створення кнопок, що мали динамічну ширину, зображення завжди мали завантажуватися.

Навіть найменша картинка має багато рядків коду. Щоб проілюструвати це, просто відкрийте невелике зображення за допомогою текстового редактора.

Швидше і елегантніше створювати всі не фотографічні графічні елементи за допомогою CSS. Класика - кнопки. Якщо вони створені в CSS3, вони складаються лише з декількох рядків коду.

На додаток до збереженого часу завантаження графіки, які були згенеровані CSS, звичайно, чітко скрізь. Чи то на звичайному моніторі, що відображає 72 точок на дюйм, або на дисплеї сітківки 220 dpi.

14. Використовуйте зображення з правильними розмірами

Розміри зображення повинні завжди вимірюватися на найбільшому зображенні відповідного екрана на Вашій стороні. Давайте поговоримо про чуйний дизайн, де зображення відображається на робочому столі з 1000px x 1000px, але на телефоні, але набагато менше, зображення все ще має існувати в 1000px x 1000px.

Проте один недолік цієї процедури: Зображення завжди завантажується в повному розмірі. Чуйний чи ні. Обхідний шлях забезпечується такими інструментами, як imgix , Тут ваші зображення розміщуються та відтворюються на основі розміру та виводу вікна перегляду. Так що якщо хтось дивиться на ваш сайт на смартфоні, то зображення також доставляється тільки у відповідному розмірі. Це економить простір.

Ви також можете використовувати елемент <picture>. Цей елемент HTML5 дозволяє пропонувати різні версії для зображення. Ці версії базуються на різних розмірах вікна перегляду, які можна визначити самостійно:

15. Використовуйте правильний формат файлів для зображень

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

Як правило:

• .jpg для фотографій і фонової графіки
• .png, .gif або .svg для графіки компонування

Але PNG не дорівнює PNG. У більшості випадків, PNG-8 є гарним вибором, оскільки цей формат поєднує в собі дуже маленький розмір файлу з більшою частиною кольорів.

Для графіки - особливо для фотографій - використання векторного формату SVG має сенс. Ці файли дуже малі, але нескінченно масштабовані. Тому вони також можуть відображатися на дисплеях Retina без втрати якості.

16. Зменште інформацію про зображення на фотографіях

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

Наприклад, графіка може бути стиснута до прийнятного рівня в Photoshop, а потім повторно відредагована інструментом, таким як kraken.io або PNGGauntlet звільнятися від інших надлишкових елементів.

17. Видаліть дані EXIF ​​і мета-теги

Більшість фотографій містять мета-інформацію, таку як EXIF ​​та мета-теги. Ця інформація забирає простір і не надає додаткової вартості на веб-сайті. Так куди йти? Праворуч: у кошику. Наприклад, веб-служба тут допомагає нам tinypng ,

18. Спочатку подумайте про користувачів мобільних пристроїв

Правило настільних комп'ютерів закінчено. Новий веб-сайт повинен задовольняти мобільну аудиторію. Отже, якщо ви розробляєте веб-сайт, ви повинні думати про тих, хто сидить у кафе на тротуарі з поганими зв'язками і мало терпіння і хочете відвідати ваш сайт.

Ці люди мають менший екран перед ними, замість миші керують своїм телефоном, а можуть мати у своєму розпорядженні EDGE-з'єднання.

Коли ви думаєте про цих людей, ви розумієте, що швидкість повинна бути вашою основною метою. Тому що, якщо ви повільні, ваш веб-сайт не підходить для мобільних пристроїв. Якщо вона не підходить для мобільних пристроїв, Google не вважає її індексативною в мобільному пошуку (!). І з цим, залежно від галузі, ви можете легко втратити більше 50% ваших клієнтів.

Запалити наступний рівень

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

Тепер ви знаєте контекст і найбільш ефективні способи зробити ваш сайт швидшим і доставити користувачеві і машині, які вони хочуть: Швидкість!

Я щось забув? У вас є запитання? Ви бачите щось інше? Використовуйте нашу функцію коментарів, щоб зв'язатися зі мною.