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

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

376
ПОДЕЛИТЬСЯ

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

До тех пор, пока мы это внутренне понимаем, и повсевременно повторяем — «сайт не довольно хорош». Поэтому что в конце дня, хозяева могли огласить «трава подстрижена, работа завершена». Исповедь: Раз в недельку я говорю , что мне искренне жалко, что я был ребенком, который проводил собственный рабочий день подстригая травку и занимаясь озеленением. Веб-сайт постоянно может быть наиболее действенным — постоянно есть стратегии для уменшения количества б. Почему? Как интернет-создатели, мы никогда не можем огласить это, либо можем? Постоянно. Чтоб раз в день быть великим разрабом, мы практически обречены ощущать/чувствовать, что наша работа как как будто не довольно хороша — что за нехороший метод проживать наши жизни!

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

Сжатие изображений — ImageOptim 1.
переводчика: аналоги для мира Windows) Сжатие изображения это завершающий бесплатный проход в улучшении времени загрузки веб-сайта. Photoshop и остальные приложения для редактирования изображений являются позорно неэффективными при сжатии изображений, как итог – на каждый запрос приходится много дополнительно скачанных кб. Неплохой новостью является то, что существует множество утилит для ликвидации излишних кб! (прим. Моей возлюбленной утилитой для Mac является ImageOptim.

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

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

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

Даже когда мой сервер не работал, CloudFlare обслуживал интернет-странички идеально. Это не размещенная реклама — davidwalsh.name употребляет Cloudflare и испробовал все его способности. Мой веб-сайт сэкономил гб на передаче данных, благодаря CloudFlare. Когда вы используете CloudFlare – это полная победа.

3. С Fontello используем меньше знаков из Glyph библиотек
Glyph шрифты были популярны в течение пары лет, на данный момент я опущу перечень обстоятельств, почему мы знаем, что они удивительные. Неувязка в том, что мы лениво подгружали целые файлы с glyph шрифтами в то время как нами использовались лишь единичные фрагменты из их. К счастью есть такие утилиты как Fontello. В чувствах это: :(. И хотя мы изредка задумываемся о этом, файлы шрифтов, как правило, достаточно массивны/тяжелы.

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

Создание статических файлов 4.
Это практика нередко встречается в WordPress – содержимое сообщения/поста традиционно не изменяется, но реклама и комменты могут. Мы любим наши динамические скрипты, но для чего же обслуживать динамические странички, там, где будут справлятся статические?

Естественно, ваша не-WordPress CMS-система востребует специальную/кастомную генерацию страничек, но достоинства в скорости будут того стоить. Ответ? Милая WordPress утилита Really Static которая совершает этот подвиг для блог-платформы. Поиск главных моментов, когда страничка может поменяться, и генерации статического содержимого для этих главных моментов.

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

LazyLoad ресурсы… либо интегрированные? 5.
Узнаваемый симптом веб-сайта медлительность, это количество запросов генерируемое каждой страничкой. В прошедшем мы устранили эту делему с 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 файлом для веб-сайта – это ли не преимущество!

habrahabr.ru И когда вы подумаете о количестве гостей которые приходят на ваш веб-сайт, и о количестве просмотров страничек, вы поймете, почему эти микро-оптимизации так важны! Как вы осознаете, эти невероятную легкость, скорость и достоинства может получить и ваш веб-сайт, раз вы готовы приложить усилия в течении пары минут, чтоб ввести эти улучшения.