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

Оптимизация сайта с помощью сервиса PageSpeed Insights

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

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

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

Итак, сервис PageSpeed Insights, показывает какие конкретно файлы влияют на скорость загрузки сайта и даёт практические рекомендации по их оптимизации.

Как я пользовался этим сервисом

Когда я написал, что пользуюсь этим сервисом очень давно, я конечно сильно преувеличил. Я начал заходить на него очень давно, а вот именно использовать начал только вчера... icon smile - Оптимизация сайта с помощью сервиса PageSpeed Insights 

 PageSpeed Insights

Итак, заходим, вбиваем адрес своего сайта и нажимаем кнопку «Анализировать»

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

Причём сервис показывает данные по двум параметрам - удобство для пользователей и скорость. И по каждому параметру выдаёт свои рекомендации.

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

И если кликнуть по ссылке «Как исправить», то сервис выдаст конкретные рекомендации...

Вот только...

Вот только до реализации этих рекомендаций на практике у меня руки никогда не доходили.

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

 Вот как это выглядит:

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

Это что-же, мне надо выискивать все эти картинки, которые распиханы по разным папкам (сервис, кстати показывает конкретные ссылки на них), скачивать, каким-то образом оптимизировать, и закачивать обратно?

 Где взять столько времени?

Отдельная песня про сжатие скриптов и css. Есть несколько онлайн сервисов, которые делают такое сжатие - при этом весь файл записывается в одну строчку. Суть тут в том, что браузеры считывают скрипты и стили построчно, а если всё в одной единственной строке, то время на считывание такого файла уменьшается на несколько порядков.

Но тут есть один нюанс. Иногда, после такого сжатия скрипты и стили перестают работать, сталкивался...

Поэтому использование сервиса Google PageSpeed у меня сводилось к следующему: заходил, проверял, смотрел на результаты, чесал, что называется, репу, говорил «М-да...» и уходил. icon biggrin - Оптимизация сайта с помощью сервиса PageSpeed Insights 

Опыт применения рекомендаций сервиса

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

Смотрел на сервисе ссылку на картинку, при помощи FileZilla находил её и скачивал на компьютер, сжимал (чем и как возможно напишу в следующий раз), и заливал на сайт.

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

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

Оптимизация сайта
Сервис уже сам всё подготовил и оптимизировал для нас!

Скачиваем архив и в нём находим и скрипты, и стили, и картинки.

Что имеем по итогу?

Картинки 

Картинки действительно сжаты, причём очень корректно. По крайней мере, в своих изображениях какой-либо потери качества не увидел вообще.
Зачёт.

Скрипты и стили

