Pull to refresh

5 способов сделать ваш сайт легче и быстрее, от David Walsh

Website development *
Предлагаю читателям «Хабрахабра» перевод упомянутой в дайджете статьи «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 используем меньше символов из иконочных библиотек


Иконочные шрифты были популярны в течение нескольких лет, сейчас я опущу список причин, почему мы знаем, что они удивительные. Проблема в том, что мы лениво подгружали целые файлы с иконочными шрифтами в то время как нами использовались только единичные иконки из них. И хотя мы редко задумываемся об этом, файлы шрифтов, как правило, довольно массивны/тяжелы. В эмоциях это: :(. К счастью существуют такие утилиты как 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
Tags: lessons learnweb-разработкаоптимизация сайта
Hubs: Website development
Total votes 13: ↑8 and ↓5 +3
Comments 7
Comments Comments 7

Popular right now