На сегодняшний день безлимитный быстрый интернет давно не предел мечтаний и всё же частенько качество услуг многочисленных интернет провайдеров оставляет желать лучшего. Сегодня мы поговорим о довольно значимом критерии веб сайта – о скорости его загрузки.
Чем больше занимаюсь веб дизайном, тем больше склоняюсь в сторону минимализма. До смены провайдера часто случались ситуации, когда зайдя на модный веб сайт, напичканный флешем и кучей java-скриптов, я просто не дожидался его загрузки и с негодованием закрывал вкладку браузера. Итак…
10 советов по проектированию web-сайта
1. Сводим к минимуму используемую графику. Основной «вес», а значит и торможение, несёт на себе графика. Красивый и яркий сайт с массой графических элементов выглядит красиво, не спорю, но многие элементы можно заменить на html (то же самое скругление углов у плашек, легко выполняется с помощью CSS стилей) или вовсе от них отказаться. Взгляните на всем известных гигантов Яндекс, Google, ebay – минимум графики, поскольку скорость загрузки имеет более важное значение нежели графическое оформление.
2. Оптимизация изображений. Используем графику в формате GIF и JPEG, кстати у формата GIF есть такое полезное свойство, как «черезстрочная развёртка» т.е. изображение разбивается на два полукадра (или поля), составленные из строк, выбранных через одну. Это позволяет увеличить скорость загрузки изображения, поскольку оно загружается как бы поэтапно. Всегда можно уменьшить количество цветов (в пределах разумного) так, что графика практически не потеряет в качестве, а вот размер изображения заметно уменьшиться.
3. Использование таблиц в вёрстке. При оформлении меню, футера или других элементов зачастую можно использовать табличную вёрстку, а ячейки просто залить цветом с помощью CSS, если грамотно подойти к этому методу, то можно добиться удивительных результатов. Этот пункт относится больше к вёрстке, но и дизайнеру не следует забывать о такой возможности.
4. Минимум GIF анимации. Постараться свести к минимуму, а лучше вообще отказаться от анимации в формате GIF. Для этого есть две причины – довольно неказистая графика и неоправданно большой вес. Если уж очень хочется нужно, то маленькая мигающая иконка вполне справиться с тем, что бы привлечь внимание посетителя.
5. Иконки. Зачастую можно встретить сайты с навигацией, которая просто перенасыщена графикой, это красиво на первый взгляд, но в действительности эта графика отвлекает посетителя от поиска информации, намного лучше добавить небольшие, простые но информативные иконки.
6. Использование бесшовного фона. На многих сайтах игровой тематики, да и не только, часто в качестве фона используется огромное изображение. Смысловой нагрузки это изображение не несёт, поэтому при необходимости лучше использовать бесшовный (маленькое изображение дублирующееся по горизонтали и вертикали) фон, а лучше всего залить фон цветом при помощи CSS.
7. Активно используем стили CSS. Очень часто можно отказаться от java в пользу CSS ролловеры, текстовые эффекты, выпадающее меню и многое другое, благо нынешние веб стандарты это позволяют.
8. Не злоупотребляйте Flash-ем. Заходя на ресурсы «топовых блоггеров» обратите внимание на скорость загрузки, тут даже не столько от интернета зависит скорость, сколько от самого компьютера. А всё дело в обилии Flash баннеров. Хотя от этого никуда не денешься – деньги все любят, но всё же старайтесь не злоупотреблять Flash элементами хоть в самом дизайне.
9. Чистый CSS и HTML. Не забывайте чистить и проверять код, для этого есть куча сервисов и валидаторов, как онлайн так и десктопных. Даже если просто убрать пустые строки в таблицах CSS, то уже аппаратно можно зафиксировать повышение скорости загрузки страницы.
10. Контролируйте скорость загрузки страница на этапах создания. При помощи упомянутых валидаторов и разнообразных сервисов можно контролировать скорость загрузки страницы и получать подробные отчёты, благодаря которым вы сможете оптимизировать скорость загрузки ещё на этапах создания.
На этом всё, до новых встреч 