Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

10 способів підвищити швидкість завантаження мобільних сторінок

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Починаючи з липня 2019 року, Google розпочав свою ініціативу щодо індексації мобільних пристроїв. Це пов'язано з тим, що тепер більше користувачів отримують доступ до Інтернету через мобільні пристрої, ніж з іншого пристрою.

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

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

Як збільшити швидкість завантаження мобільної сторінки за 10 кроків або раніше

Ось кроки, які потрібно зробити, щоб скоротити час завантаження сторінки на мобільних пристроях:

Крок 1. Виберіть швидкий веб-хостинг

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

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

Про що слід подумати:

Де розташовані сервери веб-хостингу?

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

Хороша ідея – пошукати хостів, які пропонують найкращий сервіс у вашій країні чи регіоні.

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

Вам також слід подумати про використання CDN поверх вашого веб-хостингу, якщо ваш сайт обслуговуватиме глобальну аудиторію.

Чи пропонує веб-хостинг нішевий хостинг?

Наприклад, якщо ви створюєте веб-сайт WordPress, було б непогано вивчити найкращі хости WordPressсервери яких оптимізовані для CMS.

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

Ви придбали керований хостинг?

З керованим хостингом WordPress ви не тільки отримуєте вигоду від роботи з провайдером, який знає вашу CMS зсередини та зовні, але й отримуєте допомогу в обслуговуванні вашого сайту.

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

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

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

Ще одна річ, на яку варто звернути увагу – це технологія стека хоста.

  • Вони використовують NGINX?
  • Чи є на серверах кешування?
  • Чи доступні оновлення CDN?
  • На серверах інстальовано останні версії програмного забезпечення?

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

Ваш хостинг-план масштабується?

І останнє, про що слід подумати – це масштабованість вашого хостинг-плану.

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

Крок 2. Обновіть PHP до останньої версії

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

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

На щастя, PHP легко оновити самостійно.

Увійдіть до свого облікового запису веб-хостингу

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

Тим не менш, все, що вам потрібно зробити, це знайти PHP менеджер, як в цьому прикладі:

10 способів підвищити швидкість завантаження мобільних сторінок

Перегляньте поточну версію PHP

Знайдіть поточну версію PHP. У наведеному вище прикладі автоматично оновлює сервер до останньої версії, але, як і раніше, дозволяє користувачам дізнатися, яка версія використовується.

Якщо вам потрібно внести зміни, відкрийте список доступних версій PHP і виберіть ту, яку ви бажаєте використовувати:

10 способів підвищити швидкість завантаження мобільних сторінок

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

Крок 3. Реалізуйте кешування на всіх рівнях

Як користувачі, ми знайомі з кешування на рівні браузера. Зазвичай, коли не бачимо оновлений контент на веб-сторінці, ми звертаємося до цих параметрів:

10 способів підвищити швидкість завантаження мобільних сторінок

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

Використання кешування на веб-сайті дає величезні переваги у продуктивності. Ми Нам не потрібно, щоб застаріла інформація «застрягла» у браузері, але ми хочемо, щоб серверам не доводилося повторно обробляти одну й ту саму сторінку знову і знову.

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

Ви можете використовувати два ресурси для включення кешування.

