Вернуться   SEO форум - оптимизация и продвижение сайтов > Поисковая оптимизация > Оптимизация страниц сайта

Важная информация
Оптимизация страниц сайта - Мета теги (description и т.д.), заголовок h1, title, alt. Микроразметка, структура контента, внутренняя перелинковка.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 10.11.2013, 18:44   #1
 
Аватар для Alilgroup
 
Сообщений: 26
FR (активность): 736

Доп. информация
Лампочка Автор темы Инструмент анализа оптимизации сайта, на примере SeoCafe.

Доброго времени суток, друзья! Меня как разработчика часто волнуют вопросы оптимизации моих продуктов. И это неспроста! Ведь позиция сайта, отчасти, зависит и от скорости загрузки на бумаге и от скорости работы в реальности.

Я думаю большинство кафешников использует сервисы от pr-cy, да? Во всяком случае мой SEOшник проверяет все там. Поэтому, описывать этот ресурс не берусь. Но расскажу вам, про недавно найденный мной аналитический инструмент для оптимизаторов.

Имя ему gtmetrix.com!

Этот компактный инструмент позволяет проверить балл оптимизации у вашего сайта по двум шкалам: Page Speed от Google и YSlow от Yahoo. К слову, инструмент шикарный, тут тебе и про оптимизацию изображений скажут ( сразу можно скачать и оптимизированные изображения, которые зачастую не отличаясь по качеству весят в несколько раз меньше! ) и про необходимость ставить JavaScript в конец страницы напомнят и CDN заставят завести.

Сайт оценивается по 100% шкале (или по буквенной от F 0% до А 100%). Т.е. если ваш сайт получил 100% пляшите на одной ноге — вы бог оптимизации. Если у вас меньше 50%, то нужно поднапрячся и поработать над сайтом еще.
И проверим этот замечательный инструмент на нашем милом сайте seocafe

Что же мы увидим? А что по Page Speed от Google сайту дают все 57%! К слову, существует отдельный инструмент Page Speed, на русском
Оффтоп:
http://developers.google.com/speed/pagespeed/insights/


Рассмотрим ошибки оптимизации, по мнению Page Speed.

1. Specify image dimensions — 0% (F)
Это означает что у всех изображений на сайте пропущены обозначения ширины и высоты. Почему это важно? Потому что это влияет на скорость рендера старинцы. Вместо того чтобы брать уже готовы параметры width и height из тега IMG, браузеру приходится самостоятельно вычислять ширину и высоту каждого изображения. А это время, это драгоценные 50-150 мс в зависимости от количества изображений. Это много. Всегда указывайте параметры width и height тега IMG.

2. Combine images using CSS sprites — 0% (F)
Это означает следующее. Существует такая штука как CSS sprites — все маленькие иконочки, значки и пиктограмки помещаются в одно крупное изображение, которое потом ставится фоном со сдвигом. Например у нас есть изображение иконки темы, смайлик или какой-нибудь восклицательный знак. Как мы обычно поступаем? Делаем GIF или PNG изображение и вставляем его через тег IMG. А если у вас таких изображений 10? 20? 100? То загрузка сайта превратится в нескончаемый поток запросов к серверу, которые будет отнимать времени больше чем сама загрузка изображения. Это неверно.
Верный путь — поместить все маленькие изображения в одно, и использовать его в своем CSS документе. Фокус в том, что запрошенный однажды он будет закэширован и при следующих обращениях к нему из страницы или css, фактически обращения к серверу не будет, он будет браться из кэша.
Техника CSS Sprite очень хорошо описана на множестве ресурсов лучше меня, только замечу что используется такой css синтаксис

Само собой ширина-высота ваши, сдвиг фона подбираете руками.
Двинемся дальше! Я не буду описывать абсолютно все параметры сервиса, это очень много, если вам будет интересно, зайдите на него, к каждому параметру имеется подробное описание на английском. Если вы не изучали английский, зайдите напрямую на Page Speed Google, там рекомендации на русском.

3. Defer parsing of JavaScript 0% (F).
Как известно, рендер страницы происходит сверху вниз, дожидаясь загрузки каждого элемента по очереди. Так вот, указывая ссылки на скрипты в теге HEAD, вы рискуете увеличивать время загрузки страницы многократно. Почему это происходит?
Движок браузера при загрузке обрабатывает все элементы сверху-вниз, как я уже писал выше, и натыкаясь на тег загрузки скрипта <script type="text/javascript" src="#"></script> ждет пока он загрузится или не истечет время ожидания! Теперь представьте, что вы подключили скрипт, а он выполняется с ошибками, или содержит длинные циклы. Пользователь будет видеть белый экран, пока ваш или чужой скрипт не запустится. Очень плохо.
Решение: ставить скрипты перед закрывающим тегом BODY. Довольно странное, с обычной точки зрения, решение правда? Но это так. Страница загружается полностью, а скрипты загружаются уже в самом конце. Поэтому пользователь уже будет рассматривать страницу, пока ваши скрипты будут работать.

4. Use a Content Delivery Network (CDN) — 0% (F).
Что такое CDN? Для тех кто не знаком с этой технологией расскажу в кратце. Одновременно браузер может загружать не более 6 файлов с одного адреса (изображений, скриптов, css файлов, любых других внешних документов ) . Поясню — если у вас допустим 150 внешних файлов, то браузер одновременно будет грузить не более 6. Эдакая очередь. Пришло это к нам из далеких времен медленного интернета, ведь сейчас домашний интернет позволяет грузить хоть все документы одновременно и быстро. Но стандарт есть стандарт. Поэтому придумали CDN. Это когда вы статические файлы, вроде изображений, css файлов, js скриптов размещаете на стороннем сервисе, который дает вам прямой адрес. И теперь смотрите какая тонкость, браузер грузит 6 файлов с одного адреса, а мы теперь разбросали наши файлы по разным адресам! И вместо 6 файлов, мы можем грузить одновременно хоть 60, хоть 100.
Коммерческие сервера еще и настраиваются на быстрейшую отдачу «статики», поэтому мы получаем быстрейшую загрузку статических файлов, что очень положительно сказывается на скорости загрузки. Это происходит почти мгновенно.
Совет: всегда использовать CDN, пусть даже и некоммерческий.

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


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

А как вы анализируете быстродействие, и по каким критериям? Буду рад услышать ваше мнение и опыт!

Спасибо за внимание, высших позиций и быстрого отклика всем!
Alilgroup вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
VadimSeoCafe (10.11.2013)
Ответ

Метки
gtmetrix, page speed, yslow, оптимизация сайта

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Netpeak Spider уникальный инструмент, предназначенный для сканирования и анализа сайта СТЕПАН Софт оптимизатора, SEO утилиты 2 29.08.2013 08:56
Уникальный инструмент SEO анализа Chaser SEO сервисы 112 28.12.2012 08:09
Новый сервис для анализа сайта 1y.ru houseonfire Объявления 0 27.07.2012 11:25
ahrefs.com - новый инструмент для анализа обратных ссылок своих и чужих доменов Ahrefs SEO сервисы 22 20.03.2012 17:16

Текущее время: 06:12. Часовой пояс GMT +3.