[Статья] Лёгкий сайт

**J-Fobos** · 06.05.2013, 13:40

Это перевод статьи/сайта [Ссылки могут видеть только зарегистрированные пользователи. ]. Автор перевода A3a.

25 советов, которые даются тут, действительно будут полезны как новичкам веб-разработки, так и матёрым акулам интернет пространства. Многие забывают, что несмотря на то, что каналы интернета расширяются, а скорости всё растут, очень важно чтобы сайт загружался быстро.

/*======================*/
<--====================-->

Цитата:


	А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки? И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать [Ссылки могут видеть только зарегистрированные пользователи. ] (Americanas.com), [Ссылки могут видеть только зарегистрированные пользователи. ] (Globo.com), [Ссылки могут видеть только зарегистрированные пользователи. ] (ex-Peixe Urbano), [Ссылки могут видеть только зарегистрированные пользователи. ] (Terra), [Ссылки могут видеть только зарегистрированные пользователи. ] (Twitter), [Ссылки могут видеть только зарегистрированные пользователи. ] (Opera), [Ссылки могут видеть только зарегистрированные пользователи. ] (Google), и [Ссылки могут видеть только зарегистрированные пользователи. ] (Caelum) чтобы собрать лучшие практики? Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

[Ссылки могут видеть только зарегистрированные пользователи. ], руководитель проекта.

Неужели важно то, насколько быстро загружается сайт?

Несомненно! И не надо говорить, что это не так. Так почему же до сих пор появляются медленные сайты, оставляющие неприятный осадок на душе пользователя, который на них побывали? Соблюдая правила, описанные тут, можно заставить сайт загружаться быстрее. Не будем останавливаться на [Ссылки могут видеть только зарегистрированные пользователи. ], перейдем сразу к делу!

HTML

25. Избегайте использование inline и вложенного кода

Подключить CSS и JavaScript код можно тремя простыми способами:

- Inline: Код пишется непосредственно в теге элемента. Для CSS в атрибуте style, а для JavaScript в атрибуте onclick.
- Вложенный: CSS и JavaScript код пишутся в блоках <style> и <sсript> соответственно.
- Внешний: Используя тег <link> для CSS файла, или же <sсript> с указанием атрибута src для JavaScript.

Первые два варианта, несмотря на то, что уменьшают количество HTTP запросов, увеличивают объем самого HTML файла. Если объемы включаемых скриптов и файла не большие, первые два варианта могут оказаться быстрее третьего. Чтобы проверить так ли это, можно провести тесты. Так же, нужно учитывать назначение странички. Если вы уверены, что пользователь зайдет только единожды, то первые два варианта окажутся предпочтительнее, т.к. сократят количество HTTP запросов.

Старайтесь не включать CSS/JS в середине HTML файла. (Используйте инструменты для автоматизации этого процесса)

Третий вариант предпочтительнее для большинства случаев. При внешнем подключении не только улучшается структура сайта, но так же позволяет браузерам кэшировать эти файлы. Особенно это важно, если файлы тяжелые и их много.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

24. Стили сверху, скрипты снизу

Если объявить стили в блоке <head>, то страница будет оформляться по мере загрузки стилей и пользователю будет казаться что всё грузится быстро.

Код:

<head>
  <meta charset="UTF-8">
  <title>Сажаем браузер на диету</title>
  <!-- CSS -->
  <link rel="stylesheet" href="style.css" media="all">
</head>

Но если объявить их в конце страницы, то она останется в неглиже, пока стили не загрузятся.

С другой стороны, лучше подключать JavaScript в конце, т.к. время загрузки скриптов можно потратить с пользой на оформление страницы.

Код:

<body>
  <p>Lorem ipsum dolor sit amet.</p>
   <!-- JS -->
  <script src="script.js"></script>
</body>

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

23. Сжимайте HTML код

Конечно же, для поддержки кода, лучше оставлять комментарии и расставлять отступы в нем.

Код:

<p>Lorem ipsum dolor sit amet.</p>
<!-- Это лист -->
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

Но браузеру они совершенно не нужны. Поэтому лучше cжать HTML код.

Код:

<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>

Это сократит размер страницы, а пользователи насладятся быстрой загрузкой сайта.

Несколько примеров работы [Ссылки могут видеть только зарегистрированные пользователи. ] с настройками по умолчанию:

[Ссылки могут видеть только зарегистрированные пользователи. ]

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

22. Включайте асинхронно

Чтобы понять, как этот атрибут ускоряет загрузку, легче посмотреть, что происходит, если его не использовать.

