Ответ
Придайте сайту скорости Опции темы
Старый 04.03.2013, 22:24
  #1
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Придайте сайту скорости
Одной из самых больших проблем для дизайнеров, разработчиков и владельцев сайта является сбалансированность тонкой грани между стильным (ярким, пестрым, необычным) дизайном и быстрой, безотказной загрузкой страницы у пользователя. Если веб-сайт является визитным лицом для продвижения бренда или ведения бизнеса, он должен быть в отличной форме, без лишних "цацек" и в то же время не походить на серую мышь. Хорошие сайты должны быть просты в использовании, иметь интуитивно понятный интерфейс, быстро загружаться и быть просто красивым.

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

Зачем думать о скорости сайта

Быстрая загрузка сайта это залог таких положительных сторон как:

Снижение нагрузки на трафик пользователя.
Конечно, у нас уже не эпоха диалапа, но все же довольно высокий процент посетителей пользуются мобильным интернетом со скоростью меньше мегабита, и загрузить титульную страницу где 50 картинок которые CSS-ом сжаты до 150 пикселей по ширине, а на самом деле имеют ширину 5000 пикселей он просто не сможет, так как потеряет интерес к сайту задолго по появления предложения купить или скачать что-то. Или, он отключит графику и просто не увидит что же ему предлагает, поэтому рекомендую просматривать свои сайты с отключенными стилями и картинками, чтоб увидеть как он будет смотреться для менее скоростных пользователей

Снижение нагрузки на сервер

Этот момент больше касается не дизайнерской стороны а программерской, так как встречались умельцы, которые формируют вывод текста не во время внесения в базу а ПОСЛЕ, и делают это десятком регулярок (что это такое углубляться не буду - можете сами почитать у ВИКИ). А оказывается можно все сделать ДО внесения и пользователь даже не заметит этой нагрузки. В качестве примера могу сказать что имеется ввиду полюбившиеся Вордпресовцами преобразования символов, ссылок, всякого рода он-лайн парсеры. В результате загрузка увеличивается и увеличивается нагрузка на сам сервак. если у вас сайт с посещением до тысячи в день - не парьтесь. если больше - ждите сообщение от хостера про сильную нагрузку

Более высокий ранг в поисковой выдаче

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

Как узнать скорость сайта, спросите вы? Ну есть пара путей. При наличии доступа к php файлам, я бы советовал вставить небольшой код.

В самом начале файла вставляем

$time microtime();
$time explode(' '$time);
$time $time[1] + $time[0];
$start $time
Т.е. засекаем время начала загрузки страницы

а в конце, после всех функций

$time microtime();
$time explode(' '$time);
$time $time[1] + $time[0];
$finish $time;
$total_time round(($finish $start), 4); 
И вывод (лучше в комментариях <!--$total_time-->) времени загрузки сайта в секундах. Чем этот способ мне нравится - мы видим время ГЕНЕРАЦИИ страницы на сервере, а минус в том что не включаем в эту цифру загруженность канала, яваскрипты, картинки. Т.е. этот способ проверяет именно скорость выполнения запросов к базе, время генерации контента и время выполнения регулярных услоивй (без них нынче никуда, но все хорошо в меру).

Поэтому для более объективной картины, следует воспользоваться сервисом типа http://site-perf.com/





В результате чего вы получите ПОЛНЕЙШУЮ информацию про быстродействие сайта в деталях.





Этот сервис уже показывает как загружается ваш сайт "со всем навесным"

- скрипты, картинки, ролики видео ит.д.

Если информация вам не к спеху, то советую воспользоваться статистикой Google Analytics, которая тоже объективно оценивает скорость загрузки сайта и отдельных страниц. Если сайт крупный, и ускорить его не выходит никак, советую воспользоваться сервисом MetaCDN Service, услуги которого правда платны.





Суть сервиса в ускорении подгрузки контента, Стоимость зависит от размера данных которые вы хотите ускорить .





Если у вас блоговый сайт с текстом, то выйдет не слишком дорого, а вот видеоблогам придется выложить от 99 баксов за тер информации до 5000 за 50 тер ежемесячно.

Что делать тем, кому сервис не по карману, а скорость хочется? Есть пара советов

Самое первое - ОПТИМИЗИРУЙТЕ изображения.
Процентов 60 пользователей не знаю ка это сделать. Если не умеете пользоваться фотошопом, то хотя бы воспользуйтесь сервисом ресайза картнок на радикале (где это знает каждая собака, наверное), при загрузке картинок вы можете выбрать размер обработанных картинок, и качество. Я советую делать МАКСИМУМ ширину 1000, качество 72-85 и формат JPEG. При таких параметрах вы получите наиболее полное сочетание размера-качества.





Далее проверьте размер картинок из дизайна
(элементы шапки, футера, менюшек, задний фон). Если картинка имеет НЕПРОЗРАЧНЫЙ фон и сохранена в формате PNG - дайте дизайнеру по шапке. Для картинок которые имеют мало цветов - 2-8-16 - до 256 советую GIF - он тут будет наиболее уместных, ну а для полноцветных фото ТОЛЬКО И ТОЛЬКО JPEG!!!

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

