Час завантаження Вашого сайту є основним фактором, що впливає на юзабіліті і поведінку відвідувача. Інтернет користувачі ненавидять чекати завантаження повільних сторінок, в той час як «миттєві» сторінки викликають більше задоволення і доставляють більше задоволення відвідувачеві. Сьогодні швидкість інтернет з'єднань стає все вище, і багато Web-розробники не замислюються над оптимізацією своїх сторінок для підвищення їх швидкості, але ж це дуже важливий фактор. У цій статті Ви отримаєте фундаментальні поради щодо підвищення швидкості web-сторінок і поліпшення юзабіліті ваших web-додатків.
1. Зменшуйте кількість файлів
Зменшення кількості файлів на сторінці, призводить до зменшення необхідних HTTP з'єднань для їх завантаження, тим самим прискорюючи цей процес. Але як же це зробити? Можна використовувати такі техніки:
Використовуйте CSS спрайт
Замість того, щоб використовувати роздільні зображення для фону різних елементів, можна об'єднати їх в одне і використовувати техніку CSS спрайтів для цього файлу. Це помітно зменшить кількість завантажених файлів і прискорить завантаження сторінки.
Об'єднуйте CSS / JS файли в один
Якщо ви використовуєте безліч CSS / JS файлів на своїй сторінці, то їх об'єднання можна значно зменшити кількість запитів.
2. Зменшуйте розмір файлів
Великі файли абсолютно очевидно вимагають багато часу для завантаження, тому за допомогою певних технік Ви можете зменшити розмір файлів.
Зменшуйте HTML файл
Використовуйте HTML-мініфікатор, наприклад HTML Tidy. він прибере зайві прогалини і переноси рядків.
Зменшуйте CSS / JS файли
Оптимізуйте зображення для Web
3. Оптимізації серверної сторони
Кешуйте динамічні сторінки
При використанні кешування динамічних сторінки сервер віддає браузеру статичні файли, що займає набагато менше часу, ніж генерація сторінки. Веб-сервери, такі як Apache оптимізовані для дуже ефективного обслуговування статичного контенту. Якщо Ви користуєтеся WordPress, то для кешування сторінок Вам підійде плагін WP-Super Cache.
Увімкніть GZip
Більшість сучасних браузерів вміють працювати з GZip, використання якого на стороні сервера дозволяє зменшити розмір HTML, CSS / JS файлів до відправки їх браузеру, за рахунок чого скорочується обсяг трафіку, що передається.
Використовуйте заголовки Expires для статичного контенту
Для контенту який змінюється не часто, наприклад, зображення, CSS, JS файли, додавання заголовка Expires дозволить використовувати кешування браузера. Установка Expires на дату в майбутньому дозволяє змусити браузер не запитувати ресурси повторно, а брати їх з кешу.
За допомогою наступного коду можна встановити заголовки Expires в Apache використовуючи файл .htaccess:
Використання заголовків Expires для статичного контенту істотно поліпшить досвід користувачів повернулися на Ваш сайт, тому що весь статичний контент буде обслужений локальним кешем браузера.
Використовуйте косу риску в URLах
Позбавтеся від помилок 404
404 помилка (Сторінку не знайдено) призводить до накладних витрат як на стороні сервера, так і в браузері. Перевірте серверні логи або знайдіть биті посилання і виправте їх.
Завжди використовуйте favicon.ico
Більшість браузерів намагаються знайти favicon.ico для домену, щоб додати маленьку іконку сайту, незалежно від того чи вказана вона в html. Якщо ви не хочете використовувати favicon.ico, то просто розмістіть прозору іконку в корінь свого сайту, і браузер не отримуватиме 404 помилку при спробі її відкрити.
4. Оптимізація HTML
Інший хороший спосіб поліпшити швидкість Вашого сайту, це оптимізація html Вашої сторінки таким чином, щоб вона виводилася на екран так швидко, на скільки це можливо, покращуючи сприйняття відвідувачем Вашого сайту. Далі ми розглянемо декілька порад по HTML оптимізації прискорюють рендер.
Завантажуйте таблиці стилів в верху сторінки
Завжди розміщуйте таблиці стилів у верхній частині Вашої сторінки, в тезі
. це зробить завантаження сторінки поступовою. У міру отримання браузером HTML контенту, він буде виводити його применя до нього CSS стилі.Уникайте використання @import
Якщо ви використовуєте @import для зовнішніх таблиць стилів, то припиніть це робити, тому що @import може призводити до послідовному завантаженні таблиць стилів, замість паралельної, а при великій кількості підключень таблиць порядок їх завантаження також може змінитися. завжди використовуйте для підключення таблиць стилів.
Дізнатися більше про роботу @import ви можете зі статті Не використовуйте @import
Уникайте CSS виразів
CSS вирази іноді можуть бути корисними, але вони вкрай неефективне виконуються в браузерах. Браузери обчислюють CSS вирази при завантаженні сторінки, при її прокручуванні і взагалі при кожному русі миші. Одне CSS вираз на сторінці буде обчислюватися тисячі разів в браузері. Ви можете перевірити це, використовуючи лічильник, всередині виразу.
Вказуйте висоту і ширину зображень
Завжди вказуйте висоту і ширину для тега img. так браузер зможе дізнатися про розміри зображення ще до їх завантаження з сервера. В іншому випадку, браузер дізнається про розмір зображення тільки після повної його завантаження.
Уникайте масштабування зображень в браузері
Якщо ви використовуєте властивості ширини і висоти тега img для відображення великої зображення як невеликого, Ви змушуєте браузер робити додаткову роботу для виведення сторінки. Краще використовувати мініатюру зображення з посиланням.
Очевидно, що обидва останніх ради неспроможні в разі використання адаптивності.
Виділяйте JS / CSS код в зовнішні файли.
Намагайтеся виділяти весь JS / CSS код в зовнішні файли, замість того, щоб розміщувати його прямо в HTML. Браузери вміють кешувати JS / CSS файли, що буде корисно при поверненні відвідувача.
5. Інші оптимізації
Крім технік про які було сказано вище, існують і інші способи прискорити завантаження сторінки.
Скорочуйте DNS запити
Використовуйте кілька доменів для статичного контенту
Як відомо у браузерів існує обмеження на кількість одночасно прийнятих файлів з одного домену, тому використання піддоменів допоможе распараллелить завантаження Вашої сторінки. Наприклад якщо Ваш сайт називається мойсайт.рф. то статичний контент може віддаватися наприклад з доменів стат1.мойсайт.рф і стат2.мойсайт.рф. Це не призведе до збільшення числа DNS запитів, оскільки запит для мойсайт.рф вже виконано.
Використовуйте домени без cookies для статичного контенту
Якщо Ваш сайт використовує кукі, як це робить більшість сайтів сьогодні, то Ви повинні знати, для кожного запиту до сервера, разом із запитом відправляються і куки. Це просто накладні витрати для статичного контенту на зразок JS / CSS / зображень. Роздавайте статичний контент з доменів без куки, щоб уникнути цього. Багато великих сайти користуються цією технікою, наприклад Yahoo використовує yimg.com для обслуговування статичного контенту. YouTube використовує ytimg.com для статики.
Використовуйте мережі доставки контенту
Використання CDN істотно покращує досвід відвідувача Вашої сторінки, оскільки контент завантажується з найближчого до нього сервера. Це зменшує мережеві затримки, якщо сервер розташований далеко, а також розподіляє навантаження між декількома серверами. CDN має високу ефективність, і такою ж високою ціною, що робить їх доступними тільки для дуже великих сайтів.
Використовуйте оптимізаційні інструменти
Схожі записи
а в кінці статті посилання якраз і є :)
звідки такі цифри? мої тести показують 5-6 секунд на твою сайту.
дивно, не помітив прошу вибачення)
на pingdom тільки що перевірив - видав 2.47 s знову ж це загальний час наскільки я розумію, починаючи від відгуку сервера і закінчуючи завантаженням сторінки. у мене відгук сервера часу більше займає ніж завантаження)
на гуглі 68 (out of 100) ранг видав ..
після включення gzipа сервіс pingdom видав 2.18 s в принципі завантаження трохи прискорилася)