ГлавнаяОптимизацияОптимизация сайта под гугл картинки

Оптимизация адаптивных картинок под Google PageSpeed? Оптимизация сайта под гугл картинки


Оптимизация адаптивных картинок под Google PageSpeed? — Toster.ru

Здравствуйте коллеги. Столкнулся с такой проблемой, в последнее время в моей конторе начали тестировать страницы с помощью Google PageSpeed, инструмент хороший не спорю. Но у меня есть некоторые вопросы к оптимизации изображений. Сейчас приведу пример: Обычно, к изображениям добавляют отзывчивость (по примеру бутстрапа):img{ max-width:100%; height:auto; } тем самым картинка будет подстраиваться под размеры родительского блока. Ну так вот, есть к примеру некий див, в котором загружена фотка размером 640 на 480, при уменьшении окна браузера с помощью медиа запросов, происходит так, что она, к примеру отображается 320 на 240, а еще меньше окно браузера - 160 на 120:

Соответственно, меняется размер родительского блока, а картинка подстраивается. Ну так вот, у гугла устроено так, что если картинка по физическим размерам больше дива, например картинка 640на480 и сжалась под действием дива до 320 на 240, то он будет ругаться, мол оптимизируйте картинки, сожмите размер и т.д.

Кто как в этом случае поступает? Является ли данный пункт неким фактором ранжирования в гугле?

Вот другая ситуация:

Есть некая галерея, где есть маленькие превьюшки, есть большая превьюшка и есть еще огромная картинка, которая открывается при клике на превьюшку. У нас появились разногласия и мы не можем принять верное решение, контора разбилась на два лагеря:

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

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

Кто что думает по этому поводу?

toster.ru

Устраняем пункт "Оптимизируйте изображения" в PageSpeed Insights.

Приветствую на wpsovet.ru. Как и обещал сейчас буду разбирать следующий пункт PageSpeed Insights, который гласит так «Оптимизируйте изображения, правильный формат и сжатие изображений позволяет сократить их объем.» Я думаю из названия все понятно, ваши графические элементы на сайте слишком много занимают места, а соответственно и дольше загружаются браузерами пользователей.

Последствия

Чем для вас грозит эта проблема:

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

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

Способы угодить правилам

  1. Плагины, я посмотрел много из них, мало того что сам факт его наличия на блоге, так еще и сами по себе хреново работают. Я нашел штук наверное пять, и не остался в восторге. Многие просят зарегистрироваться, и получить свой API ключ, конечно бесплатный, но в последствии могут запросить денежку. Степень сжатия вообще никакая, я сам увеличиваю результат в разы. Короче, если вы не привыкли запариваться, то это для вас, я ничего советовать не буду, так как достойных не нашел, не для меня.
  2. Сервисы, тут я вам помогу, у меня есть один в загашнике, он очень крутой, название у него очень длинное просто вот вам статья, там ничего сложного, все расписано и на мой взгляд стоит внимания.
  3. Третий пункт неоднозначный 50/50, тут решение предлагает сам PageSpeed Insights, он предоставляет уже сжатый вариант собственного приготовления. Смотрите на скриншот ниже, будет все понятнее.Если у вас что-то не в порядке, то гугл сам предоставит все оптимизированное содержимое, только пользуйтесь. Что качается JS и CSS, то там все в порядке, но об этом позже, а вот картинки, придется посмотреть и проверить. Нажимайте на ссылку  «изображения, ресурсы JavaScript и CSS» и к вам на компьютер автоматом будут загружены все неудовлетворяющие файлы, уже в исправленном формате, запакованные в архив. Далее открываем, и там три папки и один html документ.
    С директориями CSS и js разберемся попозже, в других постах, нас сейчас интересует image, открываем ее (предварительно распаковать архив), и видим там уже оптимизированные картинки. Я не буду приводить скриншот, там вы ничего нового не увидите. Но без подсказки разобраться будет трудно, и наш друг google даже сделал нам специальный файл с путями расположения всех интересующих нас изображений. Открываем «MANIFEST», хоть через сам браузер, в нем все пути где лежат «не очень хорошие объекты».Как видно из снимка, то все расписано очень подробно. Если вас устраивает качество, то смело заменяйте оригиналы на скаченное из PageSpeed Insights, тем более адреса у вас есть.

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

  4. Ну вот и добрались, до моего последнего раздела, и самого важного. Не буду оригинален, если вы следите за блогом, то моя прошлая запись была про программу RIOT, вот она нам и пригодится, никто из приведенного списка не дотягивают до нее. Все про этот полезный софт написано здесь. Там все есть, и где скачать и как пользоваться, и достоинства и недостатки Говорю сразу же, все остальное так для разогрева, а этот пункт самое главное. Все что сжималось в этой программе никогда не попадало в игнор правил pagespeed’а, а качество просто на высоте.