Очень часто бывает что надо вывести список пользователей (например), при этом в базе более 10000 записей с кучей инфы по пользователю - логины, пароль, даты рождения, аватары, биографии, анализы экскрементов и прочее ))), и вся эта информация обрабатывается ресурсами сервера. Так вот. при выводе списка неловкий программер может сделать запрос SELECT * FROM - т.е. делает выборку ВСЕЙ информации в базе, а можно было сделать SELECT nickname FROM - и выбрать только ники - что и требуется выводить.

Далее - объединение запросов. попросите программера объединять запросы в один с помощью JOIN - это не везде возможно, но встречается в 95% случает обращения к базе данных. Таким образом вы значительно ускорите обработку информации, чем несомненно будете рады сами, обрадуете пользователей, поисковые системы и хостера, который на одном серваке держит штук 100 таких сайтов.

Четвертвый шаг - убирайте из сайта ВСЕ ФЛЕШ-ролики, которые можете убрать. Во первых они неактивны в СЕО вообще, а во вторых грузят самих браузеров. Это не относится к флешовым кнопкам и другиv мелким деталькам, это касается анимированых флешовых шапок, футеров и баннеров. Футеры и шапки очень красиво сейчас можно аннимировать с помощью только CSS и яваскрипта, а баннера все равно режутся баннерорезками на раз.

Ну и пятый случай который может ускорить сайт - смена хостинга на сервер, тогда все ресурсы железа достанутся вашему сайту, или смена хостера. Не сочтите за рекламу, но за последний год я работал с ~10ю хостерами, и как минимуму у 6-ти были проблемы то ФТП доступами, то с установленными библиотеками, то вечное падение сервков и тугой канал, один хостинг который ни разу меня не подвел - CamelHost
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 10:58
  #2
avg2010
 
Аватар для avg2010
Регистрация: 13.05.2011
Сообщений: 23

Распиши пожалуйста как работает сервис MetaCDN Service. Интересует механизм ускорения загрузки сайта. Есть личный опыт работы с ним?
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 12:31
  #3
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

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

Регистрацию освещать не буду - там и котенку понятно , единственное что надо сделать правильно - это указывать свои реальные данные на этом шаге





потому что дальше идет подключение карты





, и без правильной биллинговой информации у меня не регался аккаунт





Дальше логинимся с указанным мылом и паролем, и добавляем сайт





Тут вам покажут общую схему работы сервиса





Регистрируем сайт с указание названия, описания (советую брать реальные названия и дескрипшн с рабочего сайта), + 9 поддоменов этого сайта





и выбираем тариф по какому работать








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





Ах, да. САМОЕ главное - у них легкая интеграция пока что только с 4-мя движками

Wordpress,Joomla, Drupal и Magenta.





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

Ищем плагин W3 Total Cache





Ставим и активируем его (это дело не хитрое, поэтому высвечивать как это сделать тут не буду, ИМХО глупо)

В настройках плагина указываю "ускоренный" урл своего сайта . Это делается в вкладке General - Configuration





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

Есть целый ряд возможных причин для возникновения проблемы. Наиболее распространенными являются плохие плагины WordPress и плохой код тем.
Для начала попробуйте повыключать все лишние плагины, и проверить работу W3 Total Cache. Если ничего не дало,то ищите проблему дальше таким образом - в некоторых старых темах, header.php может содержать довольно изворотливые коды, которые открывают выходной буфер, не закрывают его. Например (ob_start () открывает буфер):

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Это может повлиять на работу кэша нашего плагина. Удалите любые такие строки из вашей темы header.php и перезагрузите страницу, чтобы проверить как пойдет работа плагина теперь. В этом случае, W3 Total Cache сам архивирует результат, поэтому нету смысла в этой строчке вообще.

А если все хорошо, то

Сохраняю изменения и жду ускорения ) На смомо деле это еще не все. заходим опять в сервис MetaCDN, и смотрим что у нас с траффиком





