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 используем меньше символов из иконочных библиотек


    Иконочные шрифты были популярны в течение нескольких лет, сейчас я опущу список причин, почему мы знаем, что они удивительные. Проблема в том, что мы лениво подгружали целые файлы с иконочными шрифтами в то время как нами использовались только единичные иконки из них. И хотя мы редко задумываемся об этом, файлы шрифтов, как правило, довольно массивны/тяжелы. В эмоциях это: :(. К счастью существуют такие утилиты как 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
    • +3
    • 20.7k
    • 7
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 7

      +4
      Что вам помешало оформить перевод как перевод? См. справку Хабра.

      И передайте роботу, который переводил этот текст, что есть такое слово «глиф» и то, что автор называет «glyph fonts», гораздо шире известно как «icon fonts» или «иконочные шрифты».
        +3
        У хабра в этом плане явная недоработка в плане юзабилити. Я, например, специально зашёл посмотреть, как выбирается тип публикации, и нашёл не сразу. ;-)

        Возможно, пара простых radio-кнопок, отображаемых одновременно (и не как часть заголовка, а ровно над полем «В какой хаб?»), решила бы вопрос раз и навсегда.
        0
        Не знал, что у СloudFlare есть бесплатный пакет. Очень приятное открытие.
          0
          Да вроде всегда был, если память не играет со мной злую шутку.
          +1
          var stylesheet = document.createElement('style');
          


          тут должен создаваться элемент link, а не style
          • UFO just landed and posted this here
              0
              По опыту оптимизации изображений:
              пользуюсь консольным imgo github.com/imgo/imgo, правда и после него GooglePageSpeed Insights плагин для хрома выдаёт в некоторых файлах лучшие результаты, приходится сохранять ручками.

              У ImageOptim как с этим?

              И у кого есть опыт, подскажите как лучше поступать с многочисленными счётчиками в подвале: обернуть каждый в window.load или встраивать через document.createElement('script')?

              Only users with full accounts can post comments. Log in, please.