14 світлових прийомів для пришвидшення роботи вашого сайту
Ця серія блогів про швидкість сайту була дуже веселою.
Наразі ми дізналися, що Amazon втратить 1,6 мільярда доларів (!), Якщо їх веб-сайт сповільниться.
Я також точно дізнався, що відбувається за лаштунками, щоб сповільнити роботу веб-сайту.
Це підводить нас до нашого природного висновку: як саме ти можеш пришвидшити справу? Ми охоплюємо все - від швидкості сервера до оптимізації та декількох додаткових бонусів.
Спочатку давайте підсумуємо, що спричиняє повільну швидкість:
Коли ви завантажуєте мій сайт сюди в Bitcatcha, ваш браузер (Firefox, Safari, Chrome тощо) починає розмову з моїм веб-сервером.
Браузер: “Гей веб-сервер! Чи можете ви принести мені всі шматочки для відображення Bitcatcha.com, будь ласка? "
Сервер: "Звичайно, дозвольте мені їх знайти та надіслати".
Потім веб-сервер розміщує всі компоненти сайту в тунелі та відправляє їх у ваш браузер для завантаження.
Це звучить досить просто, але ось що сповільнить процес:
- Ледачий сервер, якому потрібні віки, щоб відповідати на запити.
- Сервер, який одночасно керує треками для багатьох інших веб-сайтів.
- Багато чудових "шматочків" веб-сайту, які потрібно знайти і відправити в тунель.
- Переповнений тунель.
Є багато речей, які тут можуть піти не так. Тож як ми пришвидшимо справу?
Частина 1: Зробіть свій сервер швидшим
1. Оновлення до кращого веб-хоста (тобто кращого сервера)
Ваш веб-хостинг - це компанія, яка надає сервер. Це все одно, що взяти в оренду веб-сайт, де ви будете зберігати всі частини сайту.
Більшість із нас схильні купувати найдешевшу землю, яку ми можемо знайти. Але це не обов'язково мудре рішення.
Дешеві веб-сайти розміщують сервери оренди, які переповнені та невеликі. Пам'ятайте, ви хочете, щоб ваш сервер швидко реагував на запити та швидко надсилав ваш сайт у тунелі до вашого браузера.
Перегляньте наш найшвидший список веб-хостингу на основі часу відгуку сервера.
2. Перехід від спільного хостингу до VPS
Дешеві веб-хости розмістять ваш веб-сайт на сервері разом з безліччю інших веб-сайтів. Це називається спільний хостинг, і це означає, що вам потрібно боротися за ресурси.
Якщо веб-сайт раптом отримує багато трафіку, це сповільнить роботу, збільшуючи пропускну здатність.
Переключившись на VPS (віртуальний приватний сервер) або (принаймні, якісний спільний сервер, такий як SiteGround), веб-хост закриє кут спільного сервера саме для вас. Це означає, що вам не доведеться турбуватися про те, що інші сайти викрадуть ваші ресурси.
3. Перемістіть сервер ближче до своєї аудиторії.
Щоразу, коли хтось натискає ваш сайт, ваш сервер повинен фізично надсилати інформацію з планети на екран вашого комп’ютера.
Якщо сервер знаходиться на іншому кінці світу, це займе багато часу. Якщо ви знаєте, звідки надходить більша частина вашого трафіку, попросіть веб-хостингу розмістити ваш сайт на сервері, найближчому до вашої основної аудиторії.
4. Використовуйте мережу доставки вмісту
Проблема наближення вашого сервера до певної аудиторії полягає в тому, що хтось програє. Якщо ви перенесете свій сервер до Каліфорнії, австралійські відвідувачі будуть отримувати повільний час завантаження. Так само як і ваші європейські відвідувачі.
Мережа доставки вмісту або CDN розміщує ваші дані на серверах по всьому світу. Отже, коли хтось натискає ваш веб-сайт, найближчий до нього сервер надсилає інформацію.
Це означає, що ваші відвідувачі стають надзвичайно швидкими, де б вони не знаходились у світі. (Для довідки я використовую Cloudflare тут, у Bitcatcha.)
5. Увімкніть параметр "тримати живим"
Коли ваш сервер надсилає файли вашого сайту в тунель, кожна сторона подорожує окремо. Таблиця стилів CSS, логотип, кожне зображення тощо.
Очевидно, що найефективніший спосіб зробити це - відправити їх усіх у той самий великий тунель.
Ось тут і з’являється настройка «тримати її в живих». При активації основний тунель залишається увімкненим, і все йде по тому ж підключенню (це дуже швидко).
Але коли налаштування зупинено, для кожного елемента потрібно зробити новий тунель. (Це дуже повільно).
Більшість веб-хостів зберігають це налаштування (що добре), але іноді спільні хости тісно з’єднують без попередження.
Частина 2: Оптимізація елементів веб-сайту
Тепер, коли ми зробили ваш сервер максимально швидким та ефективним, як ми самі оптимізуємо компоненти сайту?
6. Скоротіть час в обидва кінці (RTT)
В даний час ваш браузер повинен запитувати кожен елемент із сервера, по одному. Ваш логотип, потім кожне із зображень, потім таблиця стилів CSS.
Час, необхідний для його отримання, - туди і назад.
Чим більше поїздок в обидва кінці вам доведеться здійснити, тим більше часу потрібно для завантаження всього веб-сайту. Це все одно, що упакувати машину коробками та перенести їх у новий будинок.
Чим більше ящиків у вас є, тим більше поїздок в обидва кінці вам доведеться здійснити. Рішення? Зменшіть кількість ящиків, які ви берете.
Зменште кількість елементів, які ваш сервер повинен відправити в тунель. Менше зображень, менше коду, менше плагінів.
7. Увімкніть стиснення на вашому веб-сайті
На жаль, справа не лише в кількості коробок. Це наскільки вони важкі. Якщо всі ваші елементи великі і важкі, це займе багато місця у вашому тунелі. Вони також рухатимуться повільніше. Це як побудова вантажівок. Кожна повна важких коробок.
На щастя, ви можете стиснути свій веб-сайт і все на ньому. Використовуючи такий інструмент, як Gzip. (Це визнано 90% браузерів. - Це майже всі, за винятком кількох іноземців, які все ще користуються Internet Explorer 4.)
Найдивніші частини вашого сайту - це зображення, HTML, CSS та Javascript. Стискаючи їх, ви можете зменшити середню «вагу» вашого сайту під час передачі.
Середній розмір веб-сайту становить 2 Мб, але він зростає з кожним роком.
8. Оптимізуйте свої зображення
Зображення, як правило, найскладніша частина будь-якого веб-сайту. Я найбільший, найтовстіший, найповільніший навантажувач.
Почніть з того, що виріжете їх до точного розміру, який вам потрібен. Не завантажуйте величезні зображення та не збільшуйте їх у форматі HTML. Просто завантажте їх до потрібного розміру.
Також стискайте зображення перед завантаженням. Якщо ви використовуєте WordPress, такі плагіни, як WP Smush, можуть зменшити розмір зображення на 80%!
9. ... Або готуйте духів
Спрайт - це одне зображення, яке містить багато маленьких зображень. Він чудово підходить для спільного використання кнопок або інших елементів зображення.
Тепер ваш веб-сайт повинен зробити один запит, а не десять. Потім за допомогою CSS можна вибрати, де де відображатимуться частини зображення.
10. Виріжте свій код
HTML щільний і важкий. Це також неймовірно повторюється. CSS трохи ефективніший, але багато з них є зайвими.
Пора переглядати ваш код за допомогою тонкої зубчастої гребінця і позбутися від усіх непотрібних шматків.
Якщо ви використовуєте шаблон від WordPress, Tumblr тощо, то, ймовірно, існує багато кодів, які ви не використовуєте. Ці шаблони сконфігуровані, щоб надати вам безліч варіантів функціональності. Але більшості з нас це все не потрібно.
11. Видаліть непотрібні плагіни (WordPress)
З часом я експериментував з багатьма тонами плагінів. Але багато разів ми забуваємо їх видалити.
Кожен плагін - це інший запит сервера. Це ще один важливий пакет, який блокує ваш високошвидкісний тунель.
Якщо ви не використовуєте його, вимкніть його.
12. Зменшіть переспрямування
Для кожного переадресації ваші пакети двічі піднімаються і спускаються по тунелю. Якщо вам це не потрібно, не використовуйте переспрямування на своєму веб-сайті.
Частина 3: Бонусні додаткові послуги
13. Скоротіть пошук DNS
Досі немає тієї частини процесу, про яку ми не говорили. Це відбувається з самого початку.
Перш ніж браузер почне розмову з сервером, він повинен знайти місце розташування сервера (пошук його IP-адреси). Це як шукати номер сервера в телефонній книзі. Це займає трохи часу. (Зазвичай 20-120 мілісекунд).
Це займає ще більше часу, якщо з вашим веб-сайтом пов’язано кілька імен доменів. Поширені приклади: blog.yourwebsite.com або додаткові домени для зображень, таблиць стилів та об’єктів Flash.
Якщо ваш браузер повинен зробити це п’ять разів, ви можете втратити півсекунди. Тримайте його в якомога меншій кількості областей.
14. Кешування браузера
Уявіть, як швидко все могло б статися, якби ваш браузер міг зберігати копію всіх файлів на сайті. Таким чином, вам не доведеться кожного разу зв’язуватися з сервером. Це могло завантажувати їх лише з пам'яті.
Ось що таке кеш. Це означає, що ваш браузер "запам'ятовує" веб-сайт. Коли ви завантажуєте його вдруге, це дуже швидко.
Фу! Це було довше повідомлення, ніж зазвичай, але я думаю, що воно того варте.
Тепер ви знаєте все, що вам потрібно знати про те, щоб ваш веб-сайт швидко спалахнув. Ці трюки можуть заощадити секунди швидкості завантаження.
Це означає радісних відвідувачів. А це означає збільшення продажів.