Один з найбільш важливих аспектів вашого сайту - це швидкість його завантаження; користувачі хочуть миттєво отримувати картинку без всяких гальм, і якщо ви не в змозі дати їм це, то вони довго не роздумуючи, пошукають інформацію в іншому місці. У цій статті ми обговоримо 5 способів, які дозволять вам прискорити час завантаження вашого сайту.
1. Використовуйте YSlow для відстеження часу завантаження сторінок
Знаючи кількість часу, який витрачається на завантаження сторінок, ви зможете визначити проблемні місця. Також це додасть вам ще один стимул, для того щоб залізти в функціонал і постаратися виправити ситуацію.
Перед тим як ми почнемо, вам необхідно встановити YSlow, якщо ви вже звичайно цього не зробили. YSlow - це розширення до Mozilla Firefox, яке ви зможете знайти на цій сторінці:
Тепер давайте відкриємо якийсь сайт. Припустимо Six Revisions, для того щоб дані у нас були приблизно одні й ті ж (просто відкрийте даний сайт в новій вкладці вашого браузера).
У нижній правій стороні вашого браузера, у вас перебуває спеціальна панель з іконкою (дивіться малюнок 1). Трохи віддалік даної панелі, після завантаження сторінки, поруч з 'YSlow' ви побачите число. Дане число - це час завантаження даної сторінки в секундах в вашому браузері. Нам необхідно, щоб дане число було якомога менше.
Найбільш часто зустрічаються «тормозіламі» є наступні об'єкти або операції:
Через кілька хвилин ми докладніше на цьому зупинимося.
Використовуємо YSlow на повну
Крім того що YSlow обчислює час завантаження сторінки, дане розширення також надає вам розширену інформацію про те, що вам необхідно виправити для оптимізації завантаження вашого сайту, таким чином, ви зможете підлатати діри.
Для отримання подібної інформації натисніть на вкладку Performance. Після сканування сайту, YSlow видасть вам загальну оцінку, яка буде характеризувати продуктивність вашої сторінки.
Доступ до інформації можна прискорити за допомогою CDN (мережа доставки контенту). CDN краще використовувати для великих сайтів. Використовуються вони для того щоб розподіляти інформацію через кілька серверів в різних частинах світу. Таким чином, інформація буде завантажуватися з відповідного сервера (який найближче до користувача), щоб не проходити через особисті маршрутизатори. YSlow також відстежує запити CDN.
Але люди, як правило, не використовують CDN (що є досить-таки дорогим задоволенням).
Класифікація типів помилок
Робіть якомога менше HTTP запитів: HTTP запит відбувається, коли браузер посилає запит на сервер. Те ж саме може відбуватися при підключенні скриптів, файлів CSS, зображень, а також при асинхронних запитах, як з боку клієнта, так і з боку сервера (Ajax і інші подібні технології). Однак коли мова заходить про продуктивність системи, то варто задуматися про те, скільки подібних запитів відбувається у вас на сторінці. В якості вирішення можна застосувати кешування, щоб допомогти клієнтським машинам швидше довантажувати скрипти, CSS і зображення.
Додавання заголовків Expires: 80% завантаження сторінки орієнтоване на скачування скриптів, фотографії та файлів CSS. У більшості випадків дані речі не змінюються на призначених для користувача машинах. Додавши трохи коду в ваш файл .htaccess, ви можете кешувати дублюючийся файли на локальній машині користувача (про те, як це зробити ми поговоримо пізніше).
Компоненти Gzip: Застосування Gzip або стиснення JS файлів, зображень, HTML документів, CSS файлів, і т.д. дозволяє користувачам завантажувати інформацію в зменшеному розмірі, що значно збільшує швидкість завантаження сторінок. До того ж це дозволить зберегти місце на сервері, проте розпакування даних може привести до гальмування відповіді, і безпосередньо залежить від браузера користувача.
Розташовуйте CSS у верхній частині сторінки: якщо ви маєте в своєму розпорядженні підключення до CSS файлів у верхній частині сторінки, то це означає, що вони будуть завантажуватися в першу чергу, а зображення і скрипти пізніше.
Розміщуйте JS в нижній частині сторінки: тепер, коли ваші CSS файли будуть завантажуватися вгорі, саме час розташувати скрипти JS прямо перед закриттям тега. Це дозволить вашій сторінці відобразитися, а потім підключити необхідні скрипти.
Уникайте CSS виразів: я особисто ніколи не використовував CSS вирази (ще їх називають динамічними властивостями). Дані вирази є власною концепцією програмування для IE (такі як умовні вирази) в CSS. Технологія, яка використовується в IE8, та й у всіх інших версіях більше підтримуватися не буде, так що в будь-якому випадку доведеться зав'язувати з даними написанням CSS виразів. PHP більше підходить для подібних цілей, наприклад, для того, щоб завантажити різні CSS стилі в залежності від якогось умови, такого як випадкове число, час доби або браузер користувача.
Пишіть JS і CSS в окремих файлах: якщо ви маєте в своєму розпорядженні ваші скрипти в JS і стилі CSS в окремих файлах, то браузер з легкістю зможе їх закешовану, тим самим в подальшому дозволить вашій сторінці грузиться швидше.
Уникайте перенаправлення: не має ніякого значення, де ви робите перенаправлення, в JS, HTML або PHP. У будь-якому випадку ваш браузер отримає заголовок з порожньою сторінкою, на завантаження якої потрібен час. Так що просто намагайтеся не застосовувати редирект там, де його можна уникнути.
Що ж ... думаю цього достатньо. Тепер давайте перейдемо до наступної вкладки YSlow, перед тим як розглянемо деякі інші техніки, які дозволять збільшити швидкість завантаження ваших сторінок.
Вкладка Components дозволить вам визначити, які потрібно докласти зусиль для поліпшення швидкості завантаження. Тут ви знайдете інформацію про те, скільки важить кожен файл, а також скільки часу йому потрібно на завантаження. Також ви зможете побачити, для яких файлів застосовується gzip, дізнаєтеся час відповіді, а також чи є файли закешовану на користувальницької машині, і коли закінчується сам кеш. Ця інформація може вам стати в нагоді при оцінці проблем вашого сайту, ви будете знати, що у вас не так, і що потрібно оптимізувати.
І нарешті, перейдемо до останньої вкладці Stats tab. Тут ви знайдете інформацію про всі HTTP запитах, як для звичайних файлів, так і для закешовану. Значення Empty cache показує, що дані файли потрібно завантажити для відображення сторінки. У свою чергу Primed Cache - це файли, які вже були закешовану браузером користувача. Це означає, що їх скачувати не потрібно.
2. Використовуйте CSS спрайт для скорочення HTTP запитів
CSS спрайт - це напевно найзначніша річ, яку придумало людство, після того як Тесла винайшов електрику ... Я дійсно це сказав. ой, я мав на увазі Едісона.
Ну, може бути не зовсім найкрутіша, але тим не менше.
CSS спрайт можуть допомогти значно збільшити швидкість завантаження сторінки, скоротивши кількість HTTP запитів, які формуються для завантаження зображень.
Ви можете знайти безліч уроків, в яких йдеться про те, що CSS спрайт зручні для навігації - в загальному, для використання їх в призначеному для користувача інтерфейсі.
Тепер давайте швиденько подивимося, як на YouTube використовують CSS спрайт. Так виглядає спрайт, яким вони користуються:
YouTube використовує цей файл досить оригінально. Завантажують вони його як фон класу sprite. Коли виникає необхідність у виборі якогось елементу, відбувається вибір початкової позиції за допомогою CSS властивості background-position, а потім застосування висоти і ширини.
Давайте і ми спробуємо щось подібне. Поекспериментуємо на цьому ж самому зображенні з сайту YouTube.
У прикладі, який розташований нижче, ми виводимо логотип YouTube на екран. Використовуючи той же клас sprite, і те ж саме зображення image, ми можемо створити зображення, яке буде змінюватися при наведенні мишки.
Таким чином, використовуючи дане зображення, ми можемо звести всі підключення до одного HTTP запиту. Ну, як ефект?
Ще одна перевага CSS спрайтів полягає в тому, що при застосуванні псевдо класу: hover, зображення не буде пропадати на кілька миттєвостей (які йдуть на завантаження нового зображення), як це відбувається без використання CSS спрайтів.
Варто також відзначити:
4. Використовуйте піддомени для паралельного скачування
Паралельне завантаження означає збільшення паралельних завантажень одних і тих же файлів. Пройшовшись по безлічі сайтів, ви можете помітити, що на багатьох з них запити надсилаються на static.domain.com і c1.domain.com. Це можна побачити в нижній панелі браузера.
Це відмінний спосіб збільшити продуктивність сайту. При використанні піддоменів, по суті, інформація буде перебувати на одному і тому ж сервері, однак для браузера вони будуть різними.
- Створіть 3 поддомена на вашому сервері
- Розмістіть ваші зображення в папках на різних піддоменів
- Замініть шляху в ваших файлах
5. Додавання заголовків Expires
Деякі сайти залишаються навантаженими навіть після застосування всіх методів, описаних вище. Але є ще пару методів.
Користувач може зайти на ваш сайт і зробити всі необхідні HTTP запити для відображення сторінки, зображень, скриптів і т.д.
Коли ви використовуєте заголовки Expires, ви можете закешовану всі ці елементи на користувальницької машині, тим самим не тільки збільшивши швидкість завантаження сторінки, а ще й скоротивши трафік. Заголовки Expires можуть бути застосовані до всіх ваших скриптів, CSS і зображень.
Даного ефекту можна домогтися за допомогою кількох рядків, які вам потрібно додати в файл .htaccess, який знаходиться в кореневому каталозі вашого сайту.
Будьте пильні: якщо ви справите будь-яка зміна в цих файлах (в разі, якщо термін ще не пройшов), то вам необхідно перейменувати їх (або додати в назву версію), інакше в кеші вони не оновляться.
Сьогодні ми пройшлися по багатьом способам. Сподіваюся, ви відзначили для себе кілька методів, які будете активно застосовувати в ваших проектах! Успіхів!
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!