Код:

<script src="example.js"></script>

В этом случае, браузер будет ждать полной загрузки скрипта, прежде чем начнет обрабатывать последующий HTML код. Это может серьезно увеличить время загрузки сайта. Но иногда такое поведение браузера оправдано.

Код:

<script async src="example.js"></script>

Здесь же, скрипт будет скачиваться асинхронно, не мешая обработке HTML разметки страницы. Скрипт запустится как только полностью скачается. Главное помнить, что если асинхронных скриптов несколько, то они запустятся не обязательно в том же порядке что были объявлены.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

======================================

CSS

21. Сжимайте стили

Как и в случае с HTML кодом, браузер не оценит ваши комментарии и отступы в стилях:

Код:

.center {
  width: 960px;
  margin: 0 auto;
}
/* --- Структура --- */
.intro {
  margin: 100px;
  position: relative;
}

Поэтому сжимайте их с помощью инструментов, для этого предназначенных.

Код:

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

Если вы использует динамические языки стилей Sass, Less, Stylus и т.п., их можно настроить так, чтобы на выходе получать уже сжатые файлы.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

20. Объединяйте CSS файлы

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

Код:

<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">

Но это отдельные HTTP запросы на загрузку каждого файла (так же у браузеров есть ограничение на количество параллельных загрузок).

Код:

<link rel="stylesheet" href="main.css" media="all">

Если объединить CSS файлы, они загрузятся быстрее.

Этот процесс можно автоматизировать при помощи различный инструментов.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

19. Используйте <link> вместо @import

Подключить внешние стили можно двумя способами. Либо с помощью тега <link>:

Код:

<link rel="stylesheet" href="style.css">

Либо используя директиву @import (внутри внешних стилей или вложенных тегах <style>):

Код:

@import url('style.css');

Если использовать второй способ внутри внешних стилей, браузер не может параллельно загружать этот файл, что может помешать загрузке остальных вложений.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

======================================

JavaScript

18. Загружайте сторонний контент асинхронно

Вряд ли найдутся те, кто не использовал у себя на страницах Youtube видео или кнопки like/tweet.

Проблема в том, что мы не знаем как будут загружаться эти данные и загрузятся ли они вообще. Причины этому могут быть разные: интернет пользователя, сервер с которого эти данные поступают или же не дружелюбно настроенный корпоративный firewall.

Чтобы не допустить блокировки загрузки сайта из за проблем с внешними ресурсами, загружайте их асинхронно (или используйте [Ссылки могут видеть только зарегистрированные пользователи. ])

Код:

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

Как вариант, вы можете асинхронно загружать сторонние виджеты с помощью [Ссылки могут видеть только зарегистрированные пользователи. ] скрипта.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

17. Храните размер массива

Циклы играют важную роль в производительности JavaScript. Старайтесь оптимизировать каждую итерацию.

Например, можно запоминать размер обходимого массива, чтобы не вычислять его при каждой итерации.

Код:

var arr = new Array(1000),
    len, i;

for (i = 0; i < arr.length; i++) {
  // Плохой цикл, будет считать размер массива 1000 раз
}

for (i = 0, len = arr.length; i < len; i++) {
  // Так лучше, размер массива посчитается только один раз
}

[Ссылки могут видеть только зарегистрированные пользователи. ]

Примечание: Большинство браузеров проделывают эти махинации сами.

Особенно это важно при обходе массивов данных DOM, таких как Node(NodeList), возвращаемых, например, функцией document.getElementsByTagName('a'). Они собираются «на лету», т.к. при изменениях в разметке они так же меняются.

Код:

var links = document.getElementsByTagName('a'),
    len, i;
for (i = 0; i < links.length; i++) {
  // При каждой итерации список ссылок будет пересчитываться, что есть плохо
}

for (i = 0, len = links.length; i < len; i++) {
  // Список ссылок считается единожды
}

// А это ужасный бесконечный цикл
for (i = 0; i < links.length; i++) {
  document.body.appendChild(document.createElement('a'));
  // Каждую итерацию добавляется еще одна ссылка, при этом условие останова никогда не будет выполнено
  // Если сохранять длину массива в переменной, этого не произойдет.
}

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

16. Избегайте использование document.write

При вызове document.write страница не будет полностью загружена, пока функция не завершит своё выполнение.

Использование этой функции искоренялось годами, но до сих пор есть некоторые случаи, когда приходится её применять, например, при синхронном подключении JavaScript файлов.

