5 способов сделать ваш сайт меньше и быстрее

Дата публикации: 2015-03-30

От автора: Признание: Если честно, то примерно раз в неделю мне хотелось бы быть ребенком, который проводит свой рабочий день, подстригая траву и занимается озеленением. Почему? Потому что в конце рабочего дня, можно смело сказать «трава подстрижена, работа выполнена». А мы, веб-разработчики, никогда не можем так сказать, не правда ли? Сайт всегда можно сделать еще более эффективным – всегда найдутся подходы по сокращению количества байтов. Всегда. И пока мы это реализуем, мы неизменно твердим, что «сайт недостаточно хорош». Чтобы быть классным разработчиком, мы почти обречены на то, чтобы чувствовать, что наша работа несовершенна – какой же это печальный путь существования!

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

1. Сжатие изображений — ImageOptim

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

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

2. CloudFlare

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

сервисы CDN

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

сервисы резервного копирования во время простоя

предотвращение DDOS атак

обслуживание ресурсов по местонахождению

Это не является проплаченным объявлением – сайт davidwalsh.name использует Cloudflare и на нем использовались все его возможности. Мне удалось сэкономить гигабайты трафика благодаря CloudFlare. И даже когда у меня «упал» сервер, CloudFlare безошибочно отображал страницы сайта. Вы безоговорочно выигрываете, если используете CloudFlare.

3. Небольшие библиотеки глиф-иконок с Fontello

За последние несколько лет иконочные шрифты стали популярными, и я не буду останавливаться на причинах этого – мы все знаем, почему они такие потрясающие. Проблема заключается в том, что из-за нашей лени мы используем файлы с иконочными шрифтами целиком, а на деле оказывается, что нам нужна только какая-то часть. И хотя мы редко придаем этому значение, файлы со шрифтами обычно тяжелые. Иконка эмодзи: :(. К счастью, существуют такие утилиты, как 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);
})();

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>

<?php include('media/assets/highlight.css'); ?>

</style>

</head>

Или вы можете соединить ваш файл highlight.css с общей таблицей стиля для сайта – это также будет плюсом! Как видите, существуют некоторые невероятно простые способы по улучшению производительности и скорости загрузки сайта, для реализации которых потребуется несколько минут. Было бы желание. А когда вы подумаете о том, сколько посетителей заходит на ваш сайт и сколько просмотров страниц они совершают, то вы поймете, почему эти незначительные меры по оптимизации так важны!

Автор: David Walsh

Источник: //davidwalsh.name/

Редакция: Команда webformyself.

Метки: оптимизация, сайтостроение