Посібник для початківців з оптимізації файлів веб-сайтів (70% швидше завантаження)

Щоб пришвидшити ваш веб-сайт і зберегти пропускну здатність, стиснення – це один з найефективніших (і найпростіших) способів досягти цього.


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

Щоб зробити короткий короткий опис, один з найважливіших способів прискорити швидкість завантаження сторінки – це змусити ваші файли JavaScript (JS) завантажувати швидкіші файли … А ви можете пришвидшити JavaScript за допомогою стиснення GZIP.

Зараз це ідеально лише для сучасних браузерів, але більшість людей в Інтернеті користуються останнім пристроєм та браузером. І Yahoo, і Google використовують стиснення GZIP.

Але спочатку давайте встановимо трохи контексту.

Крок №1: Що таке кодування вмісту?

Щоб ефективно оптимізувати файли вашого веб-сайту, важливо зрозуміти поняття, відоме як кодування вмісту.

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

HTTP-запит

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

Отже, що робити, коли файл занадто великий?

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

Є два елементи, пов’язані з сервером та браузером, знаючи, що добре надсилати заархівований файл:

  • Браузер дає серверу знати, що добре надсилати стислий вміст, надсилаючи заголовок
  • Якщо вміст стиснуто, сервер надсилає відповідь

Якщо файл не стиснений, сервер не надсилатиме над заголовком відповіді з кодування вмісту. Заголовок приймання-кодування – це не попит, а просто запит, який робить браузер.

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

Початок налаштування сервера

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

веб-продуктивність після стиснення

Для цього просто увімкніть параметри стиснення для IIS. Якщо ви використовуєте Apache, увімкнути компресію виходу порівняно просто. Просто перейдіть до свого .htaccess-файлу та додайте належний код.

З Apache можна вибрати два варіанти стиснення:

  • mod_deflate стандартний, і його простіше налаштувати
  • mod_gzip дозволяє попередньо стиснути вміст і він виглядає більш потужним

легкий апаш-дефлат

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

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

Щоб повернути стислий вміст, ви можете використовувати PHP, якщо ви не можете внести зміни до вашого файлу .htaccess. На PHP:

<?php if (substr_count ($ _ SERVER [‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start («ob_gzhandler»); else ob_start (); ?>

Gzipped версія файлу повертається після перевірки заголовка accept-кодування. Це схоже на побудову веб-сервера самостійно. Щоб стиснути вихід, Apache робить це легше.

Важливий застереження: більшість програмного забезпечення для створення веб-сайтів не дозволяє редагувати рівень коду (за деякими винятками). Що стосується хостингу в Канаді, ми є твердими прихильниками самостійного розміщення вашого веб-сайту, але розуміємо, що це не для всіх. При використанні будівельників веб-сайтів, таких як Squarespace, Wix або Weebly, такий тип майстерності на рівні сервера, ймовірно, не досягає.

Перевірте стиснення

Важливо переконатися, що ви доставляєте стислий вміст після завершення налаштування сервера. Щоб визначити, чи стискається ваша сторінка в Інтернеті, ви можете скористатися онлайн-тестом GZIP.

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

Якщо вміст було надіслано стиснутим, ви побачите заголовок “кодування вмісту: GZIP”.

google chrome заголовок gzip

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

Застереження для розгляду

Стиснення дає безліч переваг, але у всьому є і мінуси. Ви хочете знати про таке:

  • Графік коефіцієнта стисненняВміст, який уже стислий: Більшість музики, відео та зображень уже стиснуті. Якщо ви спробуєте їх знову стиснути, це багато в чому лише витрата часу. У більшості випадків вам потрібно потурбуватися лише про стиснення CSS, HTML та JavaScript.
  • Старіші веб-переглядачі: Стислий вміст сумісний не з усіма браузерами. Особливо це стосується браузерів старшого віку. Наприклад, ви можете уникнути стиснення HTTP, якщо вам потрібно працювати в Windows 95 або з Netscape 1.0. Існує кілька правил та рекомендацій, щоб уникнути стиснення для старих браузерів з мод-дефлятом Apache.
  • Навантаження процесора: Збережіть пропускну здатність і використовуйте час процесора, коли ви стискаєте вміст під час руху. Зважаючи на швидкість стиснення, компроміс зазвичай розглядають як справедливий. Існують способи як надсилати через стиснуті версії, так і попередньо стискати статичний вміст. Зазвичай це вимагає більшої конфігурації. Пам’ятайте, що люди в Інтернеті мають короткий проміжок уваги, тому збільшення швидкості для кращого користувацького досвіду за допомогою циклів процесора зазвичай завжди є хорошою ідеєю.

Чому слід використовувати стиснення GZIP

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

В середньому, використання GZIP для стиснення файлів CSS та HTML заощаджує від 50 до 70 відсотків від загального розміру файлу. Ця значна економія розміру файлу призводить до набагато кращої та ефективнішої роботи користувачів на вашому веб-сайті.

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

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

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

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

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

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

Вирішення проблем із стисненням GZIP

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

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

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

Ви можете просто перевірити свій код, який ви ввели за допомогою PHP або .htaccess (про це йшлося вище). Якщо ви не можете знайти проблему, але ви вважаєте, що в цьому винен код, подумайте просто замінити його іншим кодом, який, швидше за все, спрацює.

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

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

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

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

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

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

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

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

Посилання та кредитні зображення:

  • BetterExplained.com
  • OpenSourceVarsity.com
  • Geekeasier.com
  • WebPerformance.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector