Зміст
- Мінімізація запитів HTTP
- Поєднання файлів CSS та JavaScript
- Використовуйте CSS3 замість зображень
- Спрайти зображень CSS3
- Медіа-запити
- Пісний зміст
- Використання мереж доставки вмісту
- Стиснення HTTP
Дві секунди. Згідно з дослідженням, проведеним Google і Bing у 2009 році, саме стільки часу потрібно, щоб час завантаження сторінки міг мати «серйозний негативний вплив» на повторне використання, потенційний дохід, залучення користувачів та задоволеність клієнтів. Зараз цим висновкам виповнилося два роки. Сьогодні ми опиняємось у обслуговуванні користувачів, які звикли до ще більшої швидкості з’єднання, доставки даних у режимі реального часу та миттєвого пошуку.
Як важливо для вирішення будь-якої проблеми, спочатку ми повинні визначити першопричину подій. На щастя, є багато доступних інструментів, які допоможуть вам ретельно проаналізувати швидкість вашого сайту, зокрема, доповнення Firefox Yahoo ‘ySlow’ та розширення Google Chrome та Firefox ‘Швидкість сторінки’. Обидва вони безкоштовні, прості в установці та забезпечать аналогічний рівень деталізації при їх аналізі.
Мінімізація запитів HTTP
Мінімізація HTTP-запитів - найефективніший спосіб пришвидшити роботу вашого сайту. Запит HTTP виникає, коли браузеру потрібно "отримати" файл із сервера. Це може бути що завгодно - від файлу CSS або JavaScript до зображення. Більшість браузерів можуть робити лише два запити одночасно, тому браузер запитує два файли, завантажує їх і переходить до наступних двох. Чим більше запитів HTTP або окремих компонентів потрібно для належного відображення сторінки, тим довше користувачеві доведеться чекати.
Поєднання файлів CSS та JavaScript
Одним з найпоширеніших способів зменшення HTTP-запитів є поєднання будь-яких зовнішніх файлів CSS та файлів JavaScript в один або, звичайно, якомога менше. Незважаючи на те, що цього легко досягти вручну, існує декілька легко доступних інструментів з деякою додатковою функціональністю.
Ресурси:
Зменшити
Використовуйте CSS3 замість зображень
Покращена підтримка браузером деяких експериментальних функцій CSS3 позбавила потреби використовувати якомога більше ресурсів зображень на вашій сторінці для тих, хто досить сміливий їх реалізувати. Впровадження таких функцій, як box-shadow, лінійний градієнт та радіус кордону, не лише економить на запитах HTTP, але також економить час на підготовку ресурсів та їх редагування в майбутньому.
Ресурси:
CSS3Pie
CSS3 проти CSS: Тест швидкості
Модернізр
CSS3, будь ласка
Спрайти зображень CSS3
«Спринтування» зображення CSS - це практика об’єднання кількох графічних зображень в одне зображення, а потім їх відображення за допомогою властивості background-position. Це популярна техніка, яка використовується в графічних областях навігації і використовується Apple у своїй основній навігації, як показано нижче. Однак його можна використовувати для відображення необмеженої кількості графіки для будь-яких цілей.
Ось як вони позиціонують різні різні стани:
#globalheader #globalnav li a {background-position: 100% 0; контур: немає; } #globalheader #globalnav li a.before {background-position: 100% -36px; } #globalheader #globalnav li a: hover, # globalheader #globalnav li a: focus {background-position: 100% -72px; } #globalheader #globalnav li a: активний {background-position: 100% -108px; } #globalheader #globalnav li # gn-apple a {background-position: 0 0; } #globalheader #globalnav li # gn-apple a.before {background-position: 0 -36px; } #globalheader #globalnav li # gn-apple a: hover, # globalheader #globalnav li # gn-apple a: focus {background-position: 0 -72px; } #globalheader #globalnav li # gn-apple a: активний {background-position: 0 -108px; }
Ресурси:
W3Schools CSS Image Sprites
Spritr
Підручники із спрайтів зображень CSS
Медіа-запити
З моменту появи CSS2.1 ми змогли націлити певні пристрої за допомогою «типів носіїв», що дозволило нам надавати спеціальні таблиці стилів для друку та мобільних пристроїв. CSS3 тепер дозволяє нам, використовуючи медіа-запити, перевіряти розміри екрану і, отже, націлювати необмежену кількість пристроїв через одну основну таблицю стилів, тим самим зберігаючи необхідні зайві запити HTTP.
Ресурси:
JSMIN
Компресор YUI
Пакер
Пісний зміст
Одним з найбільш несподіваних і в той же час основних методів оптимізації роботи сайту є надання більш релевантного вмісту користувачам. За останні кілька років ми спостерігаємо величезний ріст кількості створеного користувачами вмісту та даних, що доставляються в режимі реального часу. Технічна відповідальність за видобування та доставку більш якісного вмісту ніколи не була сильнішою. Ретельне курірування, очищення та перевірка вмісту не тільки приносить користь користувачеві, надаючи йому більш значущу послугу, це також означає, що низька якість та менш бажаний вміст не загрожує часу завантаження сторінки.
Ресурси:
Дані в режимі реального часу та більш персоналізована мережа
Використання мереж доставки вмісту
На швидкість завантаження вашої сторінки також безпосередньо впливає близькість вашого користувача до сервера, з якого обслуговуються ваші активи. Мережа доставки вмісту доставляє ваші статичні файли через мережу серверів вашим відвідувачам через місце розташування сервера, найближче до користувача, таким чином оптимізуючи час відгуку. Хоча це може здатися відносно складним у впровадженні, існує багато платних послуг, які дешеві та прості у налаштуванні.
Ресурси:
МАКС. CDN
Стійка CDN
Стиснення HTTP
На додаток до стиснення компонента вашого веб-сайту за допомогою різних вищезазначених методів ви також можете скоротити час, необхідний для обробки кожного файлу, стискаючи їх на стороні сервера за допомогою Apache та PHP. Найпопулярнішою та ефективною формою стиснення є Gzip.
Ви можете перевірити, чи використовує ваш сайт стиснення Gzip за адресою:
www.whatsmyip.org/http_compression.
Хоча вам слід намагатися стиснути якомога більше компонентів, вам слід уникати стиснення зображень та PDF-файлів, які вже стиснуті, оскільки це не призведе до зменшення розміру файлу, а в деяких випадках може призвести навіть до збільшення розміру файлу.
Ресурси:
Увімкнення стиснення Gzip
Краще пояснена стаття про Gzip
