Jump to content
  • 0

Как пройти Pagespeed от гугла?

Yamaradg

Asked by Yamaradg,

 Share

Question

Yamaradg Explorer

Yamaradg

Posted
Posted (edited)

Доброй ночи.
Народ.
Не подскажите как пройти спидтест для десктопа в гугле?
(впервые прохожу :) )

Есть такая страница например:
http://webmaster.ayrveda.ru/se_plus/index26083k.html
 

И результат по ней вот такой выдается:
https://yadi.sk/i/fdwugjQ5rQq9A

как уже только не оптимизировал те 2 картинки - спидтесту этому они все равно не нравятся )
+ не понятно что надо сделать со стилями и джаваскриптом.. )

Так же хотел бы поинтересоваться наиболее простым методом сжатия в GZIP
(может кто то толковую статью скинет на эту тему..)

P.S. Буду благодарен за помощь..

Edited by Yamaradg
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 1
kattiperk Explorer

kattiperk

Posted
Posted

97% - отличный показатель :)

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

Да, ходит такое мнение, что пока не загрузит <head>, не выведет разметку с контентом. Скорее всего означает, что .css большой, и пока он тут грузится,контент бы уже давно загрузился и пользователь читал текст, а потом появились бы стили и текст стал красивым.

Проверьте, если хотите, тут - http://www.testmycss.com/

Вот статья, где хорошо написано про то, кто и когда загружается, кто кого блокирует и как исправить - https://varvy.com/pagespeed/critical-render-path.html

Насчет gzip - http://seo-mayak.com/sozdanie-bloga/skorost-zagruzki/kak-vklyuchit-gzip-szhatie-i-uskorit-sajt.html

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

  • Like 1
Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

В данный момент указанный сайт имеет 97% с двумя рекомендациями:

  • Eliminate render-blocking JavaScript and CSS in above-the-fold content — из-за стилей

  • Leverage browser caching — из-за счетчика Я.Метрика

Рекомендации:

  1. Установить и настроить на сервере PageSpeed Module (если есть такая возможность)
  2. Перенести загрузку стилей перед закрывающимся </body>
  3. Перенести Я.Метрику перед закрывающимся </body>

Если интересно углубится в клиентскую оптимизацию то советую начать с Веб-дизайн. Лекция Виталия Фридмана и http://webo.in/articles/

 

В April 30, 2016 в 21:49, Yamaradg сказал:

Так же хотел бы поинтересоваться наиболее простым методом сжатия в GZIP
(может кто то толковую статью скинет на эту тему..)

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

Скрытый текст

SE+ 2016-05-03 13-09-47.png


 

  • Like 1
Link to comment
Share on other sites
  • 0
Yamaradg Explorer

Yamaradg

Posted
  • Author
Posted
41 минуту назад, klierik сказал:

Рекомендации:

  1. Установить и настроить на сервере PageSpeed Module (если есть такая возможность)
  2. Перенести загрузку стилей перед закрывающимся </body>
  3. Перенести Я.Метрику перед закрывающимся </body>
  Показать содержимое

Зделал, как вы описали - но все равно остались те же предупреждеия..
(не вынес подключение скрипта правда(но вы и не писали об этом) т.к. там прописаны сво-ва для тегов HTMl5(для  IE-7,8,) - если выношу подключение под тег боди то в IE-7,8 все валится..)

 

Link to comment
Share on other sites
  • 0
Yamaradg Explorer

Yamaradg

Posted
  • Author
Posted
5 часов назад, klierik сказал:

Окей, едем дальше. Пожми стили через "minify CSS".

А ссылку не подскажите?
(че то слишком много всяких минификаторов в гугле со сходными названиеми.)

P.S. В гугл пейдж спиде мне кстати предлагались сжатые файлы и они уже реализованы по ссылке на страницу.
https://yadi.sk/i/FL1ITqwBrTTMt
Такой вариант не подходит?

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted
1 минуту назад, Yamaradg сказал:

А ссылку не подскажите?
(че то слишком много всяких минификаторов в гугле со сходными названиеми.)

так любой "online minify css" подойдет, первый попавшийся бери, на пример: https://cssminifier.com/

1 минуту назад, Yamaradg сказал:

https://yadi.sk/i/FL1ITqwBrTTMt
Такой вариант не подходит?

что-то я не уверен что он пожат

Link to comment
Share on other sites
  • 0
Yamaradg Explorer

Yamaradg

Posted
  • Author
Posted
2 минуты назад, klierik сказал:

что-то я не уверен что он пожат

старая версия весила 7,62 КБ
а возможно сжатая 6,54 кб
Это можно считать сжатием или нет? )
Если нет то скиньте сссылку(если можно) - где именно лучше всего сжимать CSS..

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted
1 минуту назад, Yamaradg сказал:

Это можно считать сжатием или нет? )

Можно

1 минуту назад, Yamaradg сказал:

Если нет то скиньте сссылку(если можно) - где именно лучше всего сжимать CSS..

 

5 минут назад, klierik сказал:

так любой "online minify css" подойдет, первый попавшийся бери, на пример: https://cssminifier.com/

 

Link to comment
Share on other sites
  • 0
Yamaradg Explorer

Yamaradg

Posted
  • Author
Posted (edited)
6 минут назад, klierik сказал:

Можно

Тогда если у меня файлы сss сжаты - то чего еще не хватает для оптимизации?
(помимо яндекс метрики - с ней чуть позже разберусь..(как время появиться. Сходу не понял че там делать надо.))

Edited by Yamaradg
Link to comment
Share on other sites
  • 0
Yamaradg Explorer

Yamaradg

Posted
  • Author
Posted (edited)
В 03.05.2016 в 20:17, klierik сказал:

так любой "online minify css" подойдет, первый попавшийся бери, на пример: https://cssminifier.com/

Такой вопрос еще - а наоборот потом можно как то расжать(распаковать) все это дело если что?
(правки вносить и прочее..)

Edited by Yamaradg
Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

Это не целесообразно.

Смотри, у тебя есть исходный CSS файл, который для разработчика. Minifi CSS, в свою очередь, для создания styles.min.css - он сжат. Он не предназначен для редактирования (хотя это возможно с помощью http://tools.maxcdn.com/procssor/). Предназначение этого файла иметь минимальный размер.

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept