Как я свой блог ускорял

Мчится впередРешил немного оптимизировать код шаблона, чтобы ускорить загрузку блога. Так как в последнее время сайт стал подтормаживать и загружаться медленно. Почитал статей на эту тему и пришел к выводу что тоже могу внести посильную лепту в этом вопросе. Ибо многие авторы или не понимают разницы между оптимизацией шаблона и оптимизацией блога в целом, или просто стремятся "налить воды" побольше... В общем подумал я, и решил запостить заметку о том как я код шаблона оптимизировал.
  Начну по-порядку. Оптимизация - это, если быть кратким, улучшение, ускорение, сокращение ненужной массы, на деле - воплощение в жизнь многих качественных признаков. Читаю статью про оптимизацию шаблона, и тут, наряду с парой дельных советов, мне предлагают добавить в HTML моего блога еще с десять-двадцать строчек кода какой-то штучки сомнительной необходимости, прикрутить пару тройку виджетов и еще бог знает чего. Возникает вопрос - зачем? Да, возможно это поможет улучшить пользовательский интерфейс блога и пользователю будет удобнее, но ускорит ли это блог и какое это имеет отношение к оптимизации шаблона? Не понятно...
  А между тем, вся суть оптимизации и ускорения загрузки блога сводится к нескольким простым приемам. Причем все они, в случаи с Blogger, выполняются только на клиентской стороне, т.е. в самом коде шаблона блога. Итак, начнем-с пожалуй.
1. Ужимать, оптимизировать изображения (картинки).
  Перед загрузкой изображений в блог пропускаем их через специально созданные для этого программы, например ScriptPNG и Image Catalyst - просты в использовании и дают отличный результат.
  Подробная информация о них есть в статье про оптимизацию изображений, там же можно скачать архивы с этими программами по прямым ссылкам.
2. Использовать в оформлении элементов графики спрайты.
  Уменьшаем количество запросов к серверу, избавившись от множества ссылок на изображения в коде шаблона, при помощи создания спрайтов - изготовления одного большого изображения, в котором расположены все иконки, кнопочки, стрелочки и т.д. для оформления элементов блога, везде где это возможно.
3. Оптимизировать скрипты.
  Большие скрипты подключаем удаленно, для Blogger есть два варианта через Google code, через Google сайты.
  Что касается скриптов расположенных внутри шаблона, тут тоже можно оптимизироваться, убрав ненужные пробелы, переносы и комментарии.
Например, если вы такой скрипт jQuery:
<script>
$(document).ready(function(){
    $('.close').click(function(){
       $('.hidescreen,.load_page').fadeOut(300);
    });
    $('.hidescreen, .load_page').fadeIn(100);
       $(window).load(function () {
       $('.hidescreen,.load_page').fadeOut(600);
    });
});
</script>
  Запишите в одну строку, вот так:
<script>$(document).ready(function(){$('.close').click(function(){$('.hidescreen,.load_page').fadeOut(300);});$('.hidescreen, .load_page').fadeIn(100);$(window).load(function(){$('.hidescreen,.load_page').fadeOut(600);});});</script>
  Это никоим образом не повлияет на выполнение скрипта, но при этом, строк, ненужных пробелов и переносов в HTML коде вашего блога станет меньше, а это уже плюс.
Как напомнили в комментариях, также не стоит каждый скрипт записывать отдельно и каждый оборачивать в тег <script>:
 Так делать НЕ надо
<script>
 // ТУТ СКРИПТ
</script>
<script>
 // ТУТ ЕЩЕ ОДИН СКРИПТ
</script>
 Лучше делать так:
<script>
 // ТУТ ОДИН БОЛЬШОЙ СКРИПТ
