Как раскрутить свой сайт? С чего начать зарабатывать?

Web-zarabotok.info

заработок в интернете, создание и продвижение сайтов (SEO)

Оптимизация картинок для Google PageSpeed и не только

  • 13 комментариев


  • Оптимизация картинок 3

    Здравствуйте, дорогие читатели блога web-zarabotok.info

    Вы пользуетесь Google PageSpeed? Нет! Зря… Сервис очень хорош тем, что с его помощью вы можете без каких-либо навыков сделать самоанализ своего сайта. Просто в специальное поле вбиваете адрес (можно главной страницы) и нажимаете анализировать. В ответ вы узнаете очень много SEO ошибок, которые нужно срочно исправлять. Например:

    PageSpeed-Insights-оптиматизация-картинок

    Я сегодня расскажу только об одной проблеме «Оптимизация картинок». Давайте раз и навсегда избавимся от нее. Чтобы в дальнейшем, она нас больше не беспокоила.

    Итак… Вначале давайте узнаем:

    Зачем делать оптимизацию картинок?

    Оптимизация картинок делается для того, чтобы повысить скорость загрузки страниц сайта. Например, ваш пост имеет огромное количество картинок (миниатюр), общий вес которых составляет от 10 мб. И как вы думаете?! Сколько секунд будет грузиться страница… Друзья, очень долго. Тому, все эти факторы и влияют на продвижение сайта. Также хочется сказать о размерах на хостинге. Как вы знаете, хостинг-провайдеры ограничивают нас в этом. Будьте экономней… :-) Берегите память на другое, чем забивать ее картинками с большим весом.

    А сейчас, давайте вернемся к основной проблеме:

    Как сделать оптимизацию картинок для любого сайта?

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

    Итак, вначале нам нужно скачать программу XnConvert. Вот ссылка. Скачали?! Супер. Сейчас нужно ее установить. Делается этот процесс обычным способом. Проблем быть не должно.

    Теперь оставляем программу, и переходим к скачиванию картинок с хостинга на свой ПК. В этом помогает мне замечательная программа «FileZilla» (скачать). Данные подключения FTP можно узнать у своего хостинг-провайдера.

    После подключения, ищем папку с картинками. Этот блог работает на WordPress, тому мой путь к медиафайлам лежит через папку wp-content ? upload. Смотрите скрин:

    Инструкция-копирования-папки-с-картинками-с-WordPressПосле того как папка будет полностью скопирована сделайте на всякий случай ее копию. Всякое может быть! Тому лучше перестраховаться…

    Что касается сайтов, которые работают без CMS. Вам нужно найти свой путь к папке с картинками. Зачастую ее название images.

    Сейчас, вернемся к нашей программе XnConvert. Запускаем. Перед нами будет следующее окно:

    Скрин-запуска-программы-XnConvertНас интересует «Добавить папку». Нажимаем и указываем путь к нашей папке с картинками. Важно! Зачастую кто работает с WordPress, в папке с картинками есть еще одна (с датами загрузки). В таком случае нужно делать все поочередно.

    После, вверху нужно открыть вкладку Действия. Здесь мы можем настроить сжатие картинок. Можете поиграться и все сами настроить под себя. Я выбрал для себя только 2 параметра.

    1. Это удаление метаданных.
    2. Глубина цветов 64.

    Смотрите как это делается на скриншотах.

    Удаление метаданных
    Изменение глубины цвета

    Что касается настроек сжатия изображений, то — это все.

    Настроим путь выходных данных.

    Для этого вверху, выбираем «Выходные данные». Перед нами два варианта сохранения картинок:

    1. Исходная папка — сжатые картинки будут заменены исходными (рекомендую включить этот вариант);
    2. Папка — сами прописываем путь сохранения.

    Важно! Все поля в «Имя файла» оставляем без изменений.

    Нажимаем «Преобразовать» и все. Таким образом, мы одним нажатием сделали оптимизацию всех наших картинок. Для более наглядной работы программы, можете сравнить вес папки до и после оптимизации. :-) У меня были просто сумасшедшие результаты. До оптимизации: 854 мб. После: 518 мб.

    Как уже говорил раньше, программа сможет сделать оптимизацию картинок для любого сайта. Если вы работаете с таким модулем, как WordPress, то у меня есть ещё один способ сделать быструю онлайн-оптимизацию прямо с панели управления.

    Итак…

    Оптимизация картинок на WordPress

    Для работы, нам понадобится плагин под названием WP Smush. Скачать его можно отсюда. Устанавливаем. Я всегда устанавливаю плагины через админку, а не через FTP. На мой взгляд, это самый лучший и быстрый вариант.

    Плагин установлен. Теперь переходим в раздел «Медиафайлы». Перед нами будет список последних загруженных картинок. Справа (если не заметили) напротив каждой картинки, появилась кнопка с надписью «Smush Now!».

    Скрин-использвания-плагина-wp-smushЕсли нажать на кнопку, то плагин автоматически уменьшит размер картинки.

    Скрин-использвания-плагина-wp-smush-2На скрине, видно, что вторая картинка сокращена была на 11.02 KB (7%). Это довольно-таки неплохой результат.

    P.S. Плагин имеет платную версию поэтому, если, хотите одним нажатием сделать оптимизацию всех картинок — придется заплатить. Я, сэкономил!  :roll: Сделал все вручную.

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

    В итоге

    Как видите, есть несколько способов, сделать оптимизацию картинок. Честно говоря, то первый (универсальный) вариант понравился мне куда больше. Объясню…

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

    В итоге выбор имеют только те, кто работает на WordPress.

    На этом у меня все друзья. Если возникли проблемы? Отпишитесь в комментариях! Буду рад помочь.

    Ах да… Не забудьте проверить, убралась ли проблема с оптимизацией картинок сервисом Google PageSpeed. Вот ссылка.

    Понравилась статья? Подписывайтесь на обновления. Узнавайте о выходе новых статей первыми!

    Спасибо за внимание!

    С уважением, Могиш Иван



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


    Пидпишись на новости! и будь в курсе событий на блоге.



    Логотип