Блог о web-разработке.

Web-сайт. Ускоряем загрузку. Page Speed

2010-09-15T09:50:00.017+03:00

Существует огромное количество утилит для анализа работы Вашего сайта. Но в этой статье я хотел бы остановиться на утилите Page Speed.

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

Page Speed представляет собой набор правил, так называемых Best Practices. Утилита анализирует Ваш сайт и дает набор рекомендаций, которые позволят улучшить производительность. Кроме рекомендаций имеются также дополнительные функции, которые помогут Вам минимизировать CSS, JavaScript, HTML, уменьшить размер картинок.

Результатом анализа Вашего сайта является оценка. Максимальное значение 100. После выполнения рекомендаций мне удалось повысить оценку get-deserved.blogspot.com до 80. Некоторые из рекомендаций не удалось выполнить по причине то, что они уже зависели от google, а не от меня.

Выглядит утилита следующим образом:

Я хотел бы кратко описать некоторые моменты использования Page Speed.

Минимизация CSS, JavaScript, HTML (Minify CSS, Minify JavaScript, Minify HTML)
Утилита позволяет легко ее выполнять и Вам в принципе не нужно будет искать решения сторонних разработчиков. При использовании минимизации обратите внимание на потерю читабельности.
Объединение CSS, Javascript (Combine CSS, Combine JavaScript)
Смотрите статьи: Web-сайт. Ускоряем загрузку. CSS, Web-сайт. Ускоряем загрузку. JavaScript
Удаление неиспользуемых CSS классов (Remove unused CSS)
Очень полезная вещь, так как если сайт поддерживается длительное время, то отследить какие css-классы используются, а какие нет становится проблематично. В моем случае удаление, указанных Page Speed классов, проблем никаких не вызвало. Но обратите внимание, что указываются неиспользуемые css-классы на текущей странице, на других страницах они могут использоваться.
Использование эффективных css-правил (Use efficient CSS selectors)
Ваши css-правила могут дублировать одно и тоже действие, либо элементы страницы могут не попадать в область действия этих правил.
Оптимизация картинок (Optimize images).
Благодаря Page Speed, Вы легко и быстро сможете уменьшить размер картинок, которые являются не оптимальными. По сути утилита выполняет действия, описанные в статье Web-сайт. Ускоряем загрузку. Картинки. Gif конвертирует в Png, оптимизирует JPG. Но jpegtran оптимизирует немного лучше и без потери качества и к тому же, в моем случае, Page Speed оптимизировала JPG c потерей качества.

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

Удачной Вам оптимизации.

Web-сайт. Ускоряем загрузку. Картинки

2010-09-10T09:17:00.020+03:00

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

Уменьшаем количество картинок.
Таким образом добиваемся уменьшения http-запросов. Так как каждая картинка - это отдельный запрос. Добиться уменьшения картинок можно с помощью css-sprites. При использовании css-sprites у Вас несколько картинок заменяются одной, но отображается только часть этой картинки (меняется background-position). В интернете много примеров с подробным описанием css-sprites.
Конвертируем gif в png.
Для этого можно использовать утилиту ImageMagick. У нее имеется очень большое количество команд. Но например конвертация из gif в png производится следующим образом.
```
convert image.gif image.png
```
Разница в размерах довольно существенная и является убедительным аргументом в сторону использования png.
Уменьшаем размер картинок.
Для этого можно использовать утилиту jpegtran. Например следующий пример
```
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
```
удаляет из картинки комментарии и другую ненужную информацию без потери качества. Чтобы понимать насколько эта утилита эффективна, я выполнил описанные выше действия на картинке размером 23 кб в результате получил картинку размером 8 кб. Как говорится результат на лицо. В следующем посте я расскажу как можно уменьшить картинки более простым способом.
Не используйте картинки с пустым src.
Браузер всеравно делает запрос к серверу и пытается получить картинку.
Указывайте реальный размер картинки в css.
Браузеру не придется вычислять размер при загрузке.
Разместите картинки на отдельном домене.
Это позволит увеличить количество параллельных загрузок. Но количество доменов должно быть не более 4. Большее количество будет сказываться отрицательно на производительности.
Кэшируйте картинки.
О кэшировании я более подробно напишу в следующих постах.

Много информации для этого и предыдущих постов об оптимизации взято из http://developer.yahoo.com/

Web-сайт. Ускоряем загрузку. CSS
Web-сайт. Ускоряем загрузку. JavaScript

Время - деньги. Оптимизируйте Ваш сайт. Ваши пользователи будут Вам благодарны.

Web-сайт. Ускоряем загрузку. JavaScript

2010-09-07T10:46:00.029+03:00

JavaScript очень популярен в настоящее время. Он довольно прост в изучении и позволяет сделать Ваш сайт более динамичным и интерактивным. Статические сайты сейчас уже не интересны пользователям. Во многих случаях javascript используется неэффективно, негативно влияя на производительность Вашего web сайта. В данной статье мы рассмотрим основные моменты, связанные с javascript, которые позволят этого избежать.

