Выбор занятия
Выберите текущее занятие
Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).
Графика и оптимизация сайта
Спрайты
Социологические исследования и личный опыт работы в интернете убеждает в том, что пользователи ждут загрузки станицы несколько секунд, и если за это время страница не загружается, они просто покидают ее. А ушедший пользователь - это упущенный клиент и уменьшенный доход.
Так же время загрузки является одним из параметров поискового алгоритма Google, в связи с этим уменьшение времени загрузке необходимо для более высокого показателя при выводе страницы в результатах поиска.
Необходимость увеличения скорости загрузки возникает и при повышении посещаемости сайта, если сайт имеет больше тысячи, а иногда и десятка тысяч уникальных посетителей в день, это сильно увеличивает нагрузку, с которой может не справиться даже хороший хостинг. Выходом из данной ситуации может быть смена хостинга на более быстрый или уменьшение времени загрузки сайта.
Оптимизация графики дает один из наибольших приростов производительности при загрузке сайта. Используйте графические файлы только тогда, когда это действительно нужно и следите за тем, чтобы ваш файл был оптимизирован. Для больших многоцветных изображений, например, таких как фотографии, рекомендуется использовать файлы формата jpeg. Для остальной графики наиболее подходящим форматом является формат png. Данный формат был разработан специально для интернета и является более экономичным, чем gif, но при небольших изображениях, таких как иконки, gif может быть более предпочтительным форматом. Так же файлы формата gif поддерживают анимацию. Изображения рекомендуется сохранять с прогрессивной (чересстрочной) разверткой.
Каждый HTTP-запрос это лишнее время, потраченное на загрузку страницы. Размер и количество HTTP-запросов необходимо максимально сократить, для хорошего показателя времени загрузки сайта.
Используйте так называемую карту изображения (Sprite) – т.е. объединение всех изображений использованных на странице в одно. И настройте его отображение при помощи CSS команд background-image и background-position. Размер изображение равен сумме размеров всех изображений, но при его загрузке используется только один HTTP-запрос.
Полезные Online инструменты
Tools.pingdom.com Англоязычный сервис проверки времени загрузке сайта. Выводит подробную информацию о времени загрузке вашей страницы, иерархию ссылок, время начала загрузки каждого отдельного элемента, размер элемента и т.д. Еще одним преимуществом данного сайта является возможность сохранения результатов проверки.
Google webmasters tools Сервис Google для Web-мастеров имеет функцию проверки скорости загрузки сайта. Для его использования необходимо добавить свой сайт и выбрать инструмент Экспериментальные функции – Эффективность сайта.
Сервис от Yahoo позволяет оптимизировать графиеские файлы. После оптимизации они могут занимать в полтора-два раза меньше исходного объёма.
Page Speed - Плагин для Firefox от Google проводит тестирование вашего сайта на скорость загрузки страницы и выдает рекомендации по улучшению. Для корректной работы необходим плагин Firebug.
Yahoo! YSlow - Еще один плагин для Firefox в этот раз от Yahoo, так же помогает отценить скорость загрузки сайта и так же для его работы необходим Firebug.
Speed Tracer - Плагин для Google Chrome, выдает информации о скорости загрузке сайта.
Один из способов акцентирования внимания посетителя страницы на нужном Вам месте - это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к "особым" местам в тексте.