Вывод.

На этом у меня все, мои итоги таковы, плагины не стоят внимания вообще, интернет ресурсы хорошо (может быть и лучше), сам google справляется на половину, а вот стационарный софт справляется просто супер.

P.S. А теперь вы скажите какой из примеров лучше всего подходит вам, и помогла ли вам статья?

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

wpsovet.ru

Оптимизация картинок под Google Page Speed

Оптимизация картинок под Google Page Speed

Чтобы повысить скорость загрузки любого сайта в Google Page Speed Insight, в первую очередь нужно оптимизировать картинки на сайте. Это можно сделать с помощью программы для оптимизации фото jpegtran. Создадим папку проекта, в которую поместим jpegtran.exe скачанный с официального сайта, и два пустых подкаталога images и optimized. В images закинем несколько фото которые нам нужно оптимизировать. Напишем скрипт на Python который получит имена всех файлов в папке images и даст команду запускающую jpegtran для оптимизации всех фото, которые были найдены. Исходники вместе с jpegtran под Windows скачать можно тут jpegoptimized.rar Сама программа выглядит так:

from os import listdir from os.path import isfile from os.path import join as joinpath import subprocess # Устанавливаем имя папки с фото mypath = "images" # Перебираем каждый файл в папке for i in listdir(mypath): # Проверяем не папка ли этот файл if isfile(joinpath(mypath,i)): print (i) # Формируем команду для jpegtran cmd = 'jpegtran -progressive -copy none -optimize -outfile optimized/' +i+' images/'+ i PIPE = subprocess.PIPE # Выполняем команду в ОС p = subprocess.Popen(cmd, shell=True, stdin=PIPE, stdout=PIPE, stderr=subprocess.STDOUT) Не забудьте поместить в папку images несколько фотографий. Оптимизированные фото после запуска скрипта появятся в папке optimized. Оптимизация картинок под Google Page Speed Иван Леднев Если у вас есть Android телефон, вы можете скачать наш учебник по Python

pythono.ru

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

Нет предела совершенству, и Google PageSpeed тому доказательство. С его помощью меньше чем за минуту можно получить подробный отчет о производительности Web страницы. В подавляющем большинстве случаев PageSpeed подскажет, что нужно оптимизировать графику. Это наиболее частая проблема и наиболее весомая.

Например, даже на стартовой странице Google Developers графику можно сжать на 71%. Чем меньше весят фотки – тем быстрее грузится сайт. Меньше картинки — меньше трафика — все работает быстрее. Посетители тратят меньше времени – все довольны.

В этом материале подобраны основные инструменты для оптимизации графики.

Серверные инструментыСамые частые — изображения в формате JPG. Основные инструменты:

Формат PNG используется для иконок, логотипов и малоцветных изображений. Инструменты для оптимизации:

Облачные инструменты

Модуль PageSpeedGoogle потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:

pagespeed on;pagespeed FileCachePath /var/cache/nginx;

Модуль делает все сам — и анализирует HTML, и оптимизирует ресурсы. Например, пережимает картинки или минифицирует статику. В исходниках страницы все оптимизированные ресурсы будут иметь другой путь.

Прямая оптимизация ресурсовПосле оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.

Для этого достаточно включить в конфиг такие инструкции (для Nginx):

pagespeed InPlaceResourceOptimization on;

