Як прискорити завантаження сайту »блог perfecto web

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

Порядку 57% населення, у якого немає такого ж стабільного і хорошого інтернету, як у вас, як наслідок більш яскраво бачать проблему довгої завантаження сайту! Відомо, що слабкий інтернет в основному зустрічається і у мобільних операторів в регіонах. На жаль, мобільний зв'язок не скрізь і не завжди стабільна і високошвидкісна, що в кінцевому підсумку відбивається на ваш продукт. Заощаджуйте секунду для вашого клієнта, піклуйтеся про нього і він буде з вами надовго.

Важливо знати
Навіть тоді, коли ваш сайт завантажується всього на 1-2 секунди довше, ви можете втратити потенційного клієнта. Різниця завантаження сайту в 1 секунду або 3 секунди, це не математичні 2 секунди. Насправді це досить великий проміжок часу, який не виправдовує очікування вашого відвідувача.

1. Налаштуйте кешування на стороні сервера

Якщо у вас сервер на Nginx і ви не фахівець у цій галузі, нижче наведемо приклад налаштування кешування.

Ми ознайомимо вас з основними принципами, а не детальної налаштуванням сервера, так як в інтернеті можна знайти багато статей з налаштування кешування статики на Nginx.

2. Використовуйте кеш браузера

Впишіть наступні інструкції в ваш .htaccess файл після рядка RewriteEngine On. Даний пункт, швидше за все, є доповненням до першого. Біля кожного формату вказується час кешування шляхом "access plus 7 days". де ви можете змінювати час для будь-якого формату. У наведеному нижче прикладі встановлені оптимальні значення.

Якщо вам потрібно розгорнутий опис використання кеша браузера, можете її отримати від Google

3. Увімкніть стиснення

Спочатку уточніть яка система у вас на веб-сервері. Далі перейдіть по одній з посилань для отримання інформації зі стиснення:

Нижче наведено кілька прикладів від Google, що вважається прийнятним а що ні:

Створюйте копії оригінальних файлів * .css і * .js у вигляді * .min.css, * .min.js, в яких вони будуть мініфіціровани. Зекономлені пару байтів всюди, де це можливо, в результаті зростаються в зекономлені кілобайти, а то і мегабайти.

6. Оптимізувати зображення

Оптимізуйте всі зображення на сайті шляхом стиснення їх розміру. На сьогоднішній день є досить поширеними методами зі стиснення зображень без втрати якості. Наступні інструменти виконують додаткове стиснення файлів JPEG і PNG без втрат і зниження якості. Для файлів JPEG рекомендується використовувати jpegtran або jpegoptim (доступно тільки для Linux, виконувати з параметром --strip-all). Для PNG краще використовувати OptiPNG або PNGOUT.

Є також онлайн сервіси, які розроблені на основі вищевказаних технологій. Як приклад, можете використовувати Kraken.io для стиснення зображень онлайн.
Є ще TinyPNG для компресії JPG і PNG форматів. А також він має плагін для Adobe Photoshop, який спростить роботу в рази.
Якщо користуєтеся macOS, тобто додаток під назвою Paparazzi! .
Не обмежуйтеся даними списком. Ви вільно можете знайти інші альтернативи даними додатків, які теж будуть базуватися на вищевказаних технологіях.

7. Вибирайте правильний формат зображень

Кожен формат зображення розроблявся для вирішення конкретних завдань. В одних місцях краще використовувати jpg, в інших png, а по-третє gif. Дуже часто корисно використовувати формат svg через легкої ваги і масштабованості (векторна), але підходити до цього питання потрібно з розумінням.

JPG - використовуйте тільки для фотографій
GIF - використовуйте там, де зображення маленьке і має менше 3 кольорів в палітрі. А також можна в нескладних анімаціях.
SVG - використовуйте для векторних зображень, іконок та інших нескладних графічних об'єктів. Не варто використовувати svg зі складними ілюстраціями
PNG - використовуйте для будь-яких інших цілей

8. Використовуйте фотографії потрібного розміру

Якщо в конкретній області у вас поміщається фотографія в 800х600px, використовуйте саме її. Винятком можуть стати фотографії розміром @ 2х, для ретина дисплеїв. Але такі фотографії слід використовувати тільки тоді, коли клієнт зайшов до вас з пристрою з ретина дисплеєм. Для цього є відповідні Media Query

9. Використовуйте шрифтові іконки

Шрифтові іконки краще тим, що клієнт завантажує один файл і економить час на транспорт сервер ← → клієнт. Ви можете подумати: а чим погані старі добрі спрайт? У шрифтових іконках є і другий плюс. Він полягає в тому, що іконки векторні і незалежно від щільності екрану вони будуть згладженими і чіткими.

10. Використовуйте CSS3 по максимуму

Уже давно пройшов століття Internet Explorer 6-7, неповна підтримка CSS тіней, градієнтів і іншого. Сьогодні ви сміливо можете використовувати CSS3 по максимуму. Остерігайтеся використання зображень для створення тіней, градієнтів і тому подібним. Сміливо використовуйте CSS3, однак ознайомлюється з сумісністю стилів, які вам здаються занадто підозрілими.

11. Завантажуйте контент частинами

Першим екраном прийнято вважати частину контенту, який поміщається на моніторі. А також, першим екраном умовно вважається перші 640px сайту. У зв'язку з цим, при побудові сайту необхідно враховувати це і завантажувати контент поступово. Спочатку потрібно завантажувати перший екран, максимально швидко і незалежно від усієї подальшої. Це дасть відчуття максимально швидкого завантаження сайту. А тим часом, поки клієнт акцентує свою увагу на перший екран, у вашого скрипта буде приблизно 2-3 секунди, щоб "нишком" завантажити все інше.

Для вирішення даного завдання, вам слід: використовувати асинхронну завантаження скриптів, виводити частину стилів, що відповідають тільки за перший екран, виводити нижній контент після завантаження першого екрану (при можливості). Все інше необхідно довантажувати після повної промальовування першого екрану.

12. кешируєтся запити до бази даних

Постарайтеся забезпечити мінімальну кількість запитів до бази даних на кожній сторінці. Кешируєтся все, що можливо. Статті, новини, блоги - всі ці матеріали спокійно можна кешувати до моменту їх зміни. Якщо ваш проект не динамічний більшою мірою (чати, ігри, графіки), то буде ідеально, якщо ви досягнете результатів: 0-1 запит на кожній сторінці. Так, саме 0!

Для динамічних проектів, які обробляють велику кількість даних в реальному часі, виберіть такі технології, як, наприклад, веб-сокети та інші транспорти, що забезпечують постійне з'єднання.

13. Зменшіть число запитів браузера

Чим більше у вас підключених файлів, тим більше запитів відправляється від браузера до сервера для отримання кожного. На це витрачаються мілісекунди і для одного файлу вони, можливо, не грають велику роль. Але якщо таких файлів 40-50 а то і 100, то в сумі істотно збільшується час завантаження сторінки.

14. Оптимізувати ваш код

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

Якщо ж ви самі розробляєте систему, то даний пункт ви спокійно можете пропрацювати при проектуванні сайту. Завжди намагайтеся вимірювати активну пам'ять і навантаження вашим скриптом на сервер. Адже чим менше навантаження і споживані ресурси, тим швидше вони обробляються.

15. Виберіть правильний і хороший хостинг

Цей пункт не міг залишитися осторонь. Як показує практика, дуже багато людей вибирають хостинг за 1 рубль або зовсім безкоштовний, і, як наслідок, отримують відповідну якість. До вибору хостинг провайдера краще поставитися з більшою уважністю. Хорошим фактором якості є розумна і доброзичлива технічна підтримка, так як саме вони, в основному, збирають дистрибутиви, оптимізують згодом свої збірки. І саме вони відповідають за безперебійну роботу вашого сайту.

Якщо у вас локальний бізнес, то вибирайте хостинг, розташований максимально близько до гео позиції ваших клієнтів. Це істотно прискорить доступ до сайту. А також ви можете використовувати CDN для завантаження фотографій і інших важких файлів. CDN буде автоматично видавати клієнту важкі фотографії з сервера, який розташований максимально близько до нього. Як варіант, можете розглядати Amazon CloudFront

• Згідно з дослідженнями Strangeloop, більше 57% відвідувачів йдуть з сайту, який завантажується більше 3х секунд
• Коли сайт гальмує через великої кількості графіки, приблизно 75% покупців вирішують піти на сайти конкурентів.
• Приблизний час очікування завантаження сайту у терплячих користувачів дорівнює 2 секундам
• 8% самих користувачів вважають, що їх догляд сайту пов'язаний з довгої завантаженням контенту
• Чим швидше завантажується сайт, тим вище конверсія
• Більше 85% відвідувачів очікують, що сайт завантажиться на мобільному пристрої так само швидко, як і на комп'ютері. Якщо вони не отримують цього, то просто залишають сайт.
Джерело бонусу: gomez.com

Слідуючи даними інструкціям, ви можете пристойно знизити швидкість завантаження сайту. Як приклад, одна з наших останніх робіт стала швидше на більш ніж 300%. Вага головної сторінки був 3.47мб до оптимізації зображень і став 1.27мб після. І це тільки один пункт з вищевказаних. Дякую за увагу!