Производительность 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq027dZPgYIou7YDfnU9XZUOI9-dwbBeEYsYHV9Rr9C3PkFzBrRlrORSH_yKcPjoyp02pZfHTLIh3-vXSWD9LxfW7uXL-pj_OTLeCqhyphenhyphen9YHwoRDMnY9Vhnl8gXLWmCsgfNDNspu7FHp0I/s1600/apple.png)">
        <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7yU-q_-_9cDyzrjLIJ2qFazMDFKjJCnLdMItR0QXgEV5OLbZH_u8_6fy6ohh14cNxKb3sGB0VRkSMstzFhxXFbldoB-RYMucZG2tj0vOmCn9bkk2MAwTtPFBu9Vrfcb6u5e8qEO2lBE/s1600/apple256.png" target="_blank">photo 1</a>
    </div>
    <div id="2" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg5OlAntCE50griwK42JhrIcoQD2FEs14rpzfbhSR1b8QwQgJR12IM4WgeqVg_bEYdQJ3K2Zz75KDCO5RNxQR4VKIDmBUlPBGDM-uVWCWdUmBpMdoUA3E-_yZ6sWjSqR2b_MSmupybKTs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsMNOTHGhv2LComrxWUFOrkCEFId9sut661tqlcOzcuy7brfaNQTqWO4y-RjPM4uS_2Fu-suJXPpRs6ItDKVFPgaLzaMurWt22rSCr7rBjfduVIb9s-wsKvY9ZXV7k4zeV_NqRLRJCJHQ/s1600/chicken.png)">
        <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBI3GZAk-WSKvk856BBm9xsWdPqLk3vHOcFq_kIZ1iJfRSFvLLJb7LpuEuHB76zzIdyRiJnatC3HK600Nk1AxezSyRnhyphenhyphenXij6OLfmYUnmDPZO5a_rhi7QMtW3dSJ-4fAHlJeYimDBEExA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sfsbH4I6yfgJ-89TfG8zPZ6SXVFeqJIWeag3Px0Pnmz4uGwpNXXDtgJxxbTpDPSqlDvdrsrrjCvCjfuqp8B6x7PxoHgzhzPT3Y1kGLltNKvyagM8iQn6dBCM9K2Py77v50goRAPAdTc/s1600/crawfish256.png" target="_blank">photo 4</a>
    </div>
    <div id="5" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmbfKO5q8wlAwGYdptDTV10nW9bZ7vQD-ektDshZenJSopfqhRqSl3Ol9TqMWK2uCXfL86p7G_WvplSFPltjYPyZyAdbehtJOpxkcIqBDaNYtl5y-YBlqShW4UC2zu1DIj9KxZdgNSpTk/s1600/sandwich.png)">
        <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSddldQlfk96LR_RURxKVsfOrGjaVdWmyqdynyPcW39ASZ8J3JvKdaX0t4PWSsMxk2FlyehexpP3S-_pDK6oPef-s8gFqOGlYqeN39LateHu02vVd-SFCznQgTuXmX6BcT8nKFMcIsiE4/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 - нормально