</script>
 Тоже самое касается и jQuery с $(document).ready(function(){...}, не нужно каждый скрипт помещать в эту обертку, достаточно ОДНОГО раза и внутри размещать все остальные функции.
<script>
(function($) { /*первая строка*/
 $(function() {
  // ТУТ ОДИН БОЛЬШОЙ JQUERY СКРИПТ
 })
})(jQuery);
</script>
4. Сжимать таблицы стилей.
  Преобразовываем CSS в итоговую html-разметку, популярно отдавать весь код в одну строку, без лишних пробелов и переносов.
Например:
Обычная запись:
.box {
 position: relative;
 background: #000;
 color: #fff;
 margin: 0px;
 padding: 10px;
 height: 160px;
 width: 250px;
}
 Сжатый CSS:
.box{position:relative;background:#000;color:#fff;margin:0px;padding:10px;height:160px;width:250px;}
Сжатую запись кода лучше использовать в том случаи если стили к шаблону подключаются удаленно. Если же CSS находится в коде шаблона, то лучше ограничиться тем что просто убрать начальные и конечные пробелы.
В ходе эксперимента с CSS в шаблоне, мной была выявлена странная особенность: когда я сжал стили внутри шаблона - вывел их в одну строчку, убрав переносы и пробелы, то позиции блога в выдаче Google начали резко падать. Хотя загрузка блога в целом ускорилась, но... Недельку подождал, потом вернул "столбики" обратно (только пробелы начальные/конечные убрал) - ситуация стабилизировалась.
 Чем это могло быть вызвано, для меня так и осталось загадкой, может таким образом Google борется за чистоту кода? Не понятно...
 Что касается Яndex, то ему во время эксперимента как-то все равно было.
 Также для разгрузки кода шаблона, настоятельно рекомендуют, выносить CSS во внешний файл и подключать удаленно,
<link rel="stylesheet" type="text/css" href="my_blog.css">
я эту идею поддерживаю.
 Но с Blogger меня смущает отсутствие надежного хостинга, для этого. Поэтому, пока что оставил все как есть - стили внутри шаблона.
5. Оптимизация кода шаблона.
 Тут все просто, когда дизайн уже доделан и кардинальных изменений проводится не будет, можно приступить к купированию всего не нужного и не используемого HTML кода в шаблоне. Так как код шаблона сделан универсальным для самых разнообразных решений, то многое из того что в нем есть, конкретно вам, либо не нужно, либо не используется, а вот что именно - каждый решает для себя сам.
 Рассказываю, что говорится "на пальцах". Например по Blogger, то что находится в разделе кода шаблона под заголовком /* Variable definitions и до строки /* Content - это варианты настройки через "Дизайнер шаблонов" и стили блога по умолчанию. Я прописал для всех блоков свой CSS внутри шаблона, вопрос: зачем мне пачка этих кодов? Весь этот раздел я благополучно удалил. Едем дальше, у меня в блоге используется только одна боковая колонка - правая, вопрос: зачем мне разметка левой? И от неё я тоже избавился. Любимая тема всех оптимизаторов и "СЕО-умников" - это ссылки быстрого редактирования, скажу честно - да, кое-где я их удалил, но где-то и оставил, ибо некоторые гаджеты, например меню, мне легче корректировать "по-ходу". Ну, и так далее, только при всем этом нужно быть внимательным и не забывать сохранять резервную копию шаблона.
 Вот такие простые и универсальные моменты оптимизации шаблона.
Маленький бонус в виде оригинала полноразмерной обины на рабочий стол под названием "Скорость". Размер 2560х1600.
СКАЧАТЬ JPG
©http://magentawave.com

33 комментария:

  1. Это моя больная тема, спасибо за познавательный пост!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста :). Ковырял тут на днях шаблончик , решил запостить, а то что-то и не было у меня по-этому поводу ничего.

      Удалить
  2. Спасибо, пост отличный. Тоже беспокоит скорость загрузки. Дополнительные гаджеты удалять не хочется, но при этом хочется, чтобы все было шустренько!

    ОтветитьУдалить
    Ответы
    1. Да, когда количество плавно начинает переваливать за 100 уже потихоньку начинаются тормоза, а если еще и приблуд левых много, то только и жди пока они все подгрузятся... Но честно говоря для халявной платформы, скорость загрузки очень приличная, Google все-таки :)

      Удалить
  3. Хорошая статья. Из своего опыта - Гугл Код не надежен. CSS не рекомендую ни выносить, ни сжимать. Что касается скриптов - их по возможности нужно размещать перед закрывающимся тегом body. Квикэдит я удалил везде где только можно. Спрайты - хорошее дело. Долгое время я не решался добавлять коды кнопок лайк и ретвит. Коды этих кнопок, а особенно скрипт кнопки Вконтакте, сильно тормозят загрузку. По максимуму нужно выкинуть коды разного рода счетчиков и рейтингов.

    ОтветитьУдалить
    Ответы
    1. Спасибо , приятно, но из личного опыта, позволю не согласится с некоторыми моментами. Что касается Гугл код, то сколько им пользуюсь - проблем нет, (может еще будут - посмотрим).
      CSS сейчас сжатый, Ctrl+U покажет насколько, загрузка блога ускоряется на глазах , в таблицу - 50кб, в строку - 40кб - мелочь, а приятно, и как я уже сказал - посетелям пофиг, браузеру тем более, а скорость выше.
      На счет скриптов - в корне не согласен - смотря что за скрипты, они тоже разные бывают, все зависит от значимости скрипта и возложенных на него функций.
      Кнопки у меня подгружаются только в постах и не грузят остальные страницы. Но то что притормаживают - бывает...
      На счет счетчиков, это да. Но пару я оставил, в хорошие дни душу согревают :)

      Удалить
  4. С Гугл код проблем нет -). И кто мешает купить вдс? Скрипты проблематично в body пихать из-за Яндекса. Тот же Гугл с Блогспотом найдут в вашем скрипте вражеский беклинк и дадут по попе, такая вероятность есть. Мелкашные скрипты кладём в один файлик разом и забываем. Это собственно требования Яндекс Директ. Захотите дать рекламу, поймёте, о чём я. Да и в РСЯ не возьмут, если у вас 20 строчек ссылок хоть в head, хоть в body. Кстати, учитесь применять скрипты только на нужны страницах, нет смысла их таскать по всему блогу.

    ОтветитьУдалить
    Ответы
    1. Полностью согласен! Как раз и пост дополнил, давно хотел по-этому поводу добавить.
        Но помимо всего прочего стоит сразу определить и понять что надо, а что нет, будет возникать меньше проблем в будущем. На счет РСЯ не знаю, я туда как-то не рвусь, пока что, как-то фиолетово что там за заморочки, да и в AdSense пока не плохо кормят :).

       "учитесь применять скрипты только на нужны страницах" - чему тут учится? Как обернуть гаджет или даже просто сам скрипт в условный коммент, или запостить его прямо в сообщении? =) На ДЕМО-блоге только так и делаю, а тут, сейчас обновлюсь, в очередной раз, окончательно и всю эту скрипто-кадабру снесу на Google Code :)

      Удалить
  5. Замечательно. Частично, как написано, я сделал давно. Спасибо, что разъяснили какие ненужные участки кода можно безжалостно удалить. Сделал. Интересует разметка колонок. У меня их нет - можно тоже благополучно отправить в корзину. Не подскажите как ее найти?
    Вопрос, касаемый JS: если в коде перед /head присутствуют ссылки на Google Code, где лежат плагины JQuery, JQuery easing, карусели - их как-то можно объединить (читал статью Aldous'a)?
    Все стили перенес в шаблон - их не так и много уж. Заранее спасибо за ответ.

    ОтветитьУдалить
    Ответы
    1. Колонки, это нынче тег <aside> ну и окружающие его column-right-..., column-left-..., я лично когда такими делами занимаюсь, беру код и кидаю его в Notepad++, ставлю синтаксис XML и произвожу купирование, так удобнее и виднее что к чему. На счет объединения плагинов - лично экспериментов не проводил, тут речь идет об объединении в один документ собственных, каких-то мелких скриптов, тех же вызовах плагина, но теоретически, сами плагины тоже можно закинуть в один файл, но я лично такого не делал.

      Удалить
    2. Всё в один файлик, тут без вариантов, иначе серьёзные сервисы будут посылать далеко и надолго. По требованиям все js должны исходить с одного, домашнего, хоста, ну может один-два с паблика. А когда блог под одним доменом, хосты лежат на других доменах, картинки на третьих + ещё и домен с редиректом - это откровенное дилетантство. Тут даже в эдсенс посылают не смотря на то, что вроде мы с ними под одной крышей.
      Хотите проверить? Пошлите запрос на предоставление доступа к апи в Яндекс Маркете. Там всё объяснят по душам.

      Удалить
    3. Причем тут все это? Если речь идет об ускорении загрузки блога в браузеры пользователей, а не о том "почему меня послали из AdSense и не приняли в РСЯ".

      Удалить
    4. Еще такой вопрос, касаемо оптимизации шаблона: если не используется мобильный шаблон, можно ли ответственный за это код удалить? Он же не нужен.

      Удалить
    5. Думаю да. Сейчас стараются делать "резиновые" шаблоны, а положение элементов "тасуют" с помощью JS, браузеры в современных телефонах это все прекрасно понимают.

      Удалить
    6. В CSS-стилях в разделе "Columns" присутствуют элементы ".column-right-inner", ".column-right-outer" и, соответственно аналогичные, но для левой колонки. Их я решил тоже убрать, так как исполняющие элементы удалены (так, как ты мне рекомендовал, сделал). Вопрос: перед теми элементами, что я описал выше, в CSS стоит вот еще что - .main-inner, т.е. получается вот такая строка .main-inner .column-right-inner {. Это тоже убирать?
      Никак не могу включить подсветку синтаксиса в программе Coda. Может знаешь?

      Удалить
    7. Пользуюсь Notepad++ с Coda дел не имел пока. Что касается .main-inner, так это вроде уже общий контейнер для всего, посмотри код через браузер ("Присмотр кода элемента" и т.п.) там сразу видно что к чему. Но вообще тут надо по стилям смотреть, ты ведь уже запущенный блог ковыряешь :), просто чтобы не развалилось все когда удаляешь какой-нибудь контейнер.

      Удалить
    8. Я бы пользовался Notepad++, но, к сожалению, этой программы нет для Mac.
      Да, я это все понимаю. Буду разбираться. Думал, ты мне так сразу ответишь - ты ж лучше меня в CSS шаришь. Просто остались стили к колонкам, их-то надо удалить, да грамотно!

      Удалить
    9. Ну если ты блоки боковых колонок удалил, то стили для них уже ни к селу ни к городу :) Просто если у тебя есть какие-то общие стили удаляй те селекторы из списка, блоки которых ты уже удалил из шаблона, чтоб их браузер каждый раз не искал не искал.

      Да и в слепую я тебе тоже могу насоветовать, дай боже, сам понимаешь... :) покури шаблон, посмотри что надо что нет, и корректируй CSS по-ходу, не забывай тестить в разных брузерах, если на Мас сидишь, посмотри через Винду тоже, бывает что по-разному отображаются некоторые свойства. А там если че, спрашивай.

      Удалить
  6. Ну, вот в стилях остались селекторы, перед которыми прописан ...-inner. Вот и ломаю голову, что с этим делать. Понятное дело, что теперь они не рабочие. Но ты же сам писал, что ненужный код не должен находиться в шаблоне, поэтому ему место в корзине.
    Просматриваю шаблон и понимаю - лишнего кода еще предостаточно. Нужно над этим работать, оптимизировав всех и вся!
    На компе стоит Safari и Chrome, браузеры вроде все корректно отображают. Windows нет. И слава Богу! Internet Explorer - больная тема. Вечно все коряво отображает. :(
    Вчера решил исправить один баг - на главной странице написано "коммент.", когда открываешь страницу с постом - нормально и склоняет тоже адекватно все. Начал работать с шаблоном, нашел несколько вхождений ответственного за это кода, начинаю исправлять - никак: пишет, что невозможно. Может знаешь как решить эту проблему?

    ОтветитьУдалить
    Ответы
    1. Если этих блоков нет, то и селекторы их не нужны. И не забывай главное правило любой оптимизации - не перестарайся! Загрузи хотя бы Firefox для приличия, если уж тестить собрался. Safari и Chrome на одном движке пашут - webkit, по-этому в принципе тестит в них обеих особого смысла, тем более сейчас, нет,
      "Коммент." я , как видишь вообще убрал и особо этот момент не ковырял, тут надо сам шаблон курить.

      Удалить
    2. Лишние элементы, не задействованные в блоге, удалены, CSS проанализированы, проработаны, изображения кнопок объединены в спрайты, примочка, рекомендуемая Google - "PageSpeed", скачана и установлена. После анализа блога она рекомендует сжать css и js при помощи gzip или deflate. Прочел цикл статей на эту тему в блоге "Кто на новенького?", но там описывается как все это сделать на WP, с Blogger - непонятно. Аналогичное дело обстоит с кэшированием браузера. Как его грамотно настроить?
      Бывалые блоггеры рекомендуют вынести все скрипты из шаблона. Аналогично и CSS. Т.е. извне к ресурсу должны быть подключены два файла. У нас у blogger'ов опять все как-то неясно.
      В общем, примочка немного ругается, оценив мой блог на 90 из 100.
      Вот решил узнать точку зрения людей более компетентных, чем я.
      Жду, Заранее благодарен.

      Удалить
    3. На счет выноса это ж уже обсуждалось, две ни две, но из вне, чтоб в шаблоне кода не было. Вопрос для Blogger не в том как сжать, а где разместить, если JS можно на GoogleCode запихать то с CSS дела похуже, надо где-то "приспосабливаться" или раскошелится на собственный хост. Насчет кеширования не совсем понял.
      Я тут масштабное обновление творю, по-ходу затяжное, как закончу скрипты вынесу, а CSS пущай тут пока болтается. Можешь ради прикола посмотреть исходник, увидишь на сколько сжатый стиль :)

      Удалить
    4. Хочется, чтобы все "до ума" было. Может быть правда на хостинг раскошелиться?
      Оценил - круто!
      Я вот себе скрипт поставил, который фон под разрешение монитора адаптирует, сайт теперь на доли секунд загружаться медленнее стал.
      Плюс ко всему обнаружил, что стандартный лайтбокс не работает. Как выяснилось, уже несколько недель. Вот думаю что делать? Ставить плагин - геморрой: к каждой фотографии прописывать либо класс, либо айди. Может быть в настройках самого плагина можно что-то указать, что позволило бы ему распознавать только то, что нужно, как в стандартном, родном варианте. Может что-то подскажешь?
      Сторонние коды плагинов объединять нельзя, я так понял. А можно только то, что находится внутри шаблона. Правильно?
      Ты б статьющечку на эту тему написал бы - круто вышло б и полезно.
      Проверил твой сайт в PageSpeed - он шустрее, чем мой, хотя у меня всяких причендал меньше. Вот теперь ломаю голову... Что мне еще нужно? У меня такая фигня началась, похожая на то, как худеющие не могут остановиться - так и я: оптимизирую, оптимизирую...

      Удалить
    5. Ну это точно, Саня, ты "подсел" на оптимизацию :) Ты не совсем правильно понимаешь зачем выносят стили и скрипты на внешние хранилища, делается это скорее не для того чтобы ускорить загрузку, а чтобы по итогу получить чистую HTML разметку, без лишних кодов. Считается что для поисковиков так лучше и правильнее - сайт не нагружается "трудноперевариваемым" кодом и поискбот "шуршит" (сканирует) быстрее и качественнее. Но скорость обработки браузером кода от этого лучше не становится, а иногда и хуже, когда сайт лежит на одном хостинге, а стили и скрипты где-то на другом, так как по ссылке делается запрос, если доступно, забирается код и обрабатывается(отображается).
        Объединять можно разные скрипты, главное делать это правильно, чтобы при этом не возникало между ними противоречий. Вот у тебя пачка скриптов заключена в одном теге <script> все работает, ты можешь смело брать их и выносить в отдельный файл.
        Лайтбокс конечно подо*рал, я как-то сразу и не обратил внимания, просто постю в основном без него, но чего-нибудь надо будет подобрать...
        Указать картинку можно и через родителя, т.е. изображения которые находятся в постах, например в JQ это будет как и в CSS - $('.post-body img')...
        Что касается поста, так мы с тобой тут уже на научно-техническую статью накропали :)) Может со временем, как видишь я сейчас вообще затих насчет новых статей, плотно апдейтом старых постов занялся, и то не успеваю по задуманному...

      Удалить
  7. На многих сайтах читал, что чтобы изображение лишний раз не грузило в Блоггере лучше сразу закидывать его с уже нужными пропорциями, но в адаптивных сайтах применяют ширину и высоту в процентах.
    Так какой вариант правильный? Когда задается размер уже в коде картинки, то это лишняя загрузка, а если через css, то вроде бы пишут, что все быстро загружается?
    Распишите пожалуйста для чайников, с CSS только пытаюсь познакомиться, так что многое для меня трудновато))
    Вот ссылка на блог, где изображения уже были загружены с нужными пропорциями:
    http://fiestaagency.blogspot.ru/2012/10/blog-post_6391.html

    ОтветитьУдалить
    Ответы
    1. Тут нужно рассуждать логически и все зависит от потребностей, Сначала загружается документ (HTML) и "налету" таблица стилей (CSS), так сказать, "внешняя" (прописанная в общем коде документа или из внешнего файла - неважно) с общими параметрами, т.е. браузер считывает ее и расставляет все по местам и соответствующим образом оформляет, потом уже переходит к "внутренним" стилям (CSS для элемента, непосредственно на странице). Процесс это довольно быстр и не особо заметен даже на слабых машинах, но заметен при "низких скоростях" интернет соединения. С точки зрения оптимизации, конечно лучше задавать параметры в общем CSS коде.
      Ну а вообще, повторюсь, все зависит от потребностей, если, к примеру, изображений на странице много и размеры у них должны быть разные?

      Удалить
  8. Подскажите лучшую альтернативу Google Code. Google Диск, Google Сайты, может появился новый сервис? Может появились лучшие программы, чем те которые описываются в статье. Просто прошел уже год. Вы пользуетесь Notepad++, что посоветуете для WindowsXP, и главное какую версию?

    ОтветитьУдалить
    Ответы
    1. В статье описаны основные принципы оптимизации, те которые применял я лично, что касается программ, то это уже дело, как говорится, пятое, тут выбор личный.
      Можно использовать и Google Диск, и Google Сайты, на данный момент на этом блоге работает скрипт залитый на Google Диск (кнопки "поделиться" под статьей). Notepad++ меня лично пока устраивает, но есть много альтернатив, это дело привычки. Под "хрюшку" или нет это написано в описании программы, это смотреть надо при загрузке.

      Удалить
    2. Читал много, что удаление "blogspot" из адреса, также оптимизирует блог. Интересно Ваше мнение, и нужно ли удалять blogspot?

      Удалить
    3. Это называется - перенос на персональный домен, к оптимизации кода это не имеет ни какого отношения

      Удалить
  9. Спасибо, много познавательного но не со всем согласен, а именно (Большие скрипты подключаем удаленно) Это в корне не верно, удобно, да, но сие ни как не может ускорять, это больше тормоз во благо собственному удобству, ибо с начало загружается основа а потом прилагающее и нужно очень хорошо подумать что туда запихнуть, в противном случае мы получим не скорость а тормоза с абракодаброй и кстати, что за пушь ломится в мой комп при перезагрузки ващой страницы?

    ОтветитьУдалить
    Ответы
    1. Все так, но не совсем, этот спор не нов и мнений на этот счет полно. Мое такое - скрипты обрабатываются на клиентской стороне, т.е. браузером, а значит через мерный их объем в коде, может существенно замедлить загрузку остальных элементов страницы. Новая мода рекомендует складывать их не в начале, как было раньше (перед \хэд), а в конце, уже посте \боди, но тогда страница может не правильно отображаться до момента обработки скриптов, в итоге, для меня лучше найти НАДЕЖНЫЙ и быстрый сервер, и обратиться к нему, чем заложить код. На счет пиша, не знаю, может гугол что-то снова придумал. :)

      Удалить
  10. Эмм... Путём проб и ошибок мне удалось выяснить, самый большой тормоз в blogspot, это наличие встроенных комментариев, отключите их и скорость в разы возрастёт, алтернатив много, это независимые плагины такие как facebook VK and прочие )

    ОтветитьУдалить

Следующее Предыдущее

BestProject