TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як покращити швидкість завантаження сторінок статичних HTML -сайтів?

1

HTML – це основа Інтернету та веб -серверів, які надсилають HTML -сторінки на веб -сторінку браузера. Такі браузери, як Chrome, інтерпретують розмітку HTML і відображають вміст сторінки в читабельному вигляді. Ця концепція однакова для тих сайтів, які використовують PHP із системами управління контентом, такими як WordPress. Однак створення веб -сайту в наші дні недостатньо. Ви повинні оптимізувати свій сайт для швидкого завантаження, щоб отримати хороший рейтинг пошукової системи та зручність користування. У цій статті ми розглянемо, як прискорити ваш веб -сайт із статичним HTML та покращити можливості просування вашого сайту до вершин у результатах пошуку Google.

Перш ніж почати – статичні HTML -сайти

Пам’ятайте, у цій статті ми говоримо про статичні HTML -сайти, які ви створюєте самостійно. Ви можете створювати HTML -сайти з власним дизайном або використовувати готові фреймворки, такі як Bootstrap. Загалом, ви можете завантажувати HTML -сторінки та інші ресурси (зображення / CSS / JS) на свій сервер і отримувати доступ до сайту з браузера. Крім доменного імені та облікового запису хостингу, для цього вам не потрібні інші сторонні інструменти. Крім того, ви можете використовувати сторонні інструменти, такі як Mobirise, для створення статичних HTML-сторінок та завантаження через FTP.

Ми не обговорюємо такі випадки:

  • Системи управління вмістом, такі як WordPress – WordPress пропонує повний пакет оптимізації для покращення швидкості завантаження вашого веб -сайту. Перегляньте нашу статтю про оптимізацію часу завантаження сторінок сайтів WordPress.
  • Інструменти для створення веб -сайтів, такі як Weebly, Wix тощо – ці платформи не є рішеннями з відкритим кодом, що, по суті, означає, що у вас є обмежені можливості для оптимізації в межах платформи. Ви можете скористатися деякими варіантами, запропонованими в цій статті. Однак ви не можете оптимізувати такі речі, як поєднання CSS/JS, видалення ресурсів, що блокують рендеринг тощо, оскільки ви не можете отримати доступ до сервера.

Перевірте швидкість сторінки в Google PageSpeed ​​Insights Tool

Тепер, коли контекст зрозумілий, ми підемо далі. Найкращий спосіб розпочати оптимізацію – це спочатку зрозуміти основні проблеми, що існують на вашому сайті. Щоб знайти проблеми, пов’язані зі швидкістю, перейдіть до інструментів Google PageSpeed ​​Insight та перевірте рейтинг свого веб -сайту. Спочатку не турбуйтеся про рахунок, прокрутіть вниз і перевірте розділ можливостей для покращення рахунку.

Як покращити швидкість завантаження сторінок статичних HTML -сайтів?

Пропозиції Google PageSpeed ​​Insights

Зауважте, що можливості, показані в інструменті PageSpeed ​​Insights, НЕ вплинуть безпосередньо на оцінку. Як правило, оцінка буде низькою, якщо у вас є проблеми у верхній частині сторінки (розділ заголовка) вашого веб -сайту. Він включає ресурси, що блокують рендеринг, попереднє завантаження шрифтів та зображень, сукупний зсув макета із кодом сторонніх виробників тощо. Тому ви можете поєднати можливості, які поєднують можливості та загальні правила, щоб покращити швидкість завантаження сторінок ваших статичних HTML-сайтів.

Як покращити швидкість завантаження сторінок статичних HTML -сайтів?

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

1 Поєднання та мінімізація файлів CSS та JS

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

  • Перше, що вам потрібно – це видалити непотрібні пробіли та коментарі у файлах CSS / JS / HTML. Це називається мініфікацією, яка зменшує розмір файлу та покращує швидкість завантаження сторінки. Використовуйте ці інструменти для мінімізації CSS, JS та HTML, щоб видалити непотрібний безлад із файлів. Пам’ятайте, що зменшені файли CSS та JS матимуть такі розширення, як .min.css та .min.js.
  • Зверніться до своєї хостинг -компанії та ввімкніть стиснення GZIP, щоб стиснути вміст HTML. Це зменшить розмір файлу, що подається до браузера, і різко покращить швидкість сторінки. За допомогою цього інструменту ви можете перевірити, чи використовується на вашому сайті стиснення GZIP, і знайти економію розміру.
  • Поєднання файлів CSS і JS допоможе вам зменшити кількість HTTP -запитів до вашого сервера. Тому можна поєднувати файли CSS замість використання стилів у різних таблицях стилів. Однак це не потрібно, якщо ваш хостинг -сервер підтримує протокол HTTP/2, що підтримує паралельні запити HTTP. Крім того, поєднання JS -файлів може порушити макет, якщо ви не знаєте, як правильно поєднати код всередині файлу.