[Ссылки могут видеть только зарегистрированные пользователи. ], например, подключает с помощью этой функции локальный jQuery если Google не отвечает на запрос.

Код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
**********window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

Важно: Если вызвать document.write во время или после события window.onload, она заменит всё содержимое страницы.

Код:

<span>foo</span>
**********
  window.onload = function() {
    document.write('<span>bar</span>');
  };
</script>

В результате на странице будет только bar, а не foobar. Тоже самое произойдет, если сделать это после window.onload

Такое же поведение будет, если вызвать функцию ДО, но с задержкой во времени.

Код:

<span>foo</span>
**********
  setTimeout(function() {
    document.write('<span>bar</span>');
  }, 1000);
  window.onload = function() {
    // ...
  };
</script>

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

15. Избегайте излишнего перерисовывания элементов

Каждый раз, когда изменяются определенные свойства элемента DOM, запускается процесс перерисовывания.

Это может быть изменение только внешнего вида элемента. Nicole Sullivan приводит в пример редактирование стиля элемента параметром background-color.

Но более медлительно происходят изменения в разметке, например, если редактировать ширину элемента.

Без сомнений, излишнее использование таких вмешательств не допустимо. Поэтому, вместо этого:

Код:

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = div.offsetWidth + 'px';
}

Делайте так:

Код:

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth,
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = widthToSet + 'px';
}

При изменении style.width, браузер лезет в разметку страницы. Обычно, изменения в стилях многих элементов происходит при одном перерисовывании, т.к. браузер делает это один раз при обновлении вида страницы. Но, в первом примере, в цикле идёт обращение к свойству offsetWidth, которая является частью внешнего вида, поэтому браузеру приходится каждый раз пересматривать разметку страницы.

Сохраняйте все необходимые данные о разметке страницы до того, как собираетесь менять её, как во втором примере.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

14. Избегайте излишних манипуляций с DOM

При каждом не обоснованном обращении к DOM, погибает панда.

Серьезно, браузеру дорого обходится эта операция. Несмотря на то, что движки JavaScript становятся всё быстрее, предпочтительно оптимизировать обращения к дереву DOM.

Одно из простых правил: если к элементу надо обратиться несколько раз, то старайтесь это сделать одним обращением к DOM. Например, используя переменные:

Код:

// Очень и очень плохо!
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
// А так гораздо лучше :)
var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;

[Ссылки могут видеть только зарегистрированные пользователи. ]

13. Сжимайте скрипты

Так же как и в случае с CSS и HTML, браузеру совершенно безразличны комментарии и пробелы в скриптах.

Вместо этого:

Код:

BrowserDiet.app = function() {

  var foo = true;

  return {
    bar: function() {
      // тут что то происходит...
    }
  };

};

Браузеру легче обработать это:

Код:

BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

12. Объединяйте несколько js файлов в один

Так же, как и в случае с CSS, чтобы сократить HTTP запросы, объединяйте файлы скриптов в один.

Код:

<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>

А если делать так, загрузка ускорится:

Код:

<script src="main.js"></script>

Хотите быть царём DOMа? Автоматизируйте и этот процесс.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

======================================

jQuery

11. Всегда используйте последнюю версию jQuery

Команда jQuery непрерывно работает над развитием своей библиотеки, чтобы вносить разного рода улучшения.

Для локального подключения jQuery, можно взять последнюю версию библиотеки отсюда:

Код:

http://code.jquery.com/jquery-latest.js

Но не подключайте этот файл напрямую через тэг <sсript>. На вашем сайте могут возникнуть проблемы с обратной совместимостью, т.к. вы не успеете внести изменения для работы с новой версией библиотеки. Подключайте версию библиотеки, которая у вас поддерживается.

Код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Как говорил легендарный [Ссылки могут видеть только зарегистрированные пользователи. ]: «Новое всегда лучше» :P

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

10. Селекторы

Как правило, при работе с jQuery, всегда возникают вопросы при выборе того или иного селектора. Их в библиотеке достаточно много. И не все они работают одинаково быстро. Например, можно выбрать элемент по классу, ID или же использовав такие методы как find() или children().

Среди всех селекторов, выбор элемента по ID работает быстрее всего, т.к. использует нативные методы DOM:

Код:

$("#foo");

[Ссылки могут видеть только зарегистрированные пользователи. ]

9. Используйте for вместо each

Почти всегда функции самого JavaScript работают быстрее, чем аналогичные в библиотеке jQuery. Поэтому вместо перебора с помощью jQuery.each оптимальнее использовать циклы JavaScript.