P.S. ПО нулям, потому что отключил сервис, а так отображался трафик, сколько они сохранили и сколько ускорили. К сожалению те моменты не заскринил (.

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

Приведу пример из ответа саппорта

из оригинального файла

<script type="text/javascript" src="/js/relativePath.js"></script>
<script type="text/javascript" src="http://www.example.org/js/absolutePath.js"></script>
<link rel="stylesheet" type="text/css" src="/css/relativePath.css">
<link rel="stylesheet" type="text/css" src="http://www.example.org/css/absolutePath.css">
делаем


<script type="text/javascript" src="http://example.sa.metacdn.com/js/relativePath.js"></script>
<script type="text/javascript" src="http://example.sa.metacdn.com/js/absolutePath.js"></script>
<link rel="stylesheet" type="text/css" src="http://example.sa.metacdn.com/css/relativePath.css">
<link rel="stylesheet" type="text/css" src="http://example.sa.metacdn.com/css/absolutePath.css">
А если у вас формируются относительные пути, то придется воспользоваться тегом <base/> для задания точки относительных путей (этот тего задается в <head></head> например <base href="http://example.com/">)
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 14:17
  #4
avg2010
 
Аватар для avg2010
Регистрация: 13.05.2011
Сообщений: 23

Если я правильно понял, то плагин W3 Total Cache в данном случае будет выполнять только подмену ссылок с основного домена на хост METACDN? Насколько возрастает скорость с этим сервисом (хотя бы приблизительно)? Есть ли какие-нибудь мануалы по работе с vBulletin?
---
Спасибо за подробный инструктаж, не первый раз вижу подобные сервисы, но инфы по ним ноль. Думаю многие также не в курсе про самый простой способ оптимизации скорости сайта - расширение Page Speed для Firebug Add-on к Firefox от Google (можешь расписать подробнее, если есть желание). Ну и самый лучший способ что-либо ускорить - это конечно кеширование (как на стороне клиента, так и непосредственно на сервере). Правда здесь уже надо смотреть и на движок сайта (под каждый популярный движок есть свои кеширующие плагины, например тот же W3 Total Cache), и на доступные программно-аппаратные возможности.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 14:26
  #5
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Сообщение от avg2010 Посмотреть сообщение
W3 Total Cache в данном случае будет выполнять только подмену ссылок с основного домена на хост METACDN
Да, каким образом идет этот процесс уже тайна для меня. По Page Speed как раз хочу сегодня рассказать, так что вы читаете мои мысли или просто этот шаг очевиден при данном направлении. Кеширование тоже не всегда панацея, хотя шаг хороший, как-то я его пропустил, спасибо за напоминание. По Vbulletin поговорю с саппортом и отпишусь здесь.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 14:28
  #6
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Позволю себе некорректную просьбу - если ставите оценку, оставляйте ее на первом посте, пожалуйста
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 15:20
  #7
avg2010
 
Аватар для avg2010
Регистрация: 13.05.2011
Сообщений: 23

Учел вашу просьбу ) Думаю, что любые крупные проекты сидят именно на кешировании, иногда это очень хорошо заметно по скорости обновления информации. Кеширование статики на стороне пользователя и запросов в БД на стороне сервера - это те манипуляции без которых можно долго перебираться с одного железа на другое (с каждым разом все более мощное) и при этом без ощутимых результатов.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 16:00
  #8
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

100% на кешировании, это хорошо видно при прочтении новостей, постов. - число просмотров меняется не сразу и спустя некоторое время. Без кеширования базы данных просто были бы постоянно в движении.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.03.2013, 16:33
  #9
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

В продолжении темы смотрите описание функционала плагина PageSpeed
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 06.03.2013, 13:02
  #10
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Сообщение от avg2010 Посмотреть сообщение
Есть ли какие-нибудь мануалы по работе с vBulletin?
ДА, решение есть.
Насколько я понял ускорить можно все, вот общий принцип работы этого сервиса:





А конкретно то Vbulletin выходит следующая картина.

1) Создаем сайт ускоритель как описано выше, и получаем домен CDN, типа, xxxxxxxxx.sa.metacdn.com

2) Настройка vBulletin на использование xxxxxxxxx.sa.metacdn.com в качестве CDN домена (детальнее опишу этот процесс дальше).

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

Настройка Vbulletin несложная

1) Редактируем стили. для этого открываем admincp И вібираем Select Styles & Templates > Replacement Variable Manager





2) В окошке [Add New Replacement Variable] Вводим нужные изменения:

Искомый текст href="clientscript
Заменяем на href="http://xxxxxxxxx.sa.metacdn.com/clientscript





Таким образом меняем следующие переменные
(ДО
ПОСЛЕ):

src="clear.gif"
src="http://xxxxxxxxx.sa.metacdn.com/clear.gif"

src="customavatars/
src="http://xxxxxxxxx.sa.metacdn.com/customavatars/

src="customprofilepics/
src="http://xxxxxxxxx.sa.metacdn.com/customprofilepics/

src="images/
src="http://xxxxxxxxx.sa.metacdn.com/images/

url("clientscript
url("http://xxxxxxxxx.sa.metacdn.com/clientscript

src="clientscript/
src="http://xxxxxxxxx.sa.metacdn.com/clientscript/

href="clientscript/
href="http://xxxxxxxxx.sa.metacdn.com/clientscript/

url(./images/
url(http://xxxxxxxxx.sa.metacdn.com/images/

url(images/
url(http://xxxxxxxxx.sa.metacdn.com/images/

var imgdir_misc = "images/misc";
var IMGDIR_MISC = "http://xxxxxxxxx.sa.metacdn.com/images/misc";
3) Далее - настраиваем аватары и вложения. ДЛя этого их все надо перенести НА ДИСК

В качестве заключения приведу слова саппорта

После ускорения загрузка форума начала идти со скосротью от 8,5 секунд до 2,2 секунд, а до этого скорость колебалась от 14,3 секунд до 5 секунд




Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Метки
camelhost, мануал, оптимизация, скорость сайта


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


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