7 порад, як покращити швидкість завантаження сайту

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

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

Порада №1. Завантажте CSS якнайшвидше.

Один із способів це зробити – вставити весь ваш css код інлайново в код сайту. Це можна зробити вручну, а можете за допомогою пакета npm gulp-inline-source.

Другий спосіб більш красивий. Ви просто до рядка, який підвантажує ваш css, додаєте rel=”preload”. Таким чином ви кажете браузеру завантажити цей файл, якнайшвидше і зберігати його в кеші до того моменту, поки він не знадобиться.

Приклад

<link rel="preload" href="/style.css" as="style" />

Порада №2. Використовуйте відповідні розміри фотографій.

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

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

Приклад:

<img srcset="photo-name-320w.jpg 320w,
             photo-name-480w.jpg 480w,
             photo-name-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="photo-name-800w.jpg" alt="Photo alt">

Порада №3. Використовуйте loading=”lazy”

Тут все дуже просто – додайте до тега img або iframe наступний атрибут зі значенням:

loading="lazy"

За допомогою цього атрибуту ми можемо робити відкладене завантаження за допомогою самого браузера. Це не гарантує, що “ліниве” завантаження буде працювати на всіх пристроях. Тому ви можете використовувати сторонні плагіни та доповнення, щоб реалізувати відкладене завантаження.

Наприклад, якщо ваш сайт працює на CMS WordPress, то рекомендуємо встановити плагін W3 Total Cache – він одразу вирішить декілька ваших завдань. “Ліниве” завантаження тут теж є.

Порада №4. Якщо завантажуєте шрифти – використовуйте font-display: swap;

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

Приклад:

@font-face {
  font-family: FontName;
  src: url(/path/to/fonts/fontname.woff) format('woff'),
       url(/path/to/fonts/fontname.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Порада №5. Використовуйте CDN.

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

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

Порада №6. Завантажуйте файл капчі (reCAPTCHA) тільки там, де він потрібен.

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

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

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

Порада №7. Кешуйте.

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

Якщо ви використовуєте WordPress – встановіть W3 Total Cache. Він буде кешувати ваші файли.

Інші поради одним рядком:

• Мініфікуйте все – html, css, js.
• Видаляйте коментарі в коді. Це можна зробити на етапі складання проекту.
• Google Maps, reCAPTCHA, Facebook Pixel, Google Analytics – всі вони дуже сповільнюють завантаження сайту. В окремій статті ми розповімо, як зменшити їхній вплив на швидкість сайту.
• Якщо ваш сайт працює на WordPress, намагайтеся контролювати своє бажання встановити ще один плагін. Можливо, краще проконсультуватися з вашим програмістом та реалізувати потрібний вам функціонал без активації сторонніх плагінів.

Список додаватиметься. Пишіть у коментарях свої поради, як можна прискорити завантаження сайту.