Но важно отметить, что это так не всегда. Во многих случаях for in уступает по скорости jQuery.each.

И как уже говорилось, запоминайте размер массива, чтобы совершить обход быстрее.

Код:

for ( var i = 0, len = a.length; i < len; i++ ) {
    e = a[i];
}

Многие считают, что использование циклов for и while с обратными счетчиками работают быстрее традиционных. Эта тема горячо обсуждается сообществом. Но такие циклы не используют ввиду того, что код становится менее понятным.

[Ссылки могут видеть только зарегистрированные пользователи. ] и полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

8. И не используйте jQuery...

… пока в этом нет необходимости

Иногда обычный JavaScript выглядит проще jQuery.

Зачем использовать метод attr() чтобы узнать ID элемента?

Код:

$('a').on('click', function() {
  console.log( $(this).attr('id') );
});

Когда его можно достать средствами самого языка:

Код:

$('a').on('click', function() {
  console.log( this.id );
});

И это работает намного быстрее.

[Ссылки могут видеть только зарегистрированные пользователи. ] и полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

======================================

Изображения

7. Используйте CSS спрайты

Техника применения спрайтов позволяет группировать изображения в один файл.

[Ссылки могут видеть только зарегистрированные пользователи. ]

А затем указывать картинку с помощью позиции в CSS.

Код:

.icon-foo {
  background-image: url('mySprite.png');
  background-position: -10px -10px;
}

.icon-bar {
  background-image: url('mySprite.png');
  background-position: -5px -5px;
}

Таким образом, вы сократите количество HTTP запросов к серверу и задержек загрузки остальных ресурсов.

Между изображениями в спрайте, оставляйте минимум свободного места. Это не сильно отразится на размере файла, но сократит потребление памяти.

Даже не смотря на то, что все знают о спрайтах, эта техника не используется повсеместно. Разработчики зачастую забывают автоматизировать процесс создания спрайтов. В ссылках ниже, есть несколько таких инструментов.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

6. Data URI

Эта техника - альтернатива CSS спрайтам.

Data-URI это способ включения данных, как кода картинки в строку, нежели как ссылку на него. В этом примере показано как использовать Data-URI для указания фонового изображения одного из элементов.

До:

Код:

.icon-foo {
  background-image: url('foo.png');
}

После:

Код:

.icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

Все браузеры начиная с IE8 поддерживают технологию кодирования base64.

Для обоих методов, нужны дополнительные инструменты для поддержки кода. Но у метода Data-URI преимущество в том, что каждый файл по сути хранится отдельно, что облегчает разработку. Тем не менее, из за того что код картинки включается непосредственно в CSS, размер файла увеличивается. Такой подход не стоит использовать без gzip сжатия ответов сервера, т.к. выигрыш в количестве HTTP запросов может увеличить время загрузки самого файла.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

5. Не меняйте масштаб изображений

Указывайте атрибуты width и height для картинок, чтобы избежать лишних процессов обрисовки.

Код:

<img width="100" height="100" src="logo.jpg" alt="Logo">

Зная это, верстальщик Джон Ку отображает изображение 700x700px как иконку размером 50х50px.

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

Запомните: Не надо изменять масштаб изображения, только потому что это можно сделать

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

4. Оптимизируйте

Файлы изображений, часто, включают в себя много бесполезной, для WEB, информации. Например, в файле JPEG могут быть метаданные Exif камеры(дата, модель камеры, местоположение и т.п). А PNG может содержать информацию про цветовую палитру, метаданные и даже миниатюру изображения. Ничто из этого браузером не используется, а свой небольшой вес в размер файла вносит.

Существуют инструменты для такого рода оптимизации изображений. Это называется сжатием без потерь.

Другой способ оптимизации это редактирование качества картинки. Это называется сжатием с потерями. При создании JPEG, можно указать уровень качества (от 0 до 100). Для лучшей скорости загрузки, нужно выбирать наименее низкий позволительный уровень. А для PNG файла можно уменьшить цветовую палитру, например преобразовав PNG-24 в PNG-8.

Так же для увеличения скорости загрузки можно преобразовать JPEG файлы в прогрессивные. Прогрессивный JPEG поддерживается большинством браузеров и их очень просто создавать без значительной потери производительности. Такие изображения отображаются на странице быстрее ([Ссылки могут видеть только зарегистрированные пользователи. ]).

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]

======================================

Сервер

3. Используйте умное кэширование

