Производительность Blogger или тяжёлая галерея для блога

Настало время для очередного опыта. Сегодня в полевых испытаниях будем проверять на прочность Blogger при помощи тяжёлой галереи на jQuery.
Плагин-галерея называется FancyBox и представляет собой кучку небрежно разбросанных на странице фотографий. Каждый элемент, будь то снимок или любая картинка, можно брать мышью и перемещать в пределах, позволенных областью.

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

Так... исходные данные определили, возьмёмся за галерею. Она использует jQuery, поэтому эта библиотека должна уже присутствовать в блоге. Установка скриптов со стилями в Blogger расписана здесь.

Качаем архив на странице разработчика и смотрим содержимое:

В папке css лежит таблица стилей для странички index.html (демо). В fancybox находятся графические элементы - кнопочки, полоски, тень, а также таблица стилей jquery.fancybox-1.2.6.css и скрипт jquery.fancybox-1.2.6.pack.js. Папка images содержит набор фотографий курортов для демо. В папке js три скрипта - jquery-animate-css-rotate-scale.js, jquery-css-transform.js и main.js.

Первая задача - положить все картинки (в количестве 15 штук) из папки fancybox на внешний хостинг (пикассу) и прописать их в файл jquery.fancybox-1.2.6.css. Я уже это сделал, можете воспользоваться моим файлом.

photo 1

photo 2

photo 3

photo 4

photo 5

Всё это добро, вместе взятым образом, должно быть прописано вот так:

<link rel="stylesheet" type="text/css" href="http://хостинг/fancybox/jquery.fancybox-1.2.6.css" />
    <script type="text/javascript" src="http://хостинг/fancybox/jquery-css-transform.js"></script>
    <script type="text/javascript" src="http://хостинг/fancybox/jquery-animate-css-rotate-scale.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://хостинг/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
    <script type="text/javascript" src="http://хостинг/fancybox/main.js"></script>

Дополнительные стили можно оставить на странице для быстрой настройки (или скопировать в предыдущий файл jquery.fancybox-1.2.6.css):

<style>
#gallery {
    height:600px;
    position:relative;
    width:100%;
}
#gallery div,#gallery div a {
    height:128px;
    overflow:hidden;
    width:192px;
}
#gallery div {
    background-color:#fff;
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:2px solid #000;
    left:250px;
    padding:5px;
    position:absolute;
    top:200px;

    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;

    -moz-box-shadow:3px 3px 4px #444;
    -webkit-box-shadow:3px 3px 4px #444;
    box-shadow:3px 3px 4px #444;
}
#gallery div a {
    display:block;
    text-indent:-1000px;
}
</style>

Html код для вставки на страницу выглядит так:

<div id="gallery">
    <div id="1" style="background-image:url(http://3.bp.blogspot.com/-mg8oJ2DreKI/TqO7nuD4XoI/AAAAAAAAGf0/xJVNVJjgOH4/s1600/apple.png)">
        <a class="fancybox" href="http://1.bp.blogspot.com/-p0exNkpyXPI/TqO7oPH2DiI/AAAAAAAAGf4/EbM2jDLBGX4/s1600/apple256.png" target="_blank">photo 1</a>
    </div>
    <div id="2" style="background-image:url(http://1.bp.blogspot.com/-h-FxQzSeWG8/TqO7ojiILNI/AAAAAAAAGgA/9G6KAlEEpFk/s1600/cake.png)">
        <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5UpFQ5jZXyeUHk_kKUY4IMNIhIVLKVOl4bkX2PKJTwWRPzOdKzFVbVeMB9bu9yR9GQN1p3CnvTRhn_GLcumY5cvRJMBiOGK9Nh2yEVpGEtVE5Uce3dS7jL9T58MAN_pcgW6aRad90MyI/s1600/cake256.png" target="_blank">photo 2</a>
    </div>
    <div id="3" style="background-image:url(http://2.bp.blogspot.com/-c4IxL90jRzc/TqO7qHsOTCI/AAAAAAAAGgU/T5MMm8RXdiw/s1600/chicken.png)">
        <a class="fancybox" href="http://4.bp.blogspot.com/-QDQWTX3W11Q/TqO7rixJHbI/AAAAAAAAGgY/Y4fCZgFE1Aw/s1600/chicken256.png" target="_blank">photo 3</a>
    </div>
    <div id="4" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1OK7ETTxSd3rYgWszA9T593tM6v0o4AYDmB09o5I-AdgajdyI76uO67qFbwLWwYs7YSFGjTCLRkoJlsnJT7O22ZYSFoVK7VgXEgjxtfGFv-Rnl_dMcGnYaXwJqZ-09pjlR3dpwWtisw/s1600/crawfish.png)">
        <a class="fancybox" href="http://4.bp.blogspot.com/-UKNhaL0Sl2A/TqO7tHVjy8I/AAAAAAAAGgo/RdNmg4ZXPIM/s1600/crawfish256.png" target="_blank">photo 4</a>
    </div>
    <div id="5" style="background-image:url(http://2.bp.blogspot.com/-v8V6t8mihNA/TqO7tlUGO0I/AAAAAAAAGgw/51rwItT0JOM/s1600/sandwich.png)">
        <a class="fancybox" href="http://4.bp.blogspot.com/-3itcFigZupU/TqO7uR1A9OI/AAAAAAAAGg4/V9sN96b892w/s1600/sandwich256.png" target="_blank">photo 5</a>
    </div>
</div> 

Специфика правильной установки картинки такая:
в каждой строке контейнера прописывается путь к маленькой картинке (style="background-image:url) и к полноразмерной (a class="fancybox" href=).

Как и обещал, завершаю заметку измерением скорости загрузки страницы (ссылку на сервис давал выше) с установленной галерей:

Прекрасный результат, браво Blogger! Какой ещё другой движок бесплатно так хорошо справится?







PS:
И небольшое сравнение скорости работы этой страницы, точнее галереи FancyBox (определял визуально), в трёх браузерах из-под Windows (машина: двуядерный турион, засранная виндоус "семёрка"):

Firefox 7.01 - средне, тормозит

Opera 11.52 - плохо, почти пошагово

Chrome 14.0.835.202 - нормально