Предлагаю читателям «Хабрахабра» перевод упомянутой в дайджете статьи «5 Ways to Make Your Site Smaller and Faster» из блога Девида Уэлша (David Walsh)
Исповедь: Раз в неделю я говорю, что мне искренне жаль, что я был ребенком, который проводил свой рабочий день подстригая траву и занимаясь озеленением. Почему? Потому что в конце дня, хозяева могли сказать «трава подстрижена, работа завершена». Как веб-разработчики, мы никогда не можем сказать это, или можем? Сайт всегда может быть более эффективным — всегда есть стратегии для уменшения количества байт. Всегда. До тех пор, пока мы это внутренне осознаем, и постоянно повторяем — «сайт не достаточно хорош». Чтобы ежедневно быть великим разработчиком, мы почти обречены чувствовать/ощущать, что наша работа как будто не достаточно хороша — что за негативный способ проживать наши жизни!
Хорошей новостью является то, что есть несколько способов для получения невероятного прироста производительности и времени загрузки компонентов сайта. Вот пять полезностей, которые вы можете завершить в течение нескольких минут, чтобы сделать ваш сайт быстрее для всех пользователей!
Сжатие изображения это завершающий бесплатный проход в улучшении времени загрузки сайта. Photoshop и другие приложения для редактирования изображений являются позорно неэффективными при сжатии изображений, как результат – на каждый запрос приходится много дополнительно скачанных килобайт. Хорошей новостью является то, что существует множество утилит для ликвидации лишних килобайт! Моей любимой утилитой для Mac является ImageOptim. (прим. переводчика: аналоги для мира Windows)
![ImageOptim](https://habrastorage.org/r/w1560/files/a6f/6bb/830/a6f6bb830de348d787083536dae3236e.png)
Вы можете использовать gzipping столько раз, сколько пожелаете, но лишние килобайты в исходном изображении это расточительство, так что утилита оптимизации, которою вы можете использовать, такая же ценная стратегия как и любые другие!
CloudFlare, сервис, у которого есть бесплатный стартовый пакет, предлагает множество усовершенствований:
Это не размещенная реклама — davidwalsh.name использует Cloudflare и испробовал все его возможности. Мой сайт сэкономил гигабайты на передаче данных, благодаря CloudFlare. Даже когда мой сервер не работал, CloudFlare обслуживал веб-страницы безупречно. Когда вы используете CloudFlare – это полная победа.
Иконочные шрифты были популярны в течение нескольких лет, сейчас я опущу список причин, почему мы знаем, что они удивительные. Проблема в том, что мы лениво подгружали целые файлы с иконочными шрифтами в то время как нами использовались только единичные иконки из них. И хотя мы редко задумываемся об этом, файлы шрифтов, как правило, довольно массивны/тяжелы. В эмоциях это: :(. К счастью существуют такие утилиты как Fontello.
Fontello позволяет выбирать отдельные иконки из различных иконочных шрифтов и тем самым сделать Ваш файл с иконочными шрифтами на килобайты меньше.
Мы любим наши динамические скрипты, но для чего обслуживать динамические страницы, там, где будут справлятся статические? Это практика часто встречается в WordPress – содержимое сообщения/поста обычно не меняется, но реклама и комментарии могут.
Ответ? Поиск ключевых моментов, когда страница может измениться, и генерации статического содержимого для этих ключевых моментов. Милая WordPress утилита Really Static которая совершает этот подвиг для блог-платформы. Конечно, ваша не-WordPress CMS-система потребует специальную/кастомную генерацию страниц, но преимущества в скорости будут того стоить.
Если у вас есть контент, такой как реклама или ссылки на дополнение текущего содержимого, который вам нужно менять в таких статических страницах, в таком случае рассмотрите JavaScript и AJAX запросы. Страницы будут статичными, а чтобы получить этот сменяющийся контент/содержимое — то JavaScript будет представлен посредством CDN сервиса – в таком случае AJAX запрос будет зависеть только от скорости обслуживания CDN!
Известный симптом сайта медлительность, это количество запросов генерируемое каждой страницей. В прошлом мы устранили эту проблему с CSS / спрайт изображениями, объединениями JavaScript и CSS ресурсов, и используя URI для данных. Вы также можете использовать LazyLoad ресурсы или просто встраивать их в страницу:
Приведенный выше пример загружает подсветку синтаксиса, только если элементы на странице требуют подсветку. А что, если подсветка синтаксиса CSS это просто несколько строк? Вы можете сэкономить лишний запрос и встроить его в страницу:
Или вы могли бы объединить подсветку CSS вместе в вашим основным CSS файлом для сайта – это ли не преимущество!
Как вы понимаете, эти невероятную легкость, скорость и преимущества может получить и ваш сайт, если вы готовы приложить усилия в течении нескольких минут, чтобы внедрить эти улучшения. И когда вы подумаете о количестве посетителей которые приходят на ваш сайт, и о количестве просмотров страниц, вы поймете, почему эти микро-оптимизации так важны!
Upd.
glyph шрифты заменены на более устоявшийся термин иконочные шрифты, спасибо pepelsbey
Исповедь: Раз в неделю я говорю, что мне искренне жаль, что я был ребенком, который проводил свой рабочий день подстригая траву и занимаясь озеленением. Почему? Потому что в конце дня, хозяева могли сказать «трава подстрижена, работа завершена». Как веб-разработчики, мы никогда не можем сказать это, или можем? Сайт всегда может быть более эффективным — всегда есть стратегии для уменшения количества байт. Всегда. До тех пор, пока мы это внутренне осознаем, и постоянно повторяем — «сайт не достаточно хорош». Чтобы ежедневно быть великим разработчиком, мы почти обречены чувствовать/ощущать, что наша работа как будто не достаточно хороша — что за негативный способ проживать наши жизни!
Хорошей новостью является то, что есть несколько способов для получения невероятного прироста производительности и времени загрузки компонентов сайта. Вот пять полезностей, которые вы можете завершить в течение нескольких минут, чтобы сделать ваш сайт быстрее для всех пользователей!
1. Сжатие изображений — ImageOptim
Сжатие изображения это завершающий бесплатный проход в улучшении времени загрузки сайта. Photoshop и другие приложения для редактирования изображений являются позорно неэффективными при сжатии изображений, как результат – на каждый запрос приходится много дополнительно скачанных килобайт. Хорошей новостью является то, что существует множество утилит для ликвидации лишних килобайт! Моей любимой утилитой для Mac является ImageOptim. (прим. переводчика: аналоги для мира Windows)
![ImageOptim](https://habrastorage.org/files/a6f/6bb/830/a6f6bb830de348d787083536dae3236e.png)
Вы можете использовать gzipping столько раз, сколько пожелаете, но лишние килобайты в исходном изображении это расточительство, так что утилита оптимизации, которою вы можете использовать, такая же ценная стратегия как и любые другие!
2. CloudFlare
CloudFlare, сервис, у которого есть бесплатный стартовый пакет, предлагает множество усовершенствований:
- CDN сервисы
- JavaScript, CSS и HTML минимизация
- Сервис выполняющий резервное копирование, во время вынужденного простоя
- Предотвращение DDOS-атак
- Улучшенное обслуживание на основе местоположении
Это не размещенная реклама — davidwalsh.name использует Cloudflare и испробовал все его возможности. Мой сайт сэкономил гигабайты на передаче данных, благодаря CloudFlare. Даже когда мой сервер не работал, CloudFlare обслуживал веб-страницы безупречно. Когда вы используете CloudFlare – это полная победа.
3. С Fontello используем меньше символов из иконочных библиотек
Иконочные шрифты были популярны в течение нескольких лет, сейчас я опущу список причин, почему мы знаем, что они удивительные. Проблема в том, что мы лениво подгружали целые файлы с иконочными шрифтами в то время как нами использовались только единичные иконки из них. И хотя мы редко задумываемся об этом, файлы шрифтов, как правило, довольно массивны/тяжелы. В эмоциях это: :(. К счастью существуют такие утилиты как Fontello.
Fontello позволяет выбирать отдельные иконки из различных иконочных шрифтов и тем самым сделать Ваш файл с иконочными шрифтами на килобайты меньше.
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 файлом для сайта – это ли не преимущество!
Как вы понимаете, эти невероятную легкость, скорость и преимущества может получить и ваш сайт, если вы готовы приложить усилия в течении нескольких минут, чтобы внедрить эти улучшения. И когда вы подумаете о количестве посетителей которые приходят на ваш сайт, и о количестве просмотров страниц, вы поймете, почему эти микро-оптимизации так важны!
Upd.
glyph шрифты заменены на более устоявшийся термин иконочные шрифты, спасибо pepelsbey