Новини, Розробникам, Технології

Як легко і швидко оптимізувати сайт?

12 Листопада, 2020

Не забудьте поширити ❤️

Оптимізація сайту – важливий момент в його просуванні. Без хорошої оптимізації не можна просунути його в ТОП пошукової видачі. Пропонуємо вам 7 дуже простих способів вирішення цього завдання.

1) Оптимізація зображення

Порада досить очевидна, але, навіть попри це, багато хто дійсно не вміє оптимізувати зображення на своїх вебсторінках. Крім цього, лише одиниці розуміють, що є різниця між графічним файлом, зменшеним до середнього розміру, і тим, який повністю оптимізований.

Оптимізація не тільки робить зображення меншим за розміром, але і видаляє деякі несуттєві метадані (наприклад, дату створення, інформацію про камеру і ін.). З цією метою ви можете використовувати багато різних інструментів, таких як JPEGmini, або Yahoo! Smush.it, або ImageOptim.

2) Активація стиснення GZIP

Варто лише активувати стиснення Gzip, і ви зможете прискорити завантаження до 50%. Після стиснення на локальному ПК файли стають меншими – Gzip працює так само: він робить стиснення до того, як відправити файли в браузер. Таким чином, вебсторінка почне показуватися швидше, ніж до використання стиснення Gzip.

Цю функцію вже активували абсолютна більшість сайтів через використання “важких” файлів. Тим більше що в цьому немає нічого складного. Перш за все, знайдіть.htaccess свого сайту, а потім, якщо робота серверу відбувається на Apache, просто скопіюйте і вставте його в необхідний файл. Такий маленький фрагмент коду зробить ваш сайт набагато продуктивнішим – перевірте самі!

3) Мінімізація файлів

За допомогою інструментів на кшталт Codekit або Prepos, а також CLI, наприклад, Grunt, це робиться елементарним чином. Головне, пам’ятайте про цю процедуру, коли завершуєте проєкт.

4) Об’єднання CSS з JavaScript

Зайві HTTP-запити сильно гальмують сайт. Тому,  якщо ви використовуєте будь-які зовнішні елементи (плагіни, фреймворки), то у вас є відразу кілька файлів JS і CSS. Значить, браузер змушений постійно запитувати цілий набір файлів. Виправити таке марнотратство можна об’єднавши всі CSS-файли в один, і всі JS-файли в інший. Без особливих зусиль це робиться за допомогою Gulp, Grunt та іншими подібними інструментам.

5) Використання спрайтів

Багато зображень для однієї вебсторінки – це багато HTTP-запитів. Можна просто зробити лист спрайтів, який завантажується тільки раз, а потім всього лише редагувати положення CSS-фону для кожного окремого елемента для показу правильного зображення.

Скористайтеся CSS Sprite Generator або Stitches для створення таких спрайтів.

6) Використання CDN – мережі доставляння змісту (контенту)

Статичні файли сайти розміщують тільки на CDN, адже це прискорює їх завантаження. Навіть якщо ваш вебсайт відносно невеликий, вам все одно варто налаштувати завантаження зовнішніх JS і CSS з CDN по максимуму. Зверніть увагу на таких помічників, як Bootstrap і jQuery.

7) Використання кешування

Навіщо знову завантажувати вже завантажений файл? Процес настройки кешування сильно нагадує стиснення Gzip: робиться все в одному і тому ж файлі.htaccess. За допомогою mod_headers можна вибрати тип файлів, а також тривалість їх використання.

Підпишіться на e-mail розсилку Українського Спектру

Про “Український Спектр”

«Український Спектр» – це онлайн медіа-організація, яка націлена на те, щоб допомогти своїм читачам, глядачам та відвідувачам успішно розвиватися в бізнесі та повсякденному житті, завдяки неперевершеному доступу та найкращому у своєму класі поданню новин та історій.

«Український Спектр» в Telegram – коротко про головне один раз на день
Підписатись на канал

Ми у соціальних мережах:

Ми у соцмережах:

Слідкуйте за UAspectr у Facebook або ж читайте усе найцікавіше у нашому каналі в Telegram
Menu