2 Видалення ресурсів, що блокують візуалізацію

Наступний крок – видалити ресурси, що блокують рендеринг, над розділом сторінки (заголовка) вашого сайту. Як емпіричне правило, обов’язково зв’яжіть усі файли JS після розділу основного тексту вашої сторінки HTML. Це допоможе вам затримати завантаження сценаріїв і уникнути проблем із блокуванням рендерингу.

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

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

3 Використовуйте мережі доставки вмісту (CDN)

Два вищевказані варіанти мають більш технічний характер, що може бути важким для вас. Щоб уникнути втрати часу та порушення макету вашого сайту, найкращим можливим рішенням буде використання мережі доставки вмісту (CDN), наприклад Cloudflare StackPath.

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

Базовий CDN Cloudflare безкоштовний, чого достатньо для більшості статичних HTML -сайтів. Ви можете об’єднати та зменшити файли одним натисканням кнопки та перевірити, як це впливає на швидкість завантаження сторінки за допомогою інструмента Google PageSpeed ​​Insights. Якщо ви використовуєте такі фреймворки, як Bootstrap, не забудьте включити ресурс CDN замість обслуговування вихідного файлу з вашого сервера.

4 Уникайте кодів третіх сторін

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

  • Розміщуйте рекламу типу Google AdSense під видимою областю під час завантаження сторінки. На жаль, це безпосередньо вплине на ваш прибуток, зменшивши рейтинг кліків та кількість переглядів сторінок.
  • Вставте Google Analytics або будь -який інший код відстеження після розділу body.
  • Уникайте вставлення кодів у заголовок для спільного використання в соціальних мережах.
  • Якщо ви використовуєте шрифти Google, переконайтеся, що вони використовуються спрощеним способом із меншою вагою шрифту та сімействами шрифтів. Це допоможе вам зменшити кількість файлів і швидше отримати їх із сервера Google.

5 Попереднє завантаження шрифтів та зображень

Ще одна популярна проблема швидкості сторінки – це попереднє завантаження шрифтів та зображень, які ви завантажуєте у розділ заголовка. Якщо ви бачите попереджувальні повідомлення в Google PageSpeed, додайте наступні коди до розділу заголовка. Обов’язково замініть імена файлів на ті, які ви бачите в Google PageSpeed ​​Insights.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

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

6 зображень-стискайте та використовуйте формат наступного покоління

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

  • Деякі веб -сервери мають можливість стискати зображення під час завантаження. Перевірте у своєї хостинг -компанії, чи пропонують вони якісь інструменти для цієї мети.
  • В іншому випадку використовуйте інструменти стиснення зображень, щоб зменшити розмір зображень без втрати якості.
  • Крім того, можна конвертувати формат зображення в JPEG-2000 або JPEG XR. Як правило, сервери VPS мають можливість розміщення зображень у форматі WebP, що ви можете підтвердити у своїй хостинговій компанії. У цьому випадку вам не потрібно ніякого перетворення, оскільки воно автоматично відбуватиметься з боку сервера для кожного зображення. Використання зображень у WebP, JPEG-2000 або JPEG XR допоможе вам виправити подані зображення у форматі наступного покоління в інструменті Google PageSpeed ​​Insights

7 Використовуйте критичний CSS

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

  • Перейдіть до критичного інструмента генератора CSS і вкажіть URL -адресу свого веб -сайту.
  • Створіть критичний CSS та скопіюйте вміст.
  • Розмістіть скопійовані стилі між… тегами всередині розділу заголовка вашого HTML -сайту.
  • Ви можете відкласти основну таблицю стилів у колонтитул, щоб уникнути проблеми блокування рендерингу CSS.

Як покращити швидкість завантаження сторінок статичних HTML -сайтів?

Критичний генератор CSS

Заключні слова

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

Джерело запису: webnots.com

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