Оптимизация сайта — еще способы ускорения его работы

Уважаемые коллеги-блоггеры, добрый день!

Сегодня продолжаем разговор по оптимизации сайта, а значит — по ускорению его работы, а значит — по продвижению и раскрутке своего сайта (блога).

оптимизация изображений картинок для сайта

Оптимизация сайта — еще способы ускорения его работы

Какие способы оптимизации сайта мы рассмотрим сегодня? Давайте обратим наш взор на то, что больше всего нуждается в оптимизации на нашем блоге — я имею в виду изображения, картинки, фото и все, что с этими понятиями связано.

Картинки необходимы нашему блогу — они украшают его, с их помощью можно раскручивать сайт в поисковых системах, картинки и скриншоты помогают лучше понять и усвоить информацию. Но не секрет, что картинки — самые «тяжелые» элементы на блоге. Они могут нагрузить его так, что скорость блога упадет в разы, а значит успешная его раскрутка будет под вопросом.

[help]Что делать? Отказываться от картинок, оставлять их в самом необходимом случае? Нет, мы пойдем другим путем — давайте научимся оптимизировать картинки и тогда будем пользоваться только их преимуществами.[/help]

Для начала я дам ссылку на два сервиса, на которых мы будем прослеживать эффективность нашей работы.

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

оптимизация сайта

Как видите, результаты не очень хорошие. Для компьютеров — 65 очков из 100, на мобильных — вообще все красное, вообщем сайт работает наполовину, что там говорить. И первое замечание от системы было — оптимизировать изображения.

Вот еще один сервис, который мне понравился: Pingdom.com Вот какие результаты он мне дал:

оптимизация сайта

Как бы подбадривая меня, сервис сообщил мне, что мой сайт быстрее 35% всех сайтов, я так поняла зарубежных. Но это же значит, что он медленнее 65% всех сайтов — а это уже не так успокаивает. К тому же, замерив некоторые раскрученные сайты тех, на кого я держу равнение, заметила, что они уверенно опережают по скорости около 90% всех сайтов! И я поняла — я тоже так хочу!

И еще кое-что: этот сервис иногда показывает разные результаты, так что сразу не отчаивайтесь (или и не радуйтесь слишком :) ), проверяйте несколько раз — самый частый результат и будет ваш.

[warning]Кроме оптимизации картинок, есть еще некоторые вещи, которые следует сделать:[/warning]

  • удалить лишние плагины
  • удалить ненужные скрипты и коды в верхней части страницы
  • использовать кэш браузера
  • заблокировать хотлинки
  • и тд и тп

Но не все же сразу :) Будем делать все постепенно и рано или поздно осилим этот путь, не гарантирую, что весь, но результаты будем наблюдать воочию.

Итак, оптимизация изображений. С чего начать?

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

Если вы заглянете в папку с загруженными изображениями (такая папка находится на хостинге по адресу: ваш домен — public — wp-content - uploads) , вы увидите, что вместо одного красуется 3, а то и 4 его копии разного размера:

оптимизация сайта

Пока статей и картинок мало, еще ничего, но если блог развивается, наполняясь публикациями, это обстоятельство станет очень заметно в плане торможения блога.

Как такое происходит и зачем WordPress устраивает нам такие сюрпризы?

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

Значит мне нужно ликвидировать все промежуточные изображения (те, что с цифрами), для основной картинки я оставлю миниатюру — она используется моей темой, а для скриншотов — все уберу, и миниатюру тоже.

Сейчас расскажу как все это делается. Заходите по адресу своих изображений: ваш домен — public — wp-content - uploads и там увидите папки по годам — 2013 и 2014, а в каждой из них — папки по месяцам — 01, 02 итд.

Заходите в каждую и удаляете все ненужное. Советую сначала скачать архив каждой папки, вдруг удалите что лишнее — вернете на место (на блоге появится пустое место вместо картинки), я так поначалу несколько не тех фото удалила, но потом вернула.

Кому надо нагляднее, смотрите на видео чуть ниже.

