Мобільні оптимізаційні поради: 7 способів покращити швидкість мобільного веб-сайту
- 1. Виміряйте і мінімізуйте час відгуку сервера
- 2. Уникайте або мінімізуйте перенаправлення для прискорення швидкості роботи сторінки
- 3. Ретельно вимірюйте час обертання
- 4. Завантажуйте вміст, розташований над поверхнею, перед вмістом нижче
- 5. Покладіть JS внизу і CSS у верхній частині HTML-файлів
- 6. Оптимізація та мінімізація файлів CSS та JS
- 7. Скористайтеся стисненням gzip, щоб зменшити розмір файлу
Під час курортного сезону покупці мають лише одну критичну місію. Так само, як у старому фільмі Jingle весь шлях , в якому виступає екс-губернатор, колишній чемпіон з бодібілдингу та господар Учень , Арнольд Шварценеггер, вони прагнуть сильно отримати подарунок вбивці для свого улюбленого малюка і швидко схопити його , перш ніж хтось інший.
Google, Radware і експерти з мобільної оптимізації виділили три секунди як магічне число для мобільного часу завантаження. Більше трьох секунд починаються катастрофи і починаються різноманітні погані речі: клієнти, що втікають з конкуруючих веб-сайтів, знижують кількість конверсій і погіршують торгову марку. За три секунди, ви добре, як золото, і ваші клієнти теж!
Не втрачаючи навіть мілісекунди вашого часу, дозвольте мені окреслити 7 ключових кроків, розроблених командою оптимізації Mobile1st, щоб різко прискорити швидкість вашої мобільної сторінки.
1. Виміряйте і мінімізуйте час відгуку сервера
Швидкість мобільної сторінки визначається вашим веб-кодуванням, а також залежить від великого, жирового, технологічного інструменту, відомого як ваш сервер. Очевидно, що чим довше ваш сервер чекає відповіді на запит у веб-переглядачі, тим повільніше час завантаження сторінки. Mobile1st разом з експертами в Google і GTMetrix рекомендувати вашому серверу розпочати передачу першого байта ресурсів у межах 200 мілісекунд запиту .
Також називається "час очікування" або "час до першого байта", час, який проходить до відповіді від сервера, є першим елементом у діаграмі водоспаду.
Веб-продуктивність Сьогодні забезпечує близький погляд на діаграму водоспаду, яка показує всі елементи завантаження веб-сторінок і їх послідовну синхронізацію.
Існує три основних способи збільшення часу відповіді сервера:
- Покращити програмне забезпечення веб-сервера або налаштувати його
- Підвищуйте якість і обсяг вашої послуги веб-хостингу, зокрема, забезпечуйте адекватні ресурси CPU і пам'яті
- Зменшіть ресурси, необхідні для веб-сторінок
2. Уникайте або мінімізуйте перенаправлення для прискорення швидкості роботи сторінки
Переадресації - це інструкції, які автоматично приймають відвідувачів веб-сайту з однієї сторінки до іншої. Кожне переспрямування споживає цінні мілісекунди, створюючи більш повільне завантаження сторінки. Це особливо проблематично для мобільних пристроїв, оскільки вони часто залежать від менш надійних мереж, ніж користувачів настільних ПК.
301s - найпоширеніший тип переадресації сторінок - направляйте відвідувачів веб-сайту із застарілих веб-сторінок на нові сторінки з різними URL-адресами. Хоча часто потрібні , 301s може поглинути велику частину часу завантаження мобільних пристроїв. Насправді, перенаправлення, ймовірно, є "найбільшим джерелом втраченого часу у вашому коді і можуть суттєво вплинути на швидкість сторінки". повідомляє Варви .
Перший крок полягає в простому дослідженні кількості переадресацій на вашому сайті шляхом розгортання таких інструментів, як Патрік Секстон переадресація .
3. Ретельно вимірюйте час обертання
Wikipeida визначає "час туру" (RTT) як час, необхідний для запиту передачі даних від настільного комп'ютера або мобільного пристрою до цільового призначення, наприклад віддаленого комп'ютера, і повне повернення цих даних.
RTT може бути виміряний шляхом пингования адреси. Точний інтервал RTT залежить від численних факторів, таких як джерело з'єднання, середовище з'єднання, фізична відстань між фактичним джерелом і віддаленою системою, кількість вузлів між ними, кількість трафіку, кількість інших запитів, які обробляються сервером, і так далі.
Кожен RTT додає час до загального часу завантаження для мобільних пристроїв. Отже, кращою практикою є зменшення кількості послідовних кругових поїздок, переконавшись, що ресурси передаються паралельно та усуваючи зайву вагу. Крім того, уникаючи згаданих переадресацій, GlobalDots пропонує комбінування скриптів, щоб уникнути повторного RTT, що вимагає багато часу, зокрема шляхом об'єднання якомога меншої кількості файлів:
- Зовнішні JavaScript
- Зовнішній CSS
- Зображення з використанням CSS спрайтів
4. Завантажуйте вміст, розташований над поверхнею, перед вмістом нижче
Ідея тут проста: ваш веб-сайт має завантажувати вміст, який користувач мобільного зв'язку бачить першим перед вмістом, який вони можуть побачити пізніше. Зокрема, кодуйте свої веб-сторінки таким чином, щоб ваш сервер посилає спочатку дані, необхідні для відображення вмісту вище. Навіть якщо сторінка неповна, користувач переживає вміст як готовий раніше. У тестах швидкості мобільної сторінки, Google насправді викликують сторінки, які не вдається завантажувати спочатку над папкою, рекомендуючи вам "розставити пріоритетність видимого вмісту".
5. Покладіть JS внизу і CSS у верхній частині HTML-файлів
JavaScript приносить інтерактивність до ваших онлайн-сторінок (наприклад, кнопок та їхніх відповідей або даних, які вводяться у формах, динамічному стилі та анімації). Однак сценарії JS запобігають паралельні завантаження. Коли завантажується код JS, браузер не почне завантаження інших файлів. Щоб прискорити завантаження сторінки, перемістіть JS-сценарії в нижній частині сторінки, якщо це можливо. Це дозволить відображати вміст HTML перед завантаженням JavaScript, що дозволить вам відобразити лічильник чи інше повідомлення для завантаження сторінок мобільного відвідувача.
CSS, або каскадні таблиці стилів, деталізують, як елементи HTML повинні відображатися на вашій веб-сторінці. Коли ви розміщуєте таблиці стилів на початку документа програмування, ваші сторінки швидше завантажуються. Розміщуючи свій CSS вперед, браузер може якнайшвидше відобразити будь-який вміст, який він має.
6. Оптимізація та мінімізація файлів CSS та JS
Більше даних та надлишкової ваги сторінок означає, що завантаження сторінок буде тривати довше. Ось чому коли-небудь веб-розробник вартий своєї солі знати, що вони повинні оптимізувати і мінімізувати активи. На початок списку - оптимізація та мінімізація файлів CSS та JS.
"Minification" усуває зайві або просто невідповідні дані, не впливаючи на те, як відображається сторінка. Різноманітні інструменти, як Google вказує, може допомогти фільтрувати ваш код і усунути такі звільнення.
Найбільш помітними є:
7. Скористайтеся стисненням gzip, щоб зменшити розмір файлу
На відміну від зменшення, стиснення даних вимагає кроку без стиснення, перш ніж його можна буде відобразити. Так, код був зменшений від початкового розміру і тому швидше переноситься до браузера, але додатковий крок розпакування додає час мобільного завантаження.
На момент написання статті gzip Вибір методу стиснення серед веб-розробників. Gzipping зменшить вагу сторінки і збільшить швидкість мобільної сторінки . Зазвичай gzipping зменшує вагу сторінки на 70% і в даний час підтримується переважною більшістю браузерів.
Зниження часу завантаження мобільного пристрою нижче порога три секунди є критичним. Прийняти ці сім кроків і інші рекомендовані методики для досягнення цієї важливої мети, підвищуючи показники, які сприятимуть успіху вашого бізнесу. Проблеми? Питання? Команда мобільної оптимізації Тут, в Mobile 1 стоїть допомога.
Mobile1st пропонує послуги мобільної оптимізації для збільшення доходу / конверсії мобільного веб-сайту, зменшуючи показник залишення кошика, знижуючи швидкість завантаження сторінки, покращуючи мобільний UX і SEO, аналізуючи вашу мобільну аналітику та багато іншого. Наша команда мобільних експертів аналізує та вдосконалює ваш сайт на 35 + факторах, A / B тестує ідеї, і навіть може (необов'язково) реалізовувати зміни дизайну / коду.
Зв'яжіться з експертами Mobile1st зараз!
Питання?