Вопреки моим ожиданиям, сервис и тут всё сделал очень корректно, я бы даже сказал бережно. Он не сжал файлы до уровня одной строки, но зато записал в одну строку каждый селектор в случае с CSS или функцию в случае с js.
Чтобы было понятно, приведу пример. В оригинале так:
.arklink { color: #0944A2 !important;cursor:pointer !important; /* цвет ссылки, курсор в виде пальца */ }
.arklink:hover { color: #f00 !important; /* цвет ссылки */ text-decoration: none !important; /* отключение подчёркивания */ }
.tooltip {
border: 1px #696969 solid !important;
background: #FEFFE2 !important;
color: #0944A2 !important;
border-radius: 5px !important;
font: bold 14px Arial, Verdana;
padding: 5px !important;
width: auto !important;
white-space: nowrap !important;
}

  А сервис сделал так:

.arklink { color: #0944A2 !important;cursor:pointer !important; /* цвет ссылки, курсор в виде пальца */ }
.arklink:hover { color: #f00 !important; /* цвет ссылки */ text-decoration: none !important; /* отключение подчёркивания */ }
.tooltip { border: 1px #696969 solid !important; background: #FEFFE2 !important; color: #0944A2 !important; border-radius: 5px !important; font: bold 14px Arial, Verdana; padding: 5px !important; width: auto !important; white-space: nowrap !important; }

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

Нам остаётся только загрузить это всё в нужные папки на свой сайт!
Вот такая фишка этого сервиса. Если кому-то это пригодится, то будет просто здорово.
 
И почему я заканчиваю писать эту статью пол-второго ночи? Кто-нибудь может мне объяснить?
😀 
Удачи Вам и до встречи на моём блоге! 

Смотрите также

Огни большого города https://obg.kz Автосерфинг

Как привлечь посетителей на сайт бесплатно

Извечный вопрос всех владельцев сайтов - как привлечь посетителей на сайт? В этой статье расскажу …

Работа над блогом

Работа над блогом

После переезда на новый домен решил провести с блогом некоторые манипуляции по его оптимизации. Начиная …

129 комментариев

  1. Здравствуйте Александр! А я видел эту фишку, но так и не нашел время экспериментировать с ней. А если честно говорить, то мне было банально в облом 🙂
    Спасибо вам за этот пост, так как сейчас у меня появилась мотивация этим заняться!
    А на сколько скорость увеличилась, после этих манипуляций?

    • Игорь, мне сложно сказать именно насколько увеличилась скорость. Я ведь, как всегда, нашёл что-то и в первую очередь применяю не на блоге, а на своих коммерческих проектах.

      Но важно то, что скорость загрузки увеличивается однозначно. Чистая логика – меньший вес картинки, меньший размер файла стилей и т.д… Это главное.

      Доберусь и до своего блога тоже.

  2. Спасибо, интересно. Но ведь потом все равно нужно удалять старые картинки (многие из которых уже показываются в поиске) и закачивать новые. А если их сотни? 
    Насчет пол-второго ночи: в это время я часто только начинаю… 08

  3. Вау! Попробовала сервис. На предмет оптимизирования для мобильных устройств. До этого проверяла при помощи аналогичных инструментов Гуглвэбмастера. Там все отлично. У меня стоит специальный плагин. Здесь же неудовлетворительно. Пишут, что у меня единственное использованное правило – отказаться от плагинов. Мол, хорошо, что я не использую плагины (у меня их больше 30). 
    Еще советуют среди многого всего использовать кэш (давно используется). 01

    • Ну… полностью и слепо доверять не стоит ни одному сервису. У меня тоже плагин кеширования установлен изначально, а сервис говорит, что нет. Он предлагает конкретный плагин поставить…

      А вот по оптимизации картинок и скриптов, почему-бы не воспользоваться. Это в любом случае только на пользу.

      • Да, у меня много картинок очень тяжелых, вначале не знала, что их надо оптимизировать. Сейчас не знаю, как их поменять, даже при помощи этого сервиса…О скриптах и прочем даже думать боюсь. Увы, для меня это хуже китайского…11

        • Ирина, сервис Вам уже предоставил оптимизированные изображения. Смотрите на сервисе адрес картинки и аналогичную заливаете поверх существующей из архива. Всё просто. Для подобных действий я использую FileZilla.

  4. Всем привет.
    Спасибо автору и респект ))
    Ну понятно, что прежде чем что либо менять – надо сохраниться, забекапиться…
    Тут у меня такой вопрос: у меня фото в разрешении 670 – ширина, а в “присланных” сервисом фото – они Уже – почему?
    И хотелось бы узнать – что в итоге по проделанной работе, что нить изменилось? )))

    • Кстати, у меня тоже в присланных фото стали маленькие. Мне такие маленькие не нравятся. Согласна с Вами, хотелось бы у кого нибудь сначала увидеть – как было и как стало.

    •  Тут у меня такой вопрос: у меня фото в разрешении 670 – ширина, а в “присланных” сервисом фото – они Уже – почему?

       Я сначала на это внимания не обратил, но получается действительно так. Вывод могу сделать на основе своего блога. Вот сервис мне предлагает оптимизировать изображение padshiy_angel1-272×125.jpeg

      Вот оно:

      272*125 пикс. 

      Но давайте глянем, как именно эта картинка отображается на блоге…

      Обратите внимание, при реальном выводе первоначальное изображение уменьшается!!!

      Сервис предложил оптимизированное изображение

      136*62 пиксела…

      Тем самым сервис оптимизировал изображение под размеры реального отображения на блоге!

      Это-же изображение с другими размерами используется, как миниатюра записи, но там размер картинки соответствует размеру реального отображения и сервис ту картинку не затронул вообще.

      Думаю, вот и весь секрет, всё очень логично.

      На блоге я эту работу не завершил, а вот на одной маленькой страничке корпоративного проекта без малейшего сомнения… Там все картинки оптимизированы. Всё нормально.

      • У Вас теперь картинки при увеличении открывается на новой вкладке. Это из-за проведенной работы? Мне нравилось как раньше, когда картина увеличивается тут же.

  5. Александр, приветствую! Не знал, что можно готовые оптимизированные файлы в этом сервисе скачивать. Заменил пока картинки и основные стили. Прибавилось пару пунктов. А сжатие действительно корректное. Спасибо за статью.

  6. Я смотрела свой сайт глазами данного сервиса, делала кое-какие исправления, но об этой фишке не знала. Спасибо вам!

  7. Здравствуй, Александр) Мне тоже надо выполнить все рекомендации данного сервиса))
    Жаль, что не все рекомендации понимаю)

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

      А вот основные, как-то оптимизация изображение – это уже кое-что…

      • Скрипты переносятся из head в footer очень просто. В файле шаблона function.php нужно добавить эти строки

        function custom_clean_head() {
        remove_action('wp_head', 'wp_print_scripts');
        remove_action('wp_head', 'wp_print_head_scripts', 9);
        remove_action('wp_head', 'wp_enqueue_scripts', 1);
        }
        add_action( 'wp_enqueue_scripts', 'custom_clean_head' );

        И вуаля, все скрипты из head переместились в footer, PageSpeed больше не сообщает о проблеме с скриптами.

        Если интересно могу подсказать как перенести все CSS в footer, если делать это качественно, то это более трудоемкая задача.

        Где то еще прочитал в коментах что это бесконечная задача, оптимизировать под PageSpeed, не совсем так, я добивался 99 из 100. Что бы получить 100 нужно вылизывать весь код WordPress. Достаточно на самом деле не менее 85.

        • Стас, привет! Рад тебя видеть здесь. Идея с переносом скриптов хорошая. Только есть одно "НО"… Иногда выходят обновления шаблона и все правки исчезнут. Хотя для тех, кто свои шаблоны не обновляет – это отличный вариант.

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

          В принципе, можно оформить всё это в виде маленького плагина и тогда смена шаблона или его обновление не будет мешать…

          • function.php можно сохранить на крайний случай. Это полный код, уже протестирован, скрипты не удаляются, а просто из head переносятся в footer

  8. А мне недели две назад на почту пришло письмо от Гугла, что сайт не оптимизирован для мобильных устройств, там были как раз рекомендации с сервиса о котором Вы пишете. Я тоже посмотрела, почесала “репу” и закрыла. Вот боюсь я всех этих кодов, скриптов и прочее. Для меня это абра-кадабра. А изучить, вникнуть во всё это времени нет.

    • Мне тоже пришло письмо от Гугла, но не этот сервис! Там другой, их собственный. https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2F

      • Это не совсем то. Там проверяется лишь адаптивность шаблона под мобильные устройства. А здесь, даже если шаблон адаптирован, то выдаются дополнительные рекомендации по оптимизации.

        • Да это-то я поняла. Но данные именно относительно мобильных устройств эти сервисы при анализе моего сайта выдают разные! 

          • Ирина, я Вам и без сервиса скажу, что Ваш сайт вообще не оптимизирован под мобильные устройства. Вот попробуйте просто увеличить масштаб до предела на своём блоге и на моём. Увидите разницу.
            Вам нужен адаптивный шаблон.

          • У меня стоит специальный плагин. Там можно посмотреть, как все выглядит на мобильных устройствах. Все в порядке. WPtouch Mobile Plugin

          • Специально зашёл на Ваш сайт со смартфона… Ну… в принципе плагин что-то делает, конечно, но это не совсем то…

          • Спасибо, что зашли. Ну пусть будет как будет…

    • Валентина, у Вас вообще не адаптивный дизайн – он не приспособлен для мобильных устройств. Тут рекомендации не помогут. Надо подбирать шаблон, который уже оптимизирован под мобильные устройства. Самому, без определённых знаний этого не сделать.

      А уж потом можно и к рекомендациям будет присмотреться…

    • Не знаю, как насчет адаптивного шаблона, но мне когда-то посоветовали поставить плагин WPtouch Mobile Plugin, вроде теперь Гугл доволен. К сожалению, нет устройств, чтобы проверить.

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

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

  10. Спасибо, Александр! Знала об этом сервисе, но совершенно о нём забыла, а прочитав вашу статью вспомнила. Как раз думала о том, как проверить сайт на предмет оптимизации. Нужно воспользоваться вашими советами.
    Поздравляю вас с праздником Наурыз, желаю отличных выходных! Хорошего отдыха и приятных впечатлений!!!
    22 17 29

    • Спасибо за поздравления! Поздравляю и Вас с праздником Наурыз!

      17

      Советы не мои, а сервиса… 21 Пользуйтесь на здоровье!

      • У нас нет таких выходных, как у вас!
        Сервисом воспользовалась, закачала на сайт оптимизированные файлы. Повысились показатели с 71 до 81 процента. Но ещё предстоит много работы, много непонятного, но буду разбираться со всем постепенно.

  11. Александр, давненько не была у Вас, уж даже подумала, что всё взял тайм-аут. Так что рада, что статьи рождаются.  
    Прочла всё и даже попробовала оптимизировать, а вот как закачивать в папки я не знаю, не смогу. И потом, если всегда картинки предварительно все сжимаю, то что всё равно придётся их удалять, заменять на новые? А  скрипты  вообще для меня высшая математика. 
    Но всё равно, спасибо за познания, правда, сервис просто супер!

    • Людмила, по сути Вы правы. В силу разных жизненных обстоятельств – тайм-аут. Эта статья получилась случайно и спонтанно.

       И потом, если всегда картинки предварительно все сжимаю, то что всё равно придётся их удалять, заменять на новые?

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

  12. Александр, здравствуйте! Спасибо за информацию, как говорится все видят одинаковую информацию, но вот такую изюминку в ней замечают только единицы.
    А еще меня насторожила фраза

    Настроения не было никакого, делать ничего не хотелось вообще 

    Подумала, а почему так часто настроение исчезает?
    Видимо какие-то внутренние проблемы, не желание портить настроение близким, порой ведь достаточно поговорить и настроение улучшается. Может я и не права.

  13. Спасибо, Александр. Проанализировала свой сайт с помощью рекомендуемого сервиса, осталось заняться исправлениями, но придется кого-то нанимать для этого, самой не  справится :).

  14. Сколько раз заходил на эту страницу и ни разу не замечал ссылку на скачивание оптимизированных файлов37. Спасибо за наводку.

  15. Идея очень заманчивая, захотелось что-то исправить, но…Проанализировала свой сайт, мне тоже точно не справится самой. Все там так сложно! А к кому обратиться с таким вопросом, к фрилансерам? Но все равно спасибо вам, Александр, за такие хорошие подсказки.

    • Таисия, это только кажется, что сложно. Все рекомендации я и сам не собираюсь выполнять. А вот хотя-бы изображения оптимизировать – несложно и оно того стоит. Это можно сделать и самому, при желании.

  16. Внесу свою лепту, для оптимизации уже загруженных изображений можно воспользоваться плагином  EWWW Image Optimizer , если лень оптимизировать в дальнейшем, плагин будет автоматически делать за вас. Я не любитель большого количества плагинов, поэтому оптимизиров загруженные удалил его, а перед загрузкой картинок оптимизирую их простенькой программой Antelope

    • Я как-то ставил себе подобный плагин – не этот. Он часть изображений немного оптимизировал, а на большинстве выдал ошибку. Снёс я его. Теперь тоже перед загрузкой оптимизирую всё ручками. Но на блог я загружаю, в основном только миниатюры к статьям. Все изображения в статьях храню на радикале. И что характерно, ни одно из таких изображений не попало в разряд требуемой оптимизации. Радикал при загрузке на него сам уже оптимизирует картинки…

      Antelope, кстати, хорошая программа и бесплатная. Правда я ей практически сейчас не пользуюсь. Сжимаю либо GIMP, либо FastStone Image Viewer… 17

      Но для тех, кому сложно, можно попробовать и EWWW Image Optimizer – по описанию хорош.

      • Александр, если не сложно, опишите как лучше всего оптимизировать картинки (у меня много фото) к статьям. Я сейчас пользуюсь фотошопом, сохраняю для веб, но вес обрезанных фоток все равно большой, блог грузится медленно. 
        Пробовала сжимать в FastStone Image Viewer, но после нее в фотошопе одни кубики показываются, хотя обычным глазом искажения не заметны. 

        • Елена, Вы в FastStone Image Viewer сжимаете уже окончательный вариант изображения. В чём принцип сжатия? Программа удаляет из файла картинки всю служебную информацию, оставляя только картинку. Поэтому попытка открыть такой файл в фотошопе может привести к тому эффекту, о котором Вы говорите. Поэтому, при необходимости, оставляйте себе заготовку в PSD, а окончательный файл – это уже для сайта.

          Вот пример, как я сжимаю одиночный файл png в FastStone Image Viewer:

          При этом вес файла уменьшился более, чем вдвое! При том-же размере.

          А вообще, если делать пакетное сжатие, то лучше использовать программу Antelope, о которой написал Платон Щукин.

          Вот посмотрите об этой программе на сайте моего хорошего знакомого Николая Соколова. Сжатие изображений – программа Antelope

          Там можно взять и портативную русскую версию. Там вообще много чего интересного у Николая. Рекомендую всем! 04

          • Большое спасибо! Для файлов JPEG так же действовать? Впрочем, буду сжимать. 

             

          • JPG немного отличается. Там надо качеством рулить. Лучше, наверное, попробовать какую-либо специальную программу для этого. Либо воспользоваться теми изображениями, что сервис уже оптимизировал…

      • Все ни как не разберусь с GIMP, интересная программа, но нет времени на ее изучение((

        • Бесплатный аналог Фотошоп, только там шрифты без слоёв, а так всё присутствует. Правда что-то может по другому называться и в других меню находиться, так, что любителям фотошоп привыкать трудновато. Зато это абсолютно бесплатный аналог!

          Я GIMP глубоко тоже не изучал, так, самое необходимое в минимальном объёме. Всё остальное по мере возникновения надобности. В сети, кстати, много уроков есть по этому редактору.

  17. Саша привет! Скачал себе этот архивчик. Только вот чего с ним делать дальше пока не понял. Нет, картинки поменять это ладно, а вот это куда http://prntscr.com/6kxtuf и это http://prntscr.com/6kxuda у меня и файлов столько нет43 Если не трудно, напиши на почту.

    • Андрей, ну в принципе так-же, как и картинки… На сервисе наводишь курсор на проблемный файл и всплывает подсказка с полным путём к нему…

      Вот по этому пути и надо записать соответствующий файл из архива.

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

      Честно говоря, из всего предложенного, я бы оптимизировал только изображения и файл стилей шаблона. И то с большой осторожностью (это про стили), сделав предварительную копию этого css. Потом проверять с полной очисткой кеша. Остальное бы вообще не трогал.

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

  19. Как всегда было интересно. Спасибо за информацию.

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

  21. Александр, доброго времени суток!
    Хотел написать Вам через обратную связь. Не получилось – выдаёт ошибку.
    Давно читаю ваш блог, многое полезного для себя нахожу.Подскажите, какой у вас стоит плагин для комментариев? Очень мне он нравится, и смайликов на выбор много ))Хочу себе тоже поставить.Или он у вас кодом прописан?

  22. БлагоДарю, Александр!
    Уже потом прочитал у вас всё. 
    Привет Алма-Ате! Давно не был в тех краях. Сам с детства жил в Усть-Каменогорске, много много лет. Всё там родное, ну Алма-Ата тоже 29

  23. Александр, спасибо за статью. Как раз в эти выходные хотел заняться оптимизацией изображений, а в пятницу увидел вашу статью. Эта возможность в сервисе появилась недавно.
    Стили и JS в теме я поменял, остальное менять нет смысла, слетит при обновлении. Картинок у меня больше 2000 штук, оптимизирую их только последний год, а до этого два года об этом даже не знал.
    Старые картинки я оптимизировал с помощью плагина EWWW Image Optimizer. Плагин писал, что он уменьшил после оптимизации размер изображений более чем на 10 МБ.
    За два дня сделал примерно треть работы. Даже не было времени написать здесь комментарий.
    Мне попадались отдельные картинки весом более 1 МБ, и даже более 2 МБ. У меня еще проблема в размере изображений, это сейчас я делаю изображения нужного размера, а раньше нет. Из-за этого процесс оптимизации идет долго.
    Приходится при работе еще использовать плагин PageSpeed в браузере, там есть информация по размерам изображений, которые нужно изменить. Если судить по размеру архива сайта, то я уже уменьшил размер изображений более чем на 10 МБ. В реальности, наверное, даже больше.

  24. Александр, у меня есть вопрос.
    Большинство изображений на моем сайте в формате PNG. Я при оптимизации изображений в Фотошопе пробую два формата, в каком лучше сжатие, тот и оставляю. Потом, после обработки, еще несколько сжимаю размер на онлайн сервисе.
    В старых изображениях, при оптимизации, иногда бывает лучше заменить формат на JPG. Я поступаю так: ззакачиваю изображение в JPG в папку на сайте, а ненужное в PNG удаляю. В редакторе изменяю расширение файла.
    После этого, все вроде бы работает нормально. Так вот, этих новых файлов, нет в библиотеке медиафайлов консоли WordPress.
    Делать все по науке: удаляя в редакторе изображение, а затем заменяя его новым, слишком долго. Так я и за месяц не управлюсь. А так вроде бы только изменилось расширение файла, все другие данные в коде остались прежними. Такой метод пойдет? 

    • Мне кажется это не очень хорошее решение, ведь ссылки в статьях останутся на старые изображения…

      А почему не использовать те картинки, которые уже сам сервис оптимизировал? 

      По мне, так PNG более универсальный формат, я наоборот стараюсь все изображения в этом формате использовать. Кстати, как я их оптимизирую показывал в комментариях выше… Метод простой до ужаса, уменьшает вес PNG более чем в 2 раза…

      • Картинки сервиса не всегда подходят, если на изображении есть какой-то текст. Бывает, что его почти вообще не видно. Поэтому приходится кое-что делать самостоятельно.

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

  25. Александр, сколько раз я пыталась разобраться в рекомендациях этого сервиса! Даже у многих знакомых спрашивала, не согласятся ли они мне помочь в этом вопросе. Но результата так и не получила. Попробую теперь последовать за Вами и выполнить все сама )))

  26. Саша, привет! я тоже, как и ты, репу чесала, но понимала, что рекомендации сайта я выполнить не смогу. Как-то картинки все с сайта оптимизировала, но сервис все-равно показывает некоторые и предлагает опять сжать.
    В ближайшие выходные займусь твоими советами, сама я такой функции на сервисе даже и не заметила.

  27. Очень хороший сервис, мне бы он во многом помог бы! Жаль я им не могу воспользоваться( И еще больше жаль что нет больше похожих аналогов! 10

  28. Здравствуйте. Хорошая фишка – знал о ней, но вот какая проблема:
    1. Скачал с сервиса архив, закачал картинки, дошёл до шапки, закачал, а она стала очень маленькой, т. е. если изображения не расширяются, лучше не использовать.
    2. Если говорить всё про те же изображения, надо контролировать, чтобы не загрузить случайно картинку в полном размере, иначе разницы между миниатюрой и оригиналом не будет.
    Пока эти 2 вопроса не решил. В остальном функция отличная.

    • Да, согласен, такой нюанс с картинками присутствует. А ещё я заметил, что в некоторых случаях, когда на хосте лежат файлы jpeg, сервис в архиве выкладывает jpg… На самом деле это один и тот-же формат, разницы никакой, но вот ссылка-же на картинку указывает конкретное расширение…

      Так, что с картинками надо проявлять осторожность и внимание.

  29. Александр Викторович

    Давно пользуюсь сервисом “Seobilding”, а там есть и этот сервис. Недавно увидел предложение скачать оптимизированные изображения и стили. Скачал, но пока не пробовал. Из изображений у меня немного великовата шапка и пара банеров, остальные всегда сам оптимизирую. А вот стили оптимизировать нужно попробовать. Для меня это несколько сложновато, но буду пытаться. Главное восстанавливать сайт из резервной копии уже научился.
    Кстати в Сеобилдинг захожу с Яндекс браузера.

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

  30. Александр Викторович

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

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

       

      Александр Викторович, что значит “удалил изменяемую часть“? Сервис меняет полностью весь файл стилей, а не какую-то его часть. Другими словами Вам надо было просто заменить свой style.css тем, что предложил сервис.

      А вообще работать через файл-менеджер сервера можно, конечно, но я не рискую. Всегда для этих целей использую FileZilla + Notepad++

  31. Александр Викторович

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

    •  А файл менеджер хостинга удобнее и надежнее, так как соединение идет по защищенному каналу.

       Александр Викторович, Вы меня просто порадовали… 21 Чего Вы там защищать-то собираетесь? Нет, я понимаю, защищённый канал при каких-то проводках платежей, где реквизиты банковской карты и т.д… Но откорректировать несчастный css-файл? Если Вы обратили внимание, то даже в админку заходим по обычному http-протоколу, но никак не по https.

      А тот способ, о котором я говорил- так FileZilla вообще использует протокол ftp, ну а Notepad++ общепризнан, как лучший редактор для подобных вещей…

      • Александр Викторович

        Все это так, но все же защищенный канал как то надежнее. Ведь на хостинге доступ ко все файлам сайта, а у меня их два на одном хостинге. Вообще у меня кок то не заладилось с Файл зилой, вечно были проблемы с соединением. А файл менеджер на хостинге гораздо удобней. При необходимости я так же могу воспользоваться Notepad++. А если что то не получается – поддержка отлично помогает.
        Для загрузки больших файлов с фотками товара пользовался WinSCP – это тоже как файловый менеджер, но он надежней и по моему проще.

        • Ну понятно. Просто дело личных предпочтений. Кому как удобно.

           WinSCP – это тоже как файловый менеджер

           

          Это FTP менеджер, практически аналогичный FileZilla. Но последний лично мне показался удобнее. У меня вообще настроена автоматизация – логины, пароли и ссылки на сайты хранятся в отдельной программе KeePass, которая по комбинации клавиш вызывает FileZilla и передаёт туда нужные параметры для входа на сайт или куда там нужно. В самой-же FileZilla ничего не хранится. Вот это, как раз, и является самой лучшей защитой – не хранить пароли в браузерах и разных менеджерах…

          • Александр Викторович

            Вот с тем, что хранить пароли в браузере нельзя, согласен полностью.

  32. Спасибо за информацию, буду пользоваться данным сервисом, попробую настроит по максимум, покамест получилось только на 82

  33. http://www.moo-vector.idhost.kz, я страницу оптимизировал, но оптимизация бесконечно, но по моему 100 % успеха не добиться

  34. Здравствуйте, то, что вы назвали фишкой, я вижу давно. У меня другая проблема, боюсь вмешиваться в коды.Это как технически сделать? Удалить свой файл CSS  из админки и вместо него вставить сжатый файл сервиса? Так? Или как? Я не программист и мне потому страшно. Ответте мне обязательно, для меня это важно, мне не у кого спросить.

    • Ксенья, свой родной CSS лучше не удалять. Вдруг с тем файлом, который предоставил сервис, что-то не будет корректно работать? Я бы просто переименовал, например style,css в style-original.css. Затем загрузил файл предоставленный сервисом. И если что-то не так, то вернул-бы старый – обратным переименованием.

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

  35. Александр, Гугл этот код тоже на лету сгенерировал, с учетом наших плагинов. Это первое. Второе такие вещи нужно пробовать на тестовом сайте. Например, наш хостинг предложил изменить тариф, это дороже всего на 40 рублей в месяц. Добавил еще 1 гб и можно вести 3 сайта, вместо двух, хочу поговорить с хостингом о создании тестового сайта.

    Александр, без программирования очень сложно вести сайты, пожалуйста подскажите что -нибудь, где бесплатно найти , например, изучение PHP.

    • Ваше желание изучить PHP вызывает уважение. Ещё порекомендовал бы разобраться в HTML-разметке…

      Материалов, обучающих основам php, в Сети много… Посмотрите, вот например по этой ссылке – подберёте себе то, что более подходит… Я, кстати, точно так-же изучал когда-то… 

  36. Александр, доброго времени суток!

    Почему-то не вижу на сервисе ссылки "Скачать оптимизированные изображения и т.д." Или смотрю не туда, или сервис перестал заниматься благотворительностью ) На днях в очередной раз сменил хостинг (в связи со взломом сайта), и вроде бы перебрался на хостинг с SSD-дисками с обещанной (в 6 раз выше) скоростью, а получилось наоборот – по всем тестам время ответа сервера стало больше в несколько раз. С подобной проблемой сталкиваться не приходилось?

    • Вот ведь что странно: с работы смотрел и в упор не видел ссылок на скачивание сжатых сайтов ) Из дома вижу, так что все нормально, буду менять. Насчет времени ответа сервера от ТП хостера получил ответ, что этот показатель не от них зависит, а от сайта. Хотя в сети нашел определение "Время ответа сервера – (время отклика сервера) характеристика хостинга, показывающая производительность сервера, на котором расположен сайт". Теперь вот не знаю, где правда )

      • Константин, приветствую! Извиняюсь за задержку с ответом – несколько дней на блог и почту вообще не заглядывал. Как оказалось, в отпуске вообще не до блоговедения…

        Да, на сервисе PageSpeed Insights всё на месте, никуда не исчезло…

        По поводу SSD дисков странно, конечно, особенно озадачивает ответ хостеров. Обычный вордпресс, что может в данном случае зависеть от сайта? На SSD однозначно ожидается скорость выше. Кстати, на многих хостингах видел возможность тестового периода – иногда до месяца можно тестировать сайт прежде, чем переходить. Там же и цены выше… Ещё может быть, что они сузили пропускной канал для твоего сайта – это тоже влияет на скорость.

        В любом случае, что бы они ни говорили, я считаю, что на SSD скорость одного и того же сайта должна быть выше, чем на обычных дисках. Надо долбить хостеров. Что-то они мудрят…

        • О, отпуск – это хорошо! Мне в этом году всего неделю удалось отдохнуть. Но сайту это на пользу не пошло (взлом, несколько тысяч залитых файлов (статей), АГС). Потому и озадачился в очередной раз переносом – решил отделить блог от той небольшой пачки сайтов, что лежит на основном хостинге, заодно попытаться максимально защитить его. Потихоньку разбираюсь с этой проблемой.

          Кстати, скачанные с сервиса проверки файлы использовать не смог – что-то он совсем картинки уменьшил. Думаю, как нибудь сам доберусь до них, все недостающие миниатюры досоздам, а большие графические файлы "подожму".

          • взлом, несколько тысяч залитых файлов (статей), АГС

            После такого лучше всего сайт с нуля ставить на новом хосте, потом импорт/экспорт статей… Хотя, если именно статьи залили свои, то тут проблема, конечно, тогда статьи вручную переносить лучше копипастом…

          • Так и сделаю. Чем чистить старую базу данных, проще импортировать все. Чужого контента у меня сейчас нет, дважды прогнал сайт Айболитом, собираюсь еще Манула попробовать запустить, все что можно подчистить (заодно и порядок немного навести), а затем уже экспорт/импорт.

  37. Татьяна Александровна

    Здравствуйте, Александр!

    Проверила свой сайт на соответствие стандартам html – валидность на сервисе –  https://validator.w3.org

    Сервис показал 10 ошибок и я не знаю где их исправлять. Например – От линии 138, столбец 7; в строке 138, столбец 32 – пустой Заголовок. 

    Может сможете мне подсказать, как это исправить? Извините, если не по теме. 

    • Татьяна Александровна, ну это надо код смотреть, там-же на сервисе конкретные строки указаны. Пустой заголовок, как правило получается тогда, когда Вы, например, добавляете виджет в сайдбар, а заголовок там не прописываете. Надо смотреть виджеты и всякие примочки Вашей темы. Рекламные блоки тоже могут быть без заголовка…

    • В частности у Вас (посмотрел таки) есть где-то пустое описание:

      <h2 id="site-description"></h2>

      То есть где-то описание сайта не задано. Ищите в настройках может шаблона, может SEO-плагина, либо вообще в общих настройках сайта…

      • Татьяна Александровна

        Спасибо Вам, Александр!  Да, описание в общих настройках не заполняю. Но где эти строки увидеть, я не поняла?  На главной кликнула правой кнопкой мыши – посмотреть код страницы, строки нашла, а столбцы где посмотреть или я не там смотрю?

        Вы меня извините, надоела Вам с вопросами.

  38. Опробую этот сервис, обязательно сегодня!

    Спасибо за полезную информацию Александр!

     

  39. Всем здравия. ПОКАЗАТЕЛИ В GOOGLE SPEED МОЕГО САЙТА 100/100 http://sibvaleogroup.ru

    Недуги и болезни одолевали сайт по Здоровью и правильному питанию! Не так давно занялся тестированием и ускорением загрузки. До этого был небольшой опыт.

     

    Какие только методы и приемы не применял, долгие пробы и ошибки и приятный результат в виде бонуса ;). Грамотный подход и конечно огромное количество времени, потому что начинал с почти нулевыми знаниями и умениями. Тематика сайта очень востребована: Как начать бизнес? И Профилактика и лечение заболеваний! Натуральный ЭКО продукт! Добро пожаловать на просмотр показателей!  Кстати последнее с чем пришлось потрудится это кеширование

     

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

  40. Камилла

    Вот уж не думала что PageSpeed Insights меня может удивить, но ему это удалось! На днях, увидев новшество и потратив пол часа на его изучение, с ужасом обнаружила, что скачать оптимизированные изображения уже нельзя! Было не приятно, т.к. PageSpeed Insights обновился по тихому. Короче, что бы не быть мной)) прочтите статью как раз об этом: https://ifish2.ru/google-pagespeed-insights/

    • Спасибо, Камилла! Статью прочитал, тут-же зашёл на сервис и… Ну что сказать? То-ли действительно ещё сыровато всё, то-ли ещё какая-то причина. Не понравилось. Огромная разница между показателями мобильной версии и компьютерной… Убрали возможность скачать оптимизированные данные…

      Не все блогеры, например, являются веб-мастерами, им-то что делать? Как раз к этой ситуации подходит фраза: Не надо мне как лучше, оставьте мне как хорошо… cheeky

      Подождём пока подправят, посмотрим…

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

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

 Ясогласен с политикой конфиденциальности сайта и пользовательским соглашением