Что делать, чтобы ненужные копии изображений не появлялись больше?

Заходим в админке блога Параметры — Медиафайлы и выставляем вот такие параметры:

оптимизация изображений

Как видите, я убрала средние изображения, они больше появляться не будут, (если в вашей теме не используются миниатюры — поставьте нолики и там).

Миниатюры я убрать не могу, поэтому у моих скриншотов автоматически будут появляться копии-миниатюры 150х150, которые мне придется чистить вручную. Таким образом раз в месяц советую делать чистку соответствующей папки.

А сейчас придется почистить сразу все папки, так что засучим рукава :)

Как уменьшить вес изображений?

Но убрать лишние изображения — это полдела. Нужно еще оптимизировать все, что осталось, сделать как можно легче.

Для этого можно воспользоваться онлайн сервисом оптимизации изображений: Webresizer.com

Сервис мне понравился, но мне показалось долго и не очень удобно, да и уменьшает он не очень сильно. Так что я сделала оптимизацию в своем любимом фотошопе. Получилось быстро и качественно, смотрите видео:

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

На этом все, успехов вам в оптимизации картинок и всего сайта!

А главное — будьте удачливее всех! Ваша Анжелика $окова

 

 .

42 комментария: Оптимизация сайта — еще способы ускорения его работы

  • Александр говорит:

    Спасибо большое за рекомендации! Обязательно буду использовать их в работе с сайтом. Узнал много нового.

    • Анжелика говорит:

      Александр, рада, что Вам это показалось полезным, пользуйтесь на здоровье

  • Ксения говорит:

    За сервисы спасибо, буду проверять. А лишние картинки я убираю после публикации каждой статьи. И уменьшаю их тоже в фотошопе. Если это не делать, у меня, наверное, уже бы лимит места закончился.

  • Ольга говорит:

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

  • Татьяна говорит:

    Сделала всего один шаг по оптимизации — Параметры — Медиафайлы.
    Указала Ваши параметры и время загрузки уменьшилось вдвое.
    Отличный результат. Спасибо.

  • Содбо Очиров говорит:

    Спасибо, Анжелика, за своевременную и актуальную для меня статью! Вы как всегда, как будто угадываете наши мысли — например у меня, постоянно слетают картинки, то с блога, то с анонсов в Сабскрайбе. Оказывается, их надо оптимизировать — тоже целая наука.
    Спасибо отдельно за ваши бесплатные уроки.

    • Анжелика говорит:

      Содбо, я заметила, что в группе на Сабкрайб постоянно слетают Ваши картинки, попробуйте оптимизировать, но у Вас еще в названии картинки русские слова и буквы, переименуйте их и все будет в порядке

      • Виталий говорит:

        Анжелика, здравствуйте!
         

        Спасибо за статью толково написано!
        Вот возник вопрос в картинках я заполняю Заголовок и Атрибут alt русскими словами. Разве это неправильно? Неужели увеличивает время загрузки сайта?
         

  • Vesna83 говорит:

    Анжелика, ты изменила обложку сайта? Извини, если я только заметила. Раньше вроде был просто синий? Симпатичненько

    • Анжелика говорит:

      Весна, ничего не меняла, только изображения темы оптимизировала, наверное получился такой эффект :)

  • Ольга говорит:

    Мне тоже надо проверить загрузку картинок, какой вес они занимают. А то уже с хостинга присылали предупреждение, что сайт загружен.

    • Анжелика говорит:

      Ольга, это уже серьезно, когда хостеры предупреждают, через несколько дней могут сайт отключить и будут предлагать дорогой тариф. Зайдите на хостинг, проверьте нагрузку, если сильно превышает, что-то срочно делайте. Может картинок будет недостаточно, наверное надо лишних ботов блокировать. Напишите, если что.

  • ольга говорит:

    Сколько нужно всего знать для правильной работы сайта. Воспользуюсь советами.

  • Максим говорит:

    Я полностью согласен со всем изложенным материалом. Оптимизацией изображений надо заниматься, и у меня конечно с этим также много проблем. Изначально я не уделял этому внимания а теперь изменить все не хватает времени. Спасибо за рекомендации и такую четкую видеоинструкцию.

  • Арина говорит:

    Проверила я свой сайт. мама дорогая. Ситуация плачевная. пора исправляться.

  • Ирина говорит:

    Очень понятно и доходчиво, раньше я про это не знала, пошла исправлять

  • Анжелика, спасибо за статью. Я как раз занялась картинками на блоге. И онлайн сервис очень пригодится.

  • Арина говорит:

    Получается, что надо сохранять бдительность и работать над сайтом.

  • Таня говорит:

    Статья полезная! Оптимизация очень нужна для сайта. Этому обязательно нужно уделить время!

  • Татьяна говорит:

    Меня очень заинтересовали сервисы, но вот как ими пользоваться, если в кодах не разбираешься? Наверное не получиться тогда ничего сделать.

  • Ольга Суворова говорит:

    Анжелика, у меня вопрос: скажите, можно ли изменять картинки через программу Total Commander? Перетащить папку с картинками на рабочий стол, оптимизировать и закачать напрямую в папку wp-content uploads? Чтобы не архивировать-разархивировать? Тягомотно это все…И так времени уйдет масса — за год с хвостиком ни разу таким не занималась, представляете, сколько картинок у меня нужно оптимизировать? Свыше 1000…

    • Анжелика говорит:

      Ну да, надо как-то приспособиться как удобнее, главное, чтобы результат был :)

  • Ольга Суворова говорит:

    И еще, забыла спросить: проверяла скорость загрузки сайта через сервис, который вы рекомендовали developers.google.com. Пишут: «удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение» Как это сделать? ведь, как я понимаю, эти коды, можно сказать, украшение картинки, стиль CSS — как цвета для раскраски. Если их удалить, сайт станет похож на изнанку вышивки. Или я что-то не так понимаю? (ну и сравнения же я подобрала!)

    • Анжелика говорит:

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

  • Ольга Суворова говорит:

    Анжелика, забыла поздравить вас с Первомаем!
    Легкого труда вам, вдохновения и достойной награды! Уж очень мне нравится, все, что и как вы пишете.

  • Ольга Суворова говорит:

    Снова и снова перечитываю статью вашу и появляются новые вопросы: как быть с картинками, которые уменьшались вручную на wordpresse? Ну, знаете, когда открываешь редактировать картинку, чтобы прописать alt и title, там можно уменьшать картинку до 90%, 80%…Если убрать отметку «средний размер», что будет с теми картинками, которые имеют другие размеры, ни «миниатюра» и не заданный «крупный размер»? У меня таких много.
    (новый месяц и я опять «спамлю» вам блог комментариями)

    • Анжелика говорит:

      Когда мы выбираем определенный размер, этот размер картинки и показывается, остальные размеры просто ненужные — их можно удалить. Чтобы узнать какой именно размер используется, надо в редакторе картинки посмотреть вкладку Дополнительно — Источник

      • Ольга Суворова говорит:

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

      • Ольга Суворова говорит:

        Задали вы мне работенку, Анжелика, своей статьей…
        У меня сейчас на блоге 230 статей, к каждой в среднем 3 картинки, к каждой из этих картинок 2 дубля, еще куча не использованных картинок, которые благополучно засоряют библиотеку медиафайлов, все это надо удалять, просматривая каждую статью, чтобы не удалить что-нибудь лишнее (было уже такое вначале, пришлось все восстанавливать и начинать заново, спасибо, что посоветовали сохранить папочку по месяцам отдельно)
        Проверила пока статей 50… Сколько еще впереди работы, ведь дальше пойдут более объемные статьи со все большим количеством картинок…
        Надеюсь, что это все не бессмысленная трата времени, ИБД (имитация бурной деятельности), хотя бы место освобожу на сервере…
        Да, еще один плюс: снова «познакомилась» со своими статьями. Буквально вчера доказывала своей знакомой, что нет у меня на блоге рецепта мороженого! Не и все! Сегодня обнаружила статью, в которой я своими руками напечатала на клавиатуре и опубликовала рецепт йогуртового мороженого…Умора!

        • Ольга Суворова говорит:

          Вот, пожаловалась!..
          Но, если серьезно. давно пора было это сделать — почистить и удалить ненужные изображения. Вон теперь сколько разгребать приходится, запустила…

          • Анжелика говорит:

            Да, лучше поддерживать это дело в процессе, или хотя бы раз месяц делать чистку — уже не так много работы будет.

        • Анжелика говорит:

          Я хорошо почистила место, у меня уже лимит был занят на 98% — пришлось бы дополнительное место покупать, а сейчас 45% — еще можно жить :) Я поначалу грузила на сайт все подряд — и фото и видео, и книги электронные, так что много мусора накопилось.
          Тоже время потратила на это, но я заметила у себя систему — все фото на блоге определенных размеров обычно — 300-400px, так что я сразу поудаляла самые крупные (больше 400) и самые маленькие (150) — миниатюры, которые надо оставить у меня сразу видны — они в рамочке, потом те, что остались — оптимизировала, потом прошлась по статьям и где картинка выпала прямо в редакторе ее вернула. Так быстрей получается.

      • Весна говорит:

        То есть у нас получается четыре картинки: большая — загружаемая изначально, средний дубль, миниатюра, и еще тот дубль, который уменьшали — который 80% или 90 % от оригинала, так? Получается из одной картинки сразу четыре?

  • Ольга Суворова говорит:

    Здравствуйте, Анжелика! Снова вернулась к вам на блог и сразу к этой статье. Заканчиваю возиться с картинками, перечитала статью, и как всегда, нашла свои упущения. Я вначале поудаляла все миниатюры к картинкам, но в медиафайлах вместо них появились пустые квадратики, как-то не очень…Стоит ли все-таки удалять эти миниатюры, а? И еще вопрос: если убрать в настройках медиафайлов средний размер (у меня было 300х300) и уменьшить крупный размер (было аж 1024х1024), то преспокойно будет загружаться фото, к примеру, 300х200, без всяких дублей (ну, только миниатюра — она у меня тоже выводится на главной странице, потому нужна)?

    • Анжелика говорит:

      Ольга, здравствуйте, да — лучше сразу загружать фото нужного размера и не будет всяких дублей. А миниатюры в некоторых шаблонах нужны.

  • Весна говорит:

    Анжелика, проверила свой сайт на скорость загрузки на первом сервисе (гугла) и в первом пункте все та же КонтактФорм7, про которую я как раз недавно спрашивала. Вердикт сервиса — удалить её так что жду от тебя статью по установке какого-нибудь аналога

  • Весна говорит:

    По-тихоньку подбираюсь к оптимизации картинок. Он-лайн сервис не так удобен, как установленная в компьютере программа (все-таки лето, природа, вылазки, да и дома интернет не всегда работает бесперебойно) Но поскольку в Германии строго следят за несанкционированным использованием платных программ — я пользуюсь бесплатной — Гимп.
    Загрузила специальное приложение СейвФоВеб и о чудо! На внешний вид картинку даже не отличишь! Но весит в два раза меньше! Это нечто! И времени занимает — секунды! В очередной раз спасибо за очень полезную статью!
    До старых картинок пока не добралась, но в новых уже уменьшаю вес для веб

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по сайту:
Рекомендую:
Рекомендую настойчиво:
Вконтакте
FaceBook

Все статьи сайта | Конкурсы на сайте| Пошаговое создание сайта| Рекомендую | Реклама на сайте

Copyright © 2017. Все права защищены! При копировании строго ссылка на сайт!

Создай свой сайт и заработай на нем Главная сайта.

Как заказать и купить такой готовый сайт, читайте здесь

24 Запросов за 0,186 cекунд.
Индекс цитирования