Ідеальна головна: 7 найкращих практик щодо оптимізації головної сторінки

1. 1. Серверна оптимізація
2. 2. Оптимізація файлів JS, CSS
3. 3. Web-шрифти
4. 4. Кешування файлів
5. 5. CDN
6. 6. AMP
7. 7. Оптимізація контенту

Бажання наповнити головну сторінку інформацією по максимуму цілком виправдано. Але в результаті може вийти масив контенту, який буде завантажуватися 10-15 секунд. Як це оптимізувати? Давайте розберемося в цій статті.

1. Серверна оптимізація

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

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

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

Виправити це можна за допомогою:

• Оптимізації структури бази даних. «Розкладіть» всю інформацію по своїм «місцях» - це спростить пошук і, відповідно, прискорить отримання інформації.
• Оптимізації запитів. Правильно складені запити на отримання інформації «допоможуть» онлайн-ресурсу швидше знайти необхідні дані в базі даних.

Ursus Wehrli «The Art Of Clean Up»

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

2. Оптимізація файлів JS, CSS

Одночасне підключення декількох CSS-файлів дуже «розтягує» в часі завантаження сторінки браузером. Раціональне рішення - зведення декількох СSS-файлів в один. Його слід підключати на початку сторінки. Ці ж правила працюють для JS-файлів, тільки підключення здійснюється внизу сторінки. Файли, які ми звели, мінімізуємо. Для цієї мети підходять спеціальні програмні утиліти, а також онлайн-сервіси.

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

Мінімальний розмір файлів - обов'язкова вимога для головної сторінки сайту. Тому ми рекомендуємо довантажувати тільки той програмний код, який актуальний для головної.

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

3. Web-шрифти

Використання сучасних форматів WOFF2 і WOFF дозволяє скоротити трафік web-шрифтів і оперативно їх отримати. Для максимально ефективної оптимізації застосовуйте тільки ті набори символів, які використовуються на сайті.

Досягнення балансу між естетикою і продуктивністю сторінки можливо при використанні СSS-властивостей Font-display. Так ви зможете управляти реакцією браузера - почекати шрифт або малювати запасний, наприклад. Швидкому відображенню web-шрифтів також сприяє їх попередня завантаження link rel = «preload».

Не варто використовувати на одній сторінці більше одного-двох шрифтів. Жирного і курсивного накреслень буде досить для виділення необхідного контенту.

4. Кешування файлів

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

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

5. CDN

CDN (Мережа доставки контенту) - велика кількість веб-серверів по всьому світу, які представляють собою мережеву інфраструктуру. Використання CDN сприяє високій якості і великій швидкості передачі даних. Мережа дозволяє довантажувати на сайт бібліотеки CSS і JS, і попутно знижує навантаження на ваш сервер.

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

6. AMP

AMP - Прискорені мобільні сторінки - спільна розробка Google, IT-компаній зі світовими іменами, власників і розробників сайтів. Технологія з відкритим кодом націлена на зниження «ваги» сайту і миттєву його завантаження. За рахунок швидкого завантаження і адаптації під мобільні девайси сторінки з АМР шикуються вище інших в списку пошукових запитів.

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

7. Оптимізація контенту

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

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

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

Якщо хочеться додати відео - вперед! Тільки врахуйте, що воно «поїдає» багато ресурсів. Для зниження навантаження на сервер рекомендуємо використовувати популярні сервіси Vimeo або Youtube.

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

Приклад успішної оптимізації головної сторінки сайту tomahawk.in.ua

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

Досить «гальмувати» на старті. Оптимізує!