Выражая IT

Оптимизация изображения

Оптимизация просто означает сохранение размера изображения небольшого сохранении качества изображения до необходимого уровня. Есть масса процедур, которые раз может выполнять для оптимизации изображений перед загрузкой на сервер для доставки. Инструменты, которые мы используем для создания этих изображений (Photoshop, Fireworks и т.д.), как правило, инструменты, которые позволяют пользователям оптимизировать изображения для веб-использования.
• Проверьте, GIF, чтобы увидеть, если они используют палитру размер соответствующего количества цветов в изображении. Когда изображение с использованием 4 цветов и 256 цветов палитры, то изображение может быть еще более оптимизированный

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

• Для изображений, используемых в CSS спрайты, организовать изображений в спрайт горизонтально, а не вертикально как правило, приводит к уменьшению размера файла. Кроме того, комбинировать изображения с похожими цветами в спрайт. Это поможет вам сохранить цвет количество низко, в идеале до 256 цветов, так, чтобы поместиться в PNG8.

• Если вы используете favicon.ico, сохранить его небольшой, желательно под 1K.

Используйте правильно масштабировать / размер изображения.

Всегда старайтесь использовать уменьшенные картинки, т.е. не использовать больше изображений, чем нужно, просто потому, что вы можете установить ширину и высоту в HTML. Если вам нужно отобразить 100px X 100px изображения на странице, то не надо использовать уменьшенную 200x200px изображения.

Использование прогрессивного изображения

Веб-браузер уже оказывает изображения постепенно. Чтобы сделать еще лучше, просто сохраните GIF или PNG изображений с "чересстрочное" вариант, или ваш JPEG изображений с «прогрессивными» вариант.

Существует продолжаются дискуссии среди пользователей Интернета, является ли использование прогрессивных изображений является благом или помехой. Кроме того, прогрессивный образ весит примерно на 20% больше, чем его коллега, не прогрессивный. Итак, если вы думаете, что схема использует изображения, которые не будут мешать пользователю опыт, причем прогрессивной, не стесняйтесь делать это.

Включите JavaScript в в нижней части документа HTML

Если у вас нет document.write (или любой динамической генерации страниц содержимого с помощью сценариев JavaScript), чтобы вставить часть содержимого страницы в сценарии, переместить сценарий включает заявление в нижней части страницы, до конца BODY тег.
HTTP/1.1 спецификация предполагает, что браузеры скачать не более двух компонентов параллельно в имя хоста. Если вы служите изображения из нескольких хостов, вы можете получить более двух загрузок происходить параллельно. В то время как сценарий загрузки, однако, браузер не будет запускаться любые другие загрузки, даже на разные имена.
Существуют также способы динамически создавать SCRIPT узлов и загрузить удаленный скрипт после загрузки страницы с помощью AJAX.

Externalise вы в JavaScript

Использование внешних файлов JavaScript приведет к более быстрой загрузки страниц, поскольку JavaScript файлы кэшируются в браузере. "Встроенные JavaScript в HTML-документах получить скачали каждый раз, когда HTML-документа запросу. Это может действительно уменьшить количество запросов HTTP сделано, но впоследствии увеличивает размер HTML-документа. Внешний JavaScript являются кэше браузера, размер документа HTML уменьшается, не увеличивая число запросов HTTP.
Обратите внимание, что, если пользователи на вашем сайте есть несколько просмотров страниц за сеанс, и многие из ваших страниц повторно использовать те же скрипты и таблицы стилей, есть большая потенциальная выгода от кэшированные внешние файлы.

Пакет Ваши файлы Javascript

В случае JavaScripts, в отличие от CSS, файлы могут хрустел, используя некоторые стандартные алгоритмы, что даст уменьшение размера файла, чем просто удаление пробелов и табуляции. Пример JavaScript-упаковщик может быть найден здесь http://dean.edwards.name/packer/

Избавиться от любых повторяющихся сценариев

Это очень необычно, что весь скрипты могут быть дублированы, но обзор в десятку крупнейших американских сайтов показывает, что две из них содержат дублирует сценарий. Дубликат скриптов, но, очевидно, снижает производительность, создавая ненужные запросы HTTP и впустую JavaScript исполнения.
Кроме того, во многих случаях, хотя сценарии имена разные, есть вероятность сценариев-дубликатов в пределах одной страницы из-за размера команды и количество сценариев.