Как и в случае с css файлами, скрипты лучше вынести в отдельные файлы и постараться, чтобы количество этих файлов было как можно меньше. Отдельные файлы будут кэшироваться, что положительно скажется на загрузке страницы.
В отличии от css-файлов скрипты лучше располагать как можно ниже на странице. Все дело в том, что пока не закончится загрузка скрипта другие загрузки не начнутся т.е. страница будет блокироваться.
В некоторых случаях переместить скрипты вниз страницы может быть проблематично, т.к. выше могут быть обращения к функциям из этих скриптов, что приведет к ошибкам.
Динамическая подгрузка скриптов.
Вы можете динамически подгружать скрипты по мере необходимости. Это позволит не загружать скрипты, которые возможно вообще не понадобятся. Например, это можно сделать так:
```
var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://YourSiteURL/script.js';
headID.appendChild(newScript);
```
Т.е. Вы просто добавляете новый элемент script с нужным адресом в DOM Вашего документа. Это достаточно простой пример. Существуют библиотеки, которые предоставят Вам более широкие возможности по динамической загрузке скриптов. Например, LABjs.
JavaScript profiling
Используем утилиты для анализа JavaScript. Например, для Firefox есть add-on Firebug. Используя его profiler, можно увидеть какие методы вызываются чаще всего и сколько времени они выполняются. Затем можно оптимизировать эти методы. Пример firebug profiler:
Минимизируем JavaScript.

Cуществует достаточное количество утилит, которые позволяют это сделать. Например, JavaScript Compressor.
В моем случае степень сжатия получилась 32% (около 9кб).

Вопросы оптимизации CSS рассмотрены в статье - Web-сайт. Ускоряем загрузку. CSS.

Время - деньги. Оптимизируйте Ваш сайт. Ваши пользователи будут Вам благодарны.

Web-сайт. Ускоряем загрузку. CSS

2010-09-05T22:10:00.070+03:00

Этим постом я хотел бы начать небольшую серию статей об ускорении времени загрузки web-сайта.

Всем известно, что очень большое значение имеет содержание сайта (блога), но не стоит забывать и скорости работы. Потому как, какой бы не был интересный контент, если он загружается очень медленно, то скорее всего Вы потеряете потенциального, а возможно и постоянного посетителя.

Как правило приемлемым временем загрузки любого сайта (блога) является время в пределах от 1 до 5 секунд. Возможно в некоторых случаях это окажется нереально, но к этому надо стремится.

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

Вот 7 основных моментов оптимизации CSS:

Уменьшаем количество загружаемых CSS-файлов.
Объединяем, если это возможно, css-файлы в один или в меньшее количество файлов. Этим мы добъемся уменьшения http запросов. Один файл большего размера будет загружаться быстрее чем 10 меньшего размера.
Выносим стили в отдельный файл(ы).
Если у вас на странице есть объявления стилей с помощью тега style type="text\css" , то их лучше вынести в отдельный файл. За счет этого файлы будут кэшироваться и соответственно при последующих открытиях страниц будут браться из кэша, а не загружаться снова.
Перемещаем описание стилей CSS в head.
Все дело в том, что браузер блокирует отрисовку страницы пока не загружены все стили, потому что стили могут изменить отображение страницы и браузеру придется перерисовывать её снова.
Избегаем использования CSS expressions.
Internet Explorer позволяет задать css ехpressions. Например,
```
 p { width:expression(400 + "px");} 
```
Проблема в том, что этот expression может вычисляться огромное количество раз и соответственно производительность загрузки страницы будет страдать.
Удаляем неиспользуемые css-классы.
За время жизни блога css файлы могут меняться, оптимизироваться и т.д. В итоге появляются классы, которые уже нигде не используются, но приводят к увеличению размера файла.
Удаляем бесполезные css-правила.
В ccs-стилях могут присутствовать идентичные правила. Например,
```
 p div {width:30px} и div {width:30px} 
```
Это взаимозаменяемые правила и соответственно одно из них может быть без проблем удалено.
Минимизируем CSS.
Описание стилей могут включать в себя большое количество различных пробелов, комментариев и т.д., что соответственно увеличивает размер файла. Существует множество online утилит, которые помогают минимизировать css. Например, я нашел cледующую неплохую утилиту - CSS compressor. С помощью настроек Вы сможете задать степень сжатия и другие параметры.
Например, вот что у меня получилось:
Как видим, размер сжатия в моем случае почти 23%. Довольно неплохо. Я выбрал стандартный режим сжатия, чтобы не потерялась читабельность. Если для Вас это не важно, то размер сжатия можно увеличить.

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

Время - деньги. Оптимизируйте Ваш сайт. Ваши пользователи будут Вам благодарны.