5 способів зробити ваш сайт легше і швидше, від David Walsh

Пропоную читачам «Хабрахабра» переклад згаданої дайджете статті «5 Ways to Make Your Site Smaller and Faster» з блогу Девіда Велша (David Walsh)

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

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

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

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

ImageOptim

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

2. CloudFlare

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

  • CDN сервіси
  • JavaScript, CSS і HTML мінімізація
  • Сервіс виконує резервне копіювання, під час вимушеного простою
  • Запобігання DDOS-атак
  • Покращене обслуговування на основі місцезнаходження


Це не розміщена реклама — davidwalsh.name використовує Cloudflare і випробував всі його можливості. Мій сайт заощадив гігабайти на передачі даних, завдяки CloudFlare. Навіть коли мій сервер не працював, CloudFlare обслуговував веб-сторінки бездоганно. Коли ви використовуєте CloudFlare — це повна перемога.

3. З Fontello використовуємо менше символів з Glyph бібліотек

Glyph шрифти були популярні протягом декількох років, зараз я опущу список причин, чому ми знаємо, що вони дивовижні. Проблема в тому, що ми ліниво довантажувати цілі файли з glyph шрифтами в той час як нами використовувалися лише поодинокі фрагменти з них. І хоча ми рідко замислюємося про це, файли шрифтів, як правило, досить масивні/важкі. В емоціях: :(. На щастя, існують такі утиліти, як Fontello.

Fontello дозволяє вибирати окремі glyph-и з різних glyph шрифтів і тим самим зробити Ваш файл зі стилями шрифтів на кілобайти менше.

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

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

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

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

5. LazyLoad ресурси… або вбудовані?

Відомий симптом сайту повільність, це кількість запитів генеруються кожною сторінкою. У минулому ми усунули цю проблему з CSS / спрайт зображеннями, об'єднаннями JavaScript і CSS ресурсів, і використовуючи 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 це просто кілька рядків? Ви можете заощадити зайву запит і вбудувати його в сторінку:

< style type="text/css">
<?php include('media/assets/highlight.css'); ?>
</style>
</head>

Або ви могли б об'єднати підсвічування CSS разом вашим основним CSS файл для сайту — це не перевага!

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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.