1. Идея с картинкой была первой, которая пришла в голову, но показалась неудачной с точки зрения user experience. А где именно можно подсмотреть данную реализацию?
2. По CSS получается процентов 10-15 включено в html (отображение первого экрана), остальное css в одном общем минифицированном файле (подключается в body). Пробовал этот вариант на представленном сайте - работает хорошо.
3. В принципе вариант с маленьким js-слайдером (без jquery) тоже рассматриваю. А можете сказать, чем js-слайдер будет лучше css-ного?
4. Может iframe и вариант, только все равно не могу вот тут cssslider.com/demos.html найти слайдеры с js, про которые Вы говорите? Можете в конкретный url ткнуть, пожалуйста?
Алексей, благодарю за комментарий.
1. Разумеется, картинки для веба уже оптимизированы.
2. Суть вот в чем. Если слайдер на JS, то скрипты (как скрипт галереи, так и jquery) нужно подключать в head или верхнюю часть body (иначе галерея будет вставляться в уже отрисованную страницу). Соответственно, при анализе страницы браузер, дойдя до скриптов, останавливает анализ и скачивает и выполняет скрипты, а это занимает немалое количество времени. Кроме того, скрипт (равно как и css-файл), блокирующий отрисовку первого экрана страницы, - это плохая практика, по мнению гугл, со всеми вытекающими.
Если же сделать css-слайдер, то css-код (по сравнению с jquery, он совсем небольшой), необходимый для его работы, встраиваем в html-страницу (так называемая приоритизация css, также пропагандируемая гуглом) и получаем отрисовку первого экрана без каких-либо блокировок.
4. cssslider.com/jquery-carousel-slider-33.html вроде работает без js (не смотря на url). Попробуйте отключить в браузере js, ну и в средствах разработчика видим, что нет js... Все их слайдеры не проверял, впрочем, может где-то и есть js.
Спасибо за комментарий. А можете назвать пару причин? В текущем варианте (со скриптом) загрузка страницы блокируется до загрузки и выполнения скрипта и jquery. Как минимум на это ругается google page speed, "предлагая" перенести скрипты в футер. Если же так сделать, сначала загружается вся страница, а через полсекунды появляется слайдер в ее верхней части. Вариант явно неприемлемый для пользователей. С целью повысить рейтинг в google page speed (а также скорость загрузки, конечно) и возникла идея отказаться от скриптов в слайдере.
2. По CSS получается процентов 10-15 включено в html (отображение первого экрана), остальное css в одном общем минифицированном файле (подключается в body). Пробовал этот вариант на представленном сайте - работает хорошо.
3. В принципе вариант с маленьким js-слайдером (без jquery) тоже рассматриваю. А можете сказать, чем js-слайдер будет лучше css-ного?
4. Может iframe и вариант, только все равно не могу вот тут cssslider.com/demos.html найти слайдеры с js, про которые Вы говорите? Можете в конкретный url ткнуть, пожалуйста?