Лучший способ оптимизировать запросы к серверу - вообще их не делать. И один из самых действенных методов избавиться от лишних обращений к серверу - кэширование. По умолчанию, браузер сам решает, сколько времени хранить кэш. Но это можно контролировать.

Эта оптимизация выполняется на сервере (и зависит от типа сервера, на котором лежит сайт). В случае, например, с Apache, можно добавить следующие строки в файл .htaccess:

Код:

ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"

При такой конфигурации, браузер будет хранить изображения, CSS и JS файлы 6 месяцев - рекомендуется хранить их хотя бы месяц. Подобным образом конфигурируются и остальные типы серверов.

Важно: Если файл закэширован, браузер больше не будет загружать его, даже если содержимое файла поменяется. Один из способов загрузки измененного закэшированного файла, это переименовать его. Можно добавить к имени файла версию, либо timestamp. Например, вместо home.js, можно использовать home-v1.js, а когда файл изменится, переименовать в home-v2.js и т.д.

Другой способ заменить загрузку закэшированного файла это добавление параметра GET к URL. Например, home.js?v=1 и home.js?v=2, но некоторые прокси игнорируют GET параметры.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

2. gzip

Большая часть контента сайта приходится на текстовые данные (HTML, CSS, JavaScript, JSON, XML и т.п.). Такие данные легко сжимаются на стороне сервера при помощью GZIP и считается хорошим тоном это делать.

GZIP сжимает данные прежде чем отправить их браузеру пользователя, тот в свою очередь «на лету» декодирует их и отображает пользователю. Это как архивация файлов перед отправкой их кому либо. Все актуальные браузеры и серверы поддерживают технологию GZIP.

Технология включается на стороне сервера. Например, для сервера Apache, достаточно указать в файле .htaccess какие типы файлов нужно сжимать:

Код:

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript

С такой же легкостью можно настроить и другие популярные серверы (читайте документацию!). И это один из самых эффективных способов по ускорению работы сайта.

Полезные [Ссылки могут видеть только зарегистрированные пользователи. ]

======================================

Дополнительно

1. Инструмент диагностики - ваш верный друг

Если после всего прочитанного, вы решитесь окунуться в мир быстрых сайтов, то для вас будет полезно установить расширения для браузера [Ссылки могут видеть только зарегистрированные пользователи. ] и [Ссылки могут видеть только зарегистрированные пользователи. ]. Они станут для вас неотъемлемым инструментом.

А если вы предпочитаете онлайн сервисы, то [Ссылки могут видеть только зарегистрированные пользователи. ], [Ссылки могут видеть только зарегистрированные пользователи. ] или [Ссылки могут видеть только зарегистрированные пользователи. ].

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

0. На этом пока всё

Надеемся, после прочтения руководства, вы приведете сайт в атлетическую форму

И запомните: В оптимизации, как и в жизни, [Ссылки могут видеть только зарегистрированные пользователи. ]. Повышение скорости загрузки - это кропотливая работа, всегда придётся взвешивать все за и против прежде чем ускорять какой либо процесс в структуре сайта.

[Ссылки могут видеть только зарегистрированные пользователи. ] вы найдете ссылки на материалы, которые были использованы при написании этого руководства.

Давайте уже начнём создавать быстрые сайты \o/

Kawalis · 06.05.2013, 19:12

Интересная статья нашел много полезных решений

Yukikaze · 06.05.2013, 20:02

Умоляю, не используйте тег php, никогда, очень тяжело читать.

Sinyss · 07.05.2013, 00:31

Цитата:

Сообщение от Yukikaze


	Умоляю, не используйте тег php, никогда, очень тяжело читать.

Ужасно за, я бы его вообще убрал...

**J-Fobos** · 07.05.2013, 19:02

Солидарен. Заменил на code.

avi2011class · 07.05.2013, 19:52

статья хорошая, но хотелось бы поинтересоваться, как куки влияют на скорость загрузки?

**J-Fobos** · 07.05.2013, 21:05

Все куки домена передаются одним запросом. Http протокол оптимизирован таким образом, что обьем/количество куки не влияет на скорость.

Но, это если куки сделаны правильно. Согласно стандарту размер куки не должен превышать 4 килобайта и на один домен не должно быть более 20 куки. Хотя современные браузеры и разрешают больше (например InternetExplorer – 50 куков на домен, а Opera 9 – 30 куков на домен), но не стоит отходить от стандарта, так как протокол хттп при превышении этих границ может реагировать не корректно.

ps: ссылка на стандарт [Ссылки могут видеть только зарегистрированные пользователи. ]