Мати швидкий веб-сайту, є дуже важливим аспектом, якщо ви хочете залишитися в живих в сучасну епоху веб-дизайну. Чесно кажучи, для повільних веб-сайтів, просто не залишилося більше місця.
Що таке час завантаження веб-сайту?
Час завантаження веб-сайту безпосередньо залежить від запиту зробленого на сервер, щоб завантажити веб-сайт. Чим більше HTTP запитів зроблено на сервер, і чим довше елементи роблять дію, тим повільніше буде працювати веб-сайт.
Приклади запитів HTTP:
- завантаження аркушів стилів CSS;
- завантаження скриптів;
- завантаження зображень;
- завантаження HTML.
Іншим фактором, який грає роль під час завантаження веб-сайту, є розмір окремих файлів і зображень. Великі зображення з високою роздільною здатністю можуть зайняти в 10 разів більше часу для завантаження, ніж звичайні зображення і надмірно великі файли можуть істотно уповільнити відтворення сторінки.
Метою створення швидкого сайту полягає в тому, щоб зробити його більш ефективним. Ми можемо це зробити шляхом внесення ряду змін в код, зображення і оформлення нашого сайту.
Відстеження швидкості сторінок
Ми можемо відстежувати оцінки швидкості наших сторінок через Page Speed від Google Insights або YSlow від Yahoo. У Google також є плагін Page Speed, який прекрасно працює з Firefox, якщо у вас встановлений Firebug.
Давайте візьмемо веб-сайт, який знаходиться в стадії розробки і використовуємо його як приклад для цього уроку. Первісна оцінка швидкості його сторінок в Google склала 48 з 100 балів. Він працює на платформі OS Commerce.
Крок 1: стиснення зображень
Кроком номер один є стиснення всіх зображень для веб-відображення. Ми можемо зробити це за допомогою компресора зображень, за замовчуванням вбудованого в плагін Google's Page Speed. Збережіть стислу версію зображень в вашу локальну папку на комп'ютері і повторно завантажте зображення на місце незжатих зображень.
Оновлений бал: 61 з 100
Крок 2: масштабування зображень
Після стиснення зображень, ми повинні змінити наші зображення так, щоб вони правильно масштабувати для веб-сайту. Така дія дозволяє уникнути затримки, яка необхідна сервера, для зміни розміру зображень. Ви можете масштабувати зображення в Photoshop, адаптуючи їх під такий же розмір пікселя, який буде в вашому HTML коді.
Оновлений бал: 72 з 100
Крок 3: використання браузерні кешування
Кешування браузера зберігає кешовані версії статичних ресурсів. Це дуже збільшує швидкість сторінки і скорочує відставання сервера. Щоб включити кешування, вам потрібно буде додати наступний код в ваш файл .htaccess:
Оновлений бал: 78 з 100
Крок 4: об'єднання зображень в CSS спрайт
Зображення можуть бути об'єднані в спрайт CSS для того, щоб скоротити кількість зображень, завантажених на даній сторінці. CSS спрайт це одне велике зображення, яке складається з ряду невеликих зображень. Поєднання 5 зображень в одному CSS спрайт, є швидким способом прискорити веб-сайт, дозволяючи браузеру завантажити одне зображення замість 5.
Найпростіший спосіб створити CSS спрайт, це використовувати програму SpriteMe
Переконайтеся, що ви зробили належні зміни в CSS після створення спрайту зображень. Крім того, зверніть увагу на інструкцію з встановлення на сайті. Ця програма використовується при доступі до закладок через ваш браузер.
Оновлений бал: 82 з 100
Оновлений бал: 86 з 100
Оновлений бал: 90 з 100
Ви також можете розглянути завантаження статичних ресурсів з вашого сайту на CDN або "Content Delivery Network". CDN це ще один спосіб різко скоротити відставання від сервера, зберігаючи статичні ресурси на мережах серверів швидких завантажень. Відомими користувачами CDN є ESPN і NBA.com.
Мобільна розробка веб-сайтів
Звичайно, це не всі можливі варіанти, але сподіваємося, ці поради допоможуть вам оптимізувати швидкість завантаження вашого сайту!
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