Свернуть доступ к DOM элементов, где возможно

Доступ к DOM элементов JavaScript медленно так, чтобы иметь более гибкую страницу, вы должны:
• Кэш ссылки на доступ к элементам
• Обновление узлов "автономном режиме", а затем добавить их в дерево
• Избегайте крепления макета с JavaScript

Отдельные поведения от содержания и представления

Так же, как отдельная презентация (CSS / XSLT) от содержимого (XHTML / XML), мы должны отделить поведения (JavaScript). Это называется ненавязчивый Javascript. Так же, как ссылки на внешние файлы CSS, мы должны ссылки на внешние файлы JavaScript.

Вместо жесткого кодирования поведения в содержание (например, OnMouseOver, OnClick и т.д.), поведение должно быть динамически добавлены элементы, классы и уникальные элементы (ID) с помощью DOM. Основополагающий документ, содержание, должно содержать только допустимые XHTML / XML и не JavaScript.
Javascript должны увеличить содержание, добавив поведения. Содержание должно оставаться полезным и использовать без JavaScript (или без полной поддержки JavaScript).

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

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

Преимущества снижения веса страницы?

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

1. Страницы загружаются быстрее. Наиболее очевидное влияние снижения веса страницы в том, что страницы вашего сайта будут загружаться быстрее для посетителей, независимо от их скорости соединения.
2. Нижняя время загрузки страницы создания более комфортных посетителей. Посетители имеют меньше шансов стать разочарование и пойти в другое место, если ваши страницы загружаются быстро. С другой стороны, медленно загрузки страниц является одним из самых верных способов потерять посетителей и потенциальных клиентов.
3. Быстрая загрузка раз будет способствовать повышению конверсии. Больше посетителей останутся на вашем сайте больше времени. Больше из них в конечном итоге сделать покупки, подписавшись на рассылку новостей, или книга маркировки вашего сайта.
4. Ваше восприятие бренда будет увеличен. Возвращаясь клиентов и новых посетителей, так будет более склонен описывать ваш сайт (и бизнеса) как "профессиональные", если ваши страницы загружаются быстро.
5. Страницы с чистой, твердой код часто будут индексироваться более эффективно природных поисковых системах.
6. Страницы оптимизированы для веса может реально сэкономить полосу пропускания расходы на высокий трафик сайтов. 100000 страниц каждая из которых весит 150 Kb потребуется в два раза больше пропускной способностью от провайдера, чем 100 000 страниц в каждом весе 75 Kb. Для провайдеров, что взимать плату за пропускную способность или излишков, это снижение может создать значительную экономию полосы пропускания обвинения.

Рассмотрим следующие данные, опубликованные в докладе,

Если XML / XSL преобразования ваш Домиана, то есть времена, когда мы хотим peice динамического кода, который будет использоваться библиотека пункта (будет сделано повторного использования). Что я имею в виду, вероятно, можно было бы сделать более ясной в этом примере сценария.

Представьте, что вы создаете веб-сайт (с использованием XML, XSL transfroms конечно же), и большинство из страниц будет иметь модуль комментариев. Ну! то либо скопировать или вставить этот код в каждую страницу шаблона (который я не имею сказать, но сделать техническое обслуживание и доработку кошмар), или даже лучше, вы создаете INCLUDE файл, который может вырваться в том, где бы Вы не хотите его в вашу страницу ( а) ...
Так как мы создаем файл XSL INCLUDE и включить его в другой файл XSL? Вот как ...

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

1. food.xml - XML-файл данных, на которых преобразования будут применяться
2. food.xsl - основной файл XSL, который превратит наш food.xml
3. inc_fruits.xsl - XSL включает файл, который будет оказывать фрукты данных
4. inc_vegtables.xsl - XSL включает файл, который будет оказывать vetetables данных

Я не думаю, что я во многом объясняют, коды для вышеуказанных элементов, будут понятны ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ XSL: шаблоны>
</ XSL: стиль>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Скачать все вышеуказанные файлы здесь (252 скачиваний)