Конспект

Источник

www.marketopic.ru

Оптимизация картинок для Google PageSpeed ~ Страницы Интернета

Нет предела совершенству, и Google PageSpeed тому доказательство. С его помощью меньше чем за минуту можно получить подробный отчет о производительности Web страницы. В подавляющем большинстве случаев PageSpeed подскажет, что нужно оптимизировать графику. Это наиболее частая проблема и наиболее весомая.

Например, даже на стартовой странице Google Developers графику можно сжать на 71%. Чем меньше весят фотки – тем быстрее грузится сайт. Меньше картинки — меньше трафика — все работает быстрее. Посетители тратят меньше времени – все довольны.

В этом материале подобраны основные инструменты для оптимизации графики.

Серверные инструменты
Самые частые — изображения в формате JPG. Основные инструменты:

Формат PNG используется для иконок, логотипов и малоцветных изображений. Инструменты для оптимизации:

Облачные инструменты
Модуль PageSpeed
Google потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:pagespeed on; pagespeed FileCachePath /var/cache/nginx;

Модуль делает все сам — и анализирует HTML, и оптимизирует ресурсы. Например, пережимает картинки или минифицирует статику. В исходниках страницы все оптимизированные ресурсы будут иметь другой путь.

Прямая оптимизация ресурсов
После оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.

Для этого достаточно включить в конфиг такие инструкции (для Nginx):

pagespeed InPlaceResourceOptimization on;
Конспект

internet-pages.blogspot.com

Google PageSpeed и Wordpress. Оптимизация изображений — JackyFox

Спустя три недели опытов и экспериментов со своим сайтом, работающим на WordPress, я наконец-то добился приемлимой оценки производительности моего блога в сервисе Insights. Времени и сил это заняло порядком, но результаты уже заметны.

В процессе оптимизации блога для получения высокой оценки Goolge PageSpeed Insights я очень многое узнал и хочу поделиться практическими советами настройки WordPress. Не обещаю оценки 100/100, потому как существуют независящие от веб-мастера факторы, но обо всём по порядку. 

Суть оптимизации

Для Desktop 94 балла

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

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

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

Посмотрев в первый раз на отчет Insights, я обнаружил, что большая часть изображений на сайте не оптимизированы, причем Google сообщал, что многие картинки можно ужать чуть ли не на 80 %. Задача оптимизации изображений складывается из двух этапов:

Всего неоптимизированных картинок на сайте было около 1 200 штук. Очевидно, что вручную обрабатывать такой массив файлов через какую-нибудь Оптимизиллу не очень хочется, да и времени займет чертовую уйму.

Быстрый поиск по проблеме выдал мне плагин WP Smush. Он позволяет реализовать и оптимизацию существующих изображений, и оптимизацию тех картинок, которые будут добавляться в дальнейшем.

С первым пунктом мне пришлось попотеть. Разработчики плагина разрешают оптимизировать только 50 картинок за раз (в бесплатной версии). Делим существующий набор в 1 200 картинок на 50, получаем 24 нажатия на кнопку BULK SMASH NOW. Ну, ничего, за пару дней справился.

Все новые картинки я теперь в обязательной порядке прогоняю через Оптимизиллу, чего и вам желаю. При использовании такой практики, WP Smush удалять не следует хотя бы потому, что плагин оптимизирует не только загруженное вами изображение, но еще и те файлы с разными размерами картинки, которые создает WordPress при загрузке.

Следующие этапы оптимизации

На этом разговор про оптимизацию сайта на WordPress для получения выкокой оценки в инструменте Google PageSpeed Insights не заканчивается. Нам предстоит обсудить такие темы как:

Оставайтесь на связи.

Всё это как-то связано

www.jackyfox.com

Мой опыт продвижения картинок в Google Images

С Google Images я работаю с тех пор, как у меня появился первый блог. И кроме интерфейса, с тех пор ничего не изменилось.

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

1. В Google Images уникальность картинки не важна.