Включити кешування сервера (надає переваги як для настільних комп'ютерів, так і для мобільних пристроїв)

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

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

10 способів підвищити швидкість завантаження мобільних сторінок

Якщо ви відчуваєте, що вам потрібно оновити кешування (якщо є), ви можете зробити це тут.

Включити кешування веб-сайтів, баз даних та об'єктів

Використовуючи плагін кешування WordPress, ви зможете активувати решту кешування.

Як приклад будемо використовувати WP швидкий кеш.

10 способів підвищити швидкість завантаження мобільних сторінок

Поточна версія: 0.9.1.9.

Останнє оновлення: 15 червня 2021 р.

За допомогою цього плагіна можна швидко увімкнути або вимкнути систему кешування:
10 способів підвищити швидкість завантаження мобільних сторінок

Завдяки цьому функціоналу не доведеться захоплюватися тим, які види кешування ви хочете увімкнути (наприклад, веб-сайт, браузер, база даних, код операції, кеш пам'яті або інше).

Крім того, такі плагіни кешування, як цей, зазвичай надають інші налаштування прискорення (про які поговоримо в наступному кроці).

Оновлення також дає вам додаткові функції оптимізації продуктивності, такі як оптимізація зображень, конфігурація CDN та мобільне кешування.

Крок 4. Оптимізуйте спосіб обробки коду та ресурсів

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

Розглянемо нижню половину налаштувань WP Fastest Cache:

10 способів підвищити швидкість завантаження мобільних сторінок

Вам обов'язково варто скористатися цією оптимізацією продуктивності, і ось чому:

Мініфікація коду

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

За рахунок мінімізації HTML, CSS і JavaScript цей зайвий код видаляється, тому розміри файлів і код стають більш керованими для доставки відвідувачам.

Комбінація коду/файлу

Згідно HTTP Archive, сервери обробляють у середньому 69 HTTP-запитів (тобто файлів) кожної мобільної сторінки. Щоб зробити цей процес ефективнішим, слід по можливості об'єднувати файли.

Крім видалення зайвих символів у коді, ви можете поєднати всі файли в один. Це особливо корисно для об'ємних файлів CSS та JavaScript.

Стиснення Gzip

Ви знайомі з файлами .zip і тому, чому ми використовуємо їх для доставки великої кількості файлів, а також для зменшення розміру великих файлів. Стиснення Gzip працює аналогічно, але на рівні сервера.

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

Усунення ресурсів, що блокують рендеринг

У багатьох випадках це додаткова функція кешування плагінів. Тим не менш, його важливо використовувати, як ви побачите з цього звіту Google PageSpeed ​​Insights:

10 способів підвищити швидкість завантаження мобільних сторінок

З усіх проблем із продуктивністю цього мобільного сайту найбільша проблема – це ресурси, що блокують рендеринг.

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

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

Дивіться також:

Як додати до сайту WordPress, сторінку та запис фонові зображення

Крок 5. Очистіть файли бази даних

Думайте про свою базу даних WordPress як папку з файлами (наприклад, ту, яку ви зберігаєте на своєму столі або комп'ютері). Ви зберігаєте важливу інформацію у спеціально відведеному та безпечному місці, бо думаєте: «Колись вона мені знадобиться».

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

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

Ви можете прочесати базу даних самостійно, але це трудомістка задача, яку можна легко перекласти на плагін оптимізації бази даних.

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

10 способів підвищити швидкість завантаження мобільних сторінок

Текущая версія: 3.1.11

Останнє оновлення: 8 червня 2021 р.

Існують і інші плагіни, які справляються з цими завданнями ефективно та повно, тому немає потреби активувати їх за допомогою цього плагіну. Просто зосередьтеся на оптимізації бази даних:
10 способів підвищити швидкість завантаження мобільних сторінокЦей список оптимізації фактично повідомить вас, коли у вашій базі даних з'являться плями, які необхідно очистити – наприклад, «51 пост-ревізія у вашій базі даних». Якщо ви знаєте, що ці старі версії не потрібні, ви можете продовжити і виконати оптимізацію.

WP-Optimize тепер пропонує планове очищення, тому обов'язково скористайтеся цим, щоб ваша база даних автоматично очищалася на регулярній основі:

10 способів підвищити швидкість завантаження мобільних сторінок

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

Крок 6. Створіть компактний дизайн

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

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

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

Використовуйте легку та адаптивну тему WordPress.

У наші дні багато тем WordPress мають додаткові функції:

  • Попередньо встановлені пакети плагінів.
  • Готові віджети, блоки та інші шаблони сторінок.
  • Зображення та відео встановлюються автоматично під час імпорту демоверсії.
  • Користувальницькі пакети шрифтів.
  • Та інші.

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

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

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

Зведіть до мінімуму елементи, які споживають ресурси

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

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

Єдине, у чому будьте обережні, – це кількість зображень і відео, включених у вашу тему.

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

Згідно HTTP Archive, зображення є одним із найсерйозніших факторів стресу на веб-серверах:

  • З 1791,9 КБ мобільного сайту зображення зазвичай займають 879,5 КБ.
  • З 69 HTTP-запитів, з якими доводиться мати справу серверу, зображення відповідають за 27 із них.

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

Пам'ятайте про намір мобільного користувача

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

Мікромоменти Google - Чудовий приклад того, як і чому ви повинні це робити.

По суті, Google каже наступне:

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

Зокрема, мобільні користувачі шукають інформацію та веб-сайти, ґрунтуючись на наступних чотирьох «моментах»:

10 способів підвищити швидкість завантаження мобільних сторінок

Знаючи це, ви дійсно повинні подумати про те, як одразу передати цю інформацію мобільним користувачам. Наприклад, замість того, щоб приховувати кнопку "Резервування" або віджет планування в глибині головної сторінки або на його власній сторінці, помістіть кнопку для неї у верхній частині сторінки (або, що ще краще, у заголовку).

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

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

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

Крок 7. Зробіть зображення максимально легким

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

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

Для цього потрібно зробити кілька речей:

По можливості використовуйте WebP та JPG наступного покоління

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

Візьмемо, наприклад, цей тест PageSpeed ​​Insights:

10 способів підвищити швидкість завантаження мобільних сторінок

Версія сайту для настільних ПК отримала 97 балів зі 100 і практично не містила рекомендацій від Google про те, як прискорити роботу. З іншого боку, мобільна версія отримала лише 75 балів зі 100, і рекомендацію знизити швидкість завантаження.

Відповідно до Google, наступні три формати зображень можуть підвищити швидкість мобільної сторінки:

  • JPEG 2000
  • JPEG-XR
  • WebP

Із цим є лише одна проблема:

10 способів підвищити швидкість завантаження мобільних сторінок

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

Запускати всі зображення через плагін для оптимізації зображень WordPress

Щоб змінити розмір файлу зображення та зменшити його розмір, можна зробити дві речі:

  1. Змініть його розмір.
  2. Стисніть зображення.

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

Натомість ви можете встановити один із популярних плагінів для оптимізації зображень WordPress та автоматизувати процес оптимізації.

Наприклад, за допомогою плагіна Optimole.

10 способів підвищити швидкість завантаження мобільних сторінок

Поточна версія: 3.1.1

Останнє оновлення: 31 травня 2021 р.

Використовуйте стиснення зображення з якістю, яка вам зручна (найкраще підходить до «Високого»):
10 способів підвищити швидкість завантаження мобільних сторінок

Потім встановіть максимальний розмір зображення, щоб негабаритні зображення не мали змоги обтяжити ваш сайт:

10 способів підвищити швидкість завантаження мобільних сторінок

Ви також можете застосувати відкладене завантаження, щоб зображення внизу сторінки завантажувалися лише тоді, коли відвідувач прокрутить екран:10 способів підвищити швидкість завантаження мобільних сторінок

Це допоможе заощадити ресурси сервера, коли вони справді знадобляться.

Optimole автоматично передає зображення WebP у сумісні браузери. Тож це ще одна річ, про яку можна не думати.

Крок 8. Використовуйте лише ті плагіни, які вам потрібні

Не обов'язково кількість плагінів WordPress може спричинити проблеми зі швидкістю мобільної сторінки. Але погано написані плагіни можуть спричинити проблеми з продуктивністю, як і плагіни, які поглинають багато даних (наприклад, ті, які використовують відстеження в реальному часі або регулярно звертаються до бази даних).

Отже, ви повинні дуже уважно ставитись до того, які плагіни ви встановлюєте.

Хоча існують важливі плагіни, які слід використовувати (більшості) веб-сайтів, золотого правила про ідеальну кількість плагінів не існує. Це залежить від типу веб-сайту, який ви створюєте. Однак є кілька речей, на які ви повинні звернути увагу, намагаючись з'ясувати: «Чи дійсно мені потрібна ця плагін?»

Перевірити відгуки

Відгуки, залишені користувачами в репозиторії плагінів WordPress, корисні під час перевірки якості плагіну.

Але ви повинні шукати не тільки за запитами «зламав мій сайт» або «не працює», щоб унеможливити плагін.

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

Проконсультуйтеся з вашою хостинговою компанією

Більшість хостингових компаній мають список заборонених, внесених до чорного списку або відхилених плагінів, які вони не рекомендують своїм клієнтам. Просто виконайте пошук на ім'я вашого хоста плюс «заборонені плагіни», і ви знайдете список.

Є низка причин, з яких плагін може бути заблокований. Однак продуктивність – одна з найпоширеніших.

Давайте використовувати як приклад заборонені плагіни HostGator:

10 способів підвищити швидкість завантаження мобільних сторінок

Тут ви знайдете плагіни, які:

  • Мають дублюючі функції як веб-хостинг.
  • Перебір із викликом бази даних або зовнішніх API.
  • Погано запрограмовані або більше не підтримуються та не працюють належним чином.
  • Перевантажені функціями, які не потрібні користувачам.

Крок 9. Зменшіть кількість та розмір файлів шрифтів

З часом розмір наших файлів шрифтів на мобільних веб-сайтах став набагато більшим.

Згідно HTTP Archive, середній розмір шрифтів на мобільних пристроях:

  • У 2017 році – 75,2 КБ.
  • У 2020 році -104,2 КБ.

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

Використовуйте менше шрифтів

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

Непрактично використовувати негабаритні шрифти або нестандартні макети, коли екрану для роботи стає набагато менше.

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

Вибирайте швидкі шрифти

Отже, щодо веб-шрифтів, по можливості намагайтеся розміщувати шрифти локально (на вашому власному CDN). Якщо ви можете знайти шрифт, який вам подобається, використовуйте його. А якщо це не допоможе, спрацює один із 10 найшвидших веб-шрифтів Google.

Стискайте файли шрифтів

Якщо ми говоримо про формати шрифтів, найкраще підійдуть WOFF або WOFF2. Це найпоширеніший формат шрифту у браузерах:

10 способів підвищити швидкість завантаження мобільних сторінок

Єдиний поточний браузер, який його не підтримує – це Opera Mini (виділено на малюнку фіолетовим кольором).

На додаток до поширення WOFF автоматично стискається. Згідно Google, розміри файлів WOFF2 можуть бути на 30% меншими, ніж інші формати шрифтів.

Це не просто пропозиція Google. W3C рекомендує веб-сайтам використовувати формат шрифту WOFF 2.0 через його ефективність стиснення.

Крок 10. Перетворіть свій мобільний веб-сайт на більш швидкі формати

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

AMP

AMP – це скорочення від «Прискорені мобільні сторінки». Є кілька речей, які роблять цей формат сторінки швидким:

  • Він переважно покладається на легкий HTML.
  • Він використовує ліниве завантаження.
  • Контент сторінки кешується у Google Cloud.

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

PWA

PWA – це скорочення від "Progressive Web App". Він поєднує в собі найкраще з мобільного Інтернету (тобто можливість пошуку та зручність) з мобільним додатком (тобто зручніший для мобільних пристроїв дизайн, а також функції телефонії). До того ж набагато швидше, ніж традиційний мобільний веб-сайт.

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

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

Хоча є деякі плагіни WordPress, які можуть допомогти перетворити ваш сайт на свого роду PWA, вам краще написати його з нуля.

Чи готові підвищити швидкість завантаження мобільної сторінки?

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

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

Джерело: www.codeinwp.com

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук