5 способів зробити ваш сайт менше і швидше

25

Від автора: Визнання: Якщо чесно, то приблизно раз в тиждень мені хотілося б бути дитиною, який проводить свій робочий день, підстригаючи траву і займається озелененням. Чому? Тому що в кінці робочого дня, можна сміливо сказати «трава підстрижена, робота виконана». А ми, веб-розробники, ніколи не можемо сказати, чи не правда? Сайт завжди можна зробити ще більш ефективним – завжди знайдуться підходи щодо скорочення кількості байтів. Завжди. І поки ми це реалізуємо, ми незмінно повторюємо, що «сайт недостатньо хороший». Щоб бути класним розробником, ми майже приречені на те, щоб відчувати, що наша робота недосконала – який же це сумний шлях існування!

Хороші новини полягають в тому, що існує кілька методів, як легко поліпшити продуктивність і час завантаження. Ось п’ять моментів, на виконання яких знадобляться буквально хвилини, а ваш сайт буде у всіх користувачів завантажуватися швидше!

1. Стиснення зображень — ImageOptim

Стиснення зображень – це безкоштовний спосіб поліпшення часу завантаження сайту. Photoshop та інші графічні редактори відомі своєю неефективністю у плані стиснення зображень і, в результаті, при кожному запиті завантажується багато зайвих кілобайт. Хороші новини полягають в тому, що існує багато утиліт, які борються із зайвими кілобайтами! Моєю улюбленою утилітою для Mac є ImageOptim.

5 способів зробити ваш сайт менше і швидше

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

2. CloudFlare

CloudFlare є сервісом, яким можна користуватися безкоштовно і який надає масу поліпшень:

сервіси CDN

минификация JavaScript, CSS і HTML

сервіси резервного копіювання під час простою

запобігання DDOS атак

обслуговування ресурсів за місцезнаходженням

Це не є проплаченою оголошенням – сайт davidwalsh.name використовує Cloudflare і на ньому використовувалися всі його можливості. Мені вдалося заощадити гігабайти трафіку завдяки CloudFlare. І навіть коли у мене впав сервер, CloudFlare безпомилково відображав сторінки сайту. Ви беззастережно виграєте, якщо використовуєте CloudFlare.

3. Невеликі бібліотеки гліф іконок з Fontello

За останні кілька років иконочные шрифти стали популярними, і я не буду зупинятися на причинах цього – ми всі знаємо, чому вони такі чудові. Проблема полягає в тому, що із-за нашої ліні ми використовуємо файли з иконочными шрифтами цілком, а на ділі виявляється, що нам потрібна лише якась частина. І хоча ми рідко надаємо цьому значення, файли зі шрифтами зазвичай важкі. Іконка емодзі: 5 способів зробити ваш сайт менше і швидше . На щастя, існують такі утиліти, як Fontello.

Fontello дозволяє вам вибрати окремі гліфи з декількох иконочных шрифтів і, таким чином, зробити вашу таблицю стилів з иконочным шрифтом менше за розміром.

4. Генерація статичних файлів

Ми любимо скрипти, що створюють динаміку, але навіщо потрібні динамічні сторінки в ситуаціях, коли можна обійтися статичними сторінками? Таку практику часто можна спостерігати у WordPress – контент посту, в цілому, залишається незмінним, а оголошення коментарі можуть змінюватися.

Відповідь? Пошук ключових моментів, коли сторінка може змінитися, і генерація статичного контенту, коли ці моменти відбуваються. Чудова утиліта для WordPress під назвою Really Static служить саме для цих цілей. Звичайно, для вашої CMS (не WordPress) буде потрібно створення механізму для генерації настроюваних сторінок, але переваги, які ви отримуєте швидкості сайту, дійсно варті цього.

Якщо у вас є контент, який вам потрібно відображати на цих статичних сторінках, наприклад, оголошення або посилання на актуальний контент, подумайте над використанням JavaScript і AJAX-запитів для отримання контенту – сторінка буде статичною, і JavaScript буде обслуговуватися через CDN – тоді єдиним моментом, на який потрібно звернути увагу в плані швидкості, залишиться AJAX запит!

5. Відкладена («ледача») завантаження ресурсів… або їх вставка?

Загальновідомим симптомом, що говорить про повільному сайті, є кількість запитів, які генерує кожна сторінка. У минулому ми боролися з цією проблемою, використовуючи спрайт зображень/CSS, конкатенацию JavaScript і CSS ресурсів і механізм data URI. Ви також можете застосовувати відкладену («ліниву») завантаження (lazyload) ресурсів або просто вставляти їх на сторінку:

document.querySelectorAll(‘article pre’).length && (function() {
var mediaPath = ‘/assets/’;
var stylesheet = document.createElement(‘style’);
stylesheet.setAttribute(‘type’, ‘text/css’);
stylesheet.setAttribute(‘rel’, ‘stylesheet’);
stylesheet.setAttribute(‘href’, mediaPath + ‘css/syntax.css’);
document.head.appendChild(stylesheet);
var syntaxScript = document.createElement(‘script’);
syntaxScript.async = ‘true’;
syntaxScript.src = mediaPath + ‘js/syntax.js’;
document.body.appendChild(syntaxScript);
})();

Вищенаведений код завантажує можливість підсвічування синтаксису, тільки якщо елементи на сторінці потребують цієї підсвічуванню. А що якщо CSS підсвічування синтаксису складається всього з декількох рядків коду? Ви можете зекономити на додатковому запиті та просто вставити потрібний код на сторінку:

Або ви можете з’єднати ваш файл highlight.css з загальною таблицею стилю для сайту – це також буде плюсом! Як бачите, існують деякі неймовірно прості способи поліпшення продуктивності і швидкості завантаження сайту, для реалізації яких потрібно кілька хвилин. Було б бажання. А коли ви подумаєте про те, скільки відвідувачів заходить на ваш сайт і скільки переглядів сторінок вони здійснюють, то ви зрозумієте, чому ці незначні заходи з оптимізації так важливі!