Главная » Бизнес в Интернете

Скорость и оптимизация картинок Вашего блога

скорость загрузки сайтаМы уже много говорили о том, как можно увеличить скорость загрузки сайта. Факторов, влияющих на скорость загрузки, много, но не все они действуют одинаково: одни действуют сильнее, влияние других практически незаметно. И один из важнейших факторов — это то, насколько Вы грамотно используете на сайте изображения.

Для начала напомню самое очевидное. Делайте изображения нужного Вам размера перед загрузкой на сайт, а не после. Я лично сталкивался с несколькими случаями, когда начинающие сайтостроители ставили картинки чуть ли не в тысячи пикселей, а затем задавали в свойствах ширину и высоту, и после этого удивлялись, почему у них картинки медленно грузятся. Все очень просто — сервис загружает исходник, а уже потом этот исходник уменьшается с помощью свойств width и height на сайте. Вес картинки от этого уменьшиться никак не может. Уменьшать и оптимизировать картинки нужно в графическом редакторе до установки на сайт. Причем сначала картинку нужно уменьшить, а уже потом оптимизировать, а не наоборот.

Можете использовать для этого графический редактор Фотошоп онлайн, который есть у меня на сайте. Уменьшаете изображение с помощью меню Изображение — Размер изображения, а оптимизация производится во время сохранения — с помощью настроек бегунка Вы выбираете нужный Вам вес и качество.

лишние картинки на сайтеСледующее, что можно сделать — проверить тему на наличие ненужных Вам изображений. Чаще всего это фоновые картинки. На блоге WordPress запросы на показ фоновых картинок прописываются в файле style.css.

Открываете административную панель блога, заходите в меню Внешний вид — Редактор, открываете код шаблона Список стилей. Затем включаете поиск с помощью нажатия клавиш Ctrl + F, и в окошке вбиваете слово background. И дальше ищете, и убираете ненужные Вам запросы.

К примеру, вот такая строка:

background: #FFF url(images/bg.gif); Проверяете, что это за картинка, то есть заходите в папку wp-content, затем в папку themes, в папку активной темы Вашего блога. В этой папке находится файл style.css.

Из кода выше следует, что в этой папке есть еще одна папка images, а в ней файл bg.gif.

Скачиваете его себе на компьютер, и смотрите. Если Вам эта картинка не нужна, можете удалить запрос на нее, то есть убрать в коде фрагмент с url. В свойствах останется только цвет фона. Обратите особое внимание: удаление файла картинки без удаления запроса может, наоборот, привести к уменьшению скорости загрузки сайта, потому что файл стилей будет искать несуществующую картинку.

Итак, строка после изменений будет выглядеть следующим образом:

background: #FFF; Убрав лишние изображения, которых на отдельных темах может быть достаточно много, Вы можете существенно ускорить сайт.

Теперь Вы можете заняться оптимизацией картинок, которые уже есть на Вашем сайте. Для этого воспользуйтесь расширением Page Speed.


Включаете анализ сайта с помощью Page Speed, и находите в выдаче пункт Оптимизируйте изображения. Нажмите на него, и вы увидите перечень изображений, которые можно оптимизировать. Выше перечня будет указано, на сколько может быть уменьшен суммарный размер картинок в результате такой оптимизации.

Дальше все очень просто — нажимаете ссылку Показать оптимизированное содержание, затем кликаете по ссылке в строке Переход по внешней ссылке, и в новой вкладке наблюдаете оптимизированную картинку.

После этого скачиваете ее, сначала себе на компьютер, называете ее так, как исходная картинка, и забрасываете на хостинг, заменяя таким образом то изображение, которое было.

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

оптимизация изображенийPage Speed оптимизирует картинки очень хорошо, иногда в два-три раза без заметной потери качества, поэтому очень рекомендую использовать эту возможность для ускорения Вашего сайта.

Еще один совет, который я испробовал, дал очень хороший прирост скорости загрузки сайта. А именно — часть картинок темы я перебросил на поддомен, который находится в другом аккаунте на хостинге Джино. Сначала пытался перебросить на поддомен в том аккаунте, где и блог, но результата никакого не было. Отслеживать эффект хорошо на сервисе Pingdom Tools: там наглядно видно, когда начинают и заканчивают загружаться различные элементы блога.

Также для оптимизации можно объединить все фоновые изображения в одно с помощью так называемых CSS спрайтов. Лично я этим заниматься не стал — возни много, а выигрыш мне представляется довольно сомнительным: мне кажется, что в этом случае сайт теряет мобильность, а именно будет сложнее производить какие-то изменения в дизайне впоследствии.


Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

3 комментария »

  • Vasili70 пишет:

    Я недавно, для целей сжатия прямо из «админки», открыл для себя вордпрессовский плагин «Смуш.ит». Работает быстро и без проблем. После сжатия картинок, я деактивирую плагин...

  • Кирилл пишет:

    Я раньше тоже плагином сжимал, но в итоге перешёл к графической программе, там всё же гибкости больше, можно балансировать между качеством\размеров в каждом конкретном случае.

Оставьте свой комментарий и ответный визит Вам обеспечен