Что нужно знать

• Загрузка страницы начинается с получения html кода, после идет рендеринг
• При старте рендеринга начинают асинхронно грузиться: css и js из head, img из тела страницы и картинки из css в head. На этом шаге есть нюанс: < body> не начнет отображаться, пока не будут загружены все JS из head. До этого пользователь видит белый экран. А т.к. мы грузим уже целую кучу всего (ненужных сейчас JS и все каритнки), пре небольшой скорости белый экран может висет долго или очень долго. В связи с этим имеет смысл продуманно подключать скрипты, стили и картинки:
  • Вынести все JS перед закрывающим < /body>: jQuery - по возможности, остальное обязательно
  • Разделить CSS на те, что задают разметку, и те, что проставляют в background изображения. Разметка идет в head, background - перед закрывающим < /body>
  • Все стили из футера подгружать через < script type="text/javascript">document.write()< /script>. У всех блоков с фоновым изображением должен быть указан фоновый цвет в тон паттерна и объявлен как в style.css, так и в style_bg.css
  • Все изображения должны быть прогрессивными (сначала загрузка в плохом качестве и постепенный показ в хорошем). PNG тоже так умеет.
  • Использовать lazy-load для всех изображений, которые не видны на первом экране и которым не важна индексация.

A:hover, A:active

У a:active стиль должен быть независим от стилей hover, т.к. события разноплановые

Modernizr

Modernizr нужно подключать в head, иначе не сработает в ИЕ

Responsive slider

Понравился Flex slider 3