Да-да, друзья мои, это вам не Яндекс. В одной статье, мне нужна была картинка про эволюцию. Я полез в Google Images, и стырил там картинку, которая понравилась мне больше всего. Картинка, к слову, была в топе. Где-то через 2-3 недели, на мой блог начал идти трафик по запросу «эволюция» Я ради интереса еще раз заглянул в Гугл Имейджс, и был удивлен, когда увидел там свою картинку в топе. Ведь я абсолютно не уникализировал ее, даже заголовок не менял. Картинка провисела в топе еще 2 месяца, и за это время принесла мне около 300 человек. Сейчас, эта же картинка в топе, только источник уже другой.

Тогда я решил проверить свои мысли по поводу важности уникальности картинок, и загрузил на блог еще 30. Картинки все были взяты с того же Google Images, больше того, взяты они были с топа. В картинках я изменял только само название, не обрезал, не переворачивал, не отзеркаливал. Через неделю, 2 из 30 были в топе, и сдвинули оригинальный источник. Через месяц — 18 картинок висели себе в топе как ни в чем не бывало, а оригинальные источники, вообще пропали. Это говорит нам о том, что уникальность картинок, если и учитывается в Google Images, то все равно имеет очень мало веса и значимости.

2. Трастовость источника картинки для Google Images не важна.

Когда моя картинка про эволюцию сдвинула с топа другую, многие наверняка подумали об трастовости. Но об этом и не может быть речи, ведь домену, как и блогу, на котором он расположен, на тот момент не исполнилось и месяца! По истечению эксперимента с тридцатью картинками, блогу не было еще и трех месяцев. Блогу уже полгода, а некоторые картинки сдвинуть с топа все равно не выходит. Уверен, что трастовость ресурса при продвижении картинок, в отличии от продвижения текста, ничего не решает.

3. Для Google Images не важен язык, на котором прописаны alt и description.

Я выводил картинку с названием «Гроші» в топ, по запросу «money». Вспомнив о региональности выдачи, попросил знакомых из Австралии, Германии, Белоруссии и России проверить наличии моей картинки в топе, по английскому запросу. Абсолютно все подтвердили, что картинка присутствует в ТОП 10. С помощью знаний, полученных в ходе этого эксперимента, я открыл для себя новый способ добычи трафика. Название картинки, можно прописать например, на английском языке. Alt уже на русском, но заменить название картинки синонимом. И description также на другом языке, взяв при этом синоним названия, и слова, что прописан в Alt. Такой метод будет давать больше всего трафика по трем запросам, с гарантией того, что трафик будет как из России, так и с других стран.

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

4. Для Google Images очень важна тематичность картинки, по отношению к статье, где она расположена.

Очень важно, чтобы ключевые слова в тексте статьи, совпадали с ключевиками прописанными в alt и description. Этот фактор один из самых важных, и не стоит его игнорировать. Картинки с текстом, продвигаются намного лучше, чем картинки без сопровождающего текста, или текста, не соответствующего тематике картинки.

5. Для Google Images не имеет никакого значения ссылочный фактор.

Когда только появилась kazapa.ru, я закинул туда тестовых 300 рублей, и потратил их на продвижение одной картинки. В топ, по запросу «форум» картинка так и не вылезла, хотя было куплено около 12 ссылок, + несколько ссылок с блога, + ссылки с твиттера, и сервисов, которые его кросспостят. Этот случай, подтверждает пункт 4, ведь возле картинки не было текста. Также, этот случай подтверждает то, что ссылочный фактор для продвижения картинок не важен. Сомневаюсь, что кто-то еще покупал ссылки под такой малоконкурентный, тем более не коммерческий запрос.

6. Средний срок вывода картинки в топ — 3-4 недели.

7. Если вы попали в топ, не стоит ожидать, что вы будете там вечно. Вас очень легко сдвинуть.

На этом все, я продолжаю экспериментировать, и узнавать новые подробности продвижения картинок в Google Images. Уверен, что у каждого оптимизатора есть свои наработки в этой теме. Буду благодарен, за освещение их в комментариях. Удачи!

alexpavlutskiy.com

Prostoy-Site | Все права защищены © 2018 | Карта сайта