Сайт, социальные сети. Скорость ресурса (мысли вслух)

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 factotum » 28.02.2013, 14:12

Почти месяц внимания уделил кнопкам социальных сетей. Поделюсь опытом.

Страницы в соц. сетях полезны.

Почему:

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

В результатах поиска Гугл ранжирует сайты с учетом наличия интеграции с Гугле+ (требует наличия аккаунта в Г+ и соответствующей кнопки на сайте). Сайты с такой интеграцией получают более выгодные позиции. Долгая тема, но после впитанного, возникло ощущение, что гугл порой принудительно вынуждает заниматься Г+. Г+, так Г+, нам ничего не стоит создать нужное и на Г+. Итог: Плюс к посещаемости.

Твиттер и Фейсбук предлагают почитать похожие страницы. Среди них может быть и Ваша. Небольшой, но все же плюс к посещаемости.

Итог: Плюс к посещаемости.

Кнопки
Дайте возможность читателям прорекламировать ваш ресурс среди своих друзей в соц.сетях. Кнопкам быть!
Снова таки, лайки и плюсики учитываются в ранжире поиска.
Итог: Плюс к посещаемости.

Теперь о сложном - реализация кнопок.

Отказался от кнопок соцсетей, реализованных ссылкой. У меня это не работало, кнопки просто занимали место на страничке.

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

Вот тут возникают вопросы.
Кнопки тащят за собой кучу кода. Для FB, Twitter и G+ это более 100кб. Даже с асинхронной загрузкой скриптов, у меня скорость загрузки страницы увеличивалась вдвое.
О скорости загрузки можно долго рассуждать, но мне это не нужно. Приведу цитаты:
Akaimi:47% пользователей ожидают, что страница будет грузится не дольше 2-х секунд;
40% не дождутся загрузки страницы, если та открывается дольше 3-х секунд;
52% покупателей утверждают, что скорость загрузки страницы важна для их лояльности;
14% уйдут в другой магазин, если сайт будет медленным, 23% просто остановят процесс покупки или вообще отойдут от компьютера;
64% пользователя вряд ли вернуться в магазин, если останутся недовольными его работой.
молодые люди (до 25 лет) менее терпеливы и обычно ждут не более 2-х секунд
Google:Возможно, вы слышали, что мы, в Google мы одержимы скоростью наших продуктов и Сети в целом. В рамках этих усилий, мы начали учитывать в нашем рейтинге поисковых алгоритмов скорость работы сайтов.
Gomez Peak Time Internet Usage Study:в часы пик 75% посетителей ушли на сайты конкурентов не дождавшись загрузки сайта;
88% пользователей высказались, что вряд ли вернуться на сайт после неудачной попытки его открытия;
больше половины выразили менее позитивное мнение о компании в целом, чей сайт медленно открывался;
более трети поделились негативным впечатлением со знакомыми.
Amazon.com: Каждые дополнительные 100мс загрузки снижали продажи на 1% (Kohavi and Longbotham 2007).
Google: увеличением числа отображаемых результатов в поиске с 10 (страница открывалась за 0.4 сек) до 30-ти (загрузка = 0.9 сек) привела к снижению трафика и доходов от рекламы на 20% (Linden 2006).
Google: задержка в 400 миллисекунд привела к потери 0.59% пользователей. Более того, даже после того, как задержка была устранена, почти половина потерянных пользователей не вернулась. Это доказывает, что медленную загрузку сайта пользователи воспринимают как долгосрочное явление.
Может и не все так страшно, но вполне достаточно, чтобы уделять больше внимания производительности ресурса, что и было сделано.

Полученный опыт:
1. Реализация кнопок соц.сетей ссылками не дает ожидаемого результата.
2. Реализация кнопок соц.сетей через оригинальный код существенно увеличивает время загрузки страницы.
3. Правильная реализация кнопок на iframe является самой быстрой при прямой загрузке (позволяет избежать многочисленных редиректов = отправки/получении данных)
4. Отложенная загрузка: Страница загружается без кнопок, и лишь после полной загрузки страницы подгружается код кнопок. Реальное решение.
Варианты:
- подгружать скрипты через триггер onload. Пример есть и на этом форуме.
- использовать Socialite.js. Скрипт актуальной версии всего 8кб. Поддерживает практически все известные сервисы. Изюминка: позволяет очень просто и гибко настроить собственные триггеры загрузки кода кнопок - "hover", "scroll", выбрать нужный ноуд и т.д. Доп.нагрузка - пока не сработает триггер, вместо кнопок нужно показывать что-то свое. Пустые ноуды, картинки...
Есть и другие варианты. Например, для маньяков анонимности: http://panzi.github.com/SocialSharePrivacy/

Отчего столько внимания к этим вопросом? статистика моих ресурсов говорит, что поисковые системы дают ~60% трафика. Достаточная цифра, чтобы повернуться лицом к поисковым системам.

Добавлено спустя 2 часа 8 минут 36 секунд:
Немного статистики без кеша:
минимальное время загрузки страницы без скриптов: DOM 1.59c. onload: 1.61с
Twitter Follow ( original ): DOM 1.96c (+23.%). onload: 1.96c (+22%)
Twitter Follow ( iframe ): DOM 1.77c (+11.%). onload: 1.78c (+12%)
Twitter Follow ( onload ): DOM 1.60c (+0.60%). onload: 2.00c (+24%)
Twitter Follow ( onload Socialite.js ): DOM 1.60с (+0.60%). onload: 1.63с + кнопки после триггера (+1%+ кнопки)
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет

Сообщение #2 factotum » 28.03.2013, 11:24

http://www.phpied.com/category/javascript/
варианты оптимизаций социальных виджетов от Stoyan Stefanov.

небольшой приятный фрейморк для кнопок соцсетей: https://github.com/stoyan/c3po
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет

Сообщение #3 factotum » 17.04.2013, 02:11

не знаю как у кого, а у меня FB лежит уже пол.суток.
в этом свете загрузка скриптов соц.сетей переехала за onload и приобрела таймаут.
Код: Выделить всё
jQuery(window).load(function() {
            jQuery.ajax({
               url: "//platform.twitter.com/widgets.js",
               dataType: "script",
               cache: true,
               crossDomain: true,
               timeout: 1900
            });
            jQuery.ajax({
               url: "//apis.google.com/js/plusone.js",
               dataType: "script",
               cache: true,
               crossDomain: true,
               timeout: 1900
            });
            jQuery.ajax({
               url: "//vk.com/js/api/openapi.js",
               dataType: "script",
               cache: true,
               crossDomain: true
            }).done(function() {
               VK.init({
                  apiId: "YOU API ID",
                  onlyWidgets: true
               });
               VK.Widgets.Like(
                  "vk_like", {
                     type: "button",
                     height: "20"
                  }
               );
            });
            jQuery.ajax({
               url: "//connect.facebook.net/" + document.documentElement.lang.replace("-", "_") + "/all.js",
               dataType: "script",
               cache: true,
               crossDomain: true,
               timeout: 1900
            }).done(function() {
               FB.init({
                  appId : "YOU APP ID",
                  status : true,
                  cookie : true,
                  xfbml : true,
                  oauth: true
               });
            });
         });

Добавлено спустя 5 минут 18 секунд:
кому лень париться - скрипт, пережатый Closure
Код: Выделить всё
var a=!0;
jQuery(window).load(function(){$.ajax({url:"//platform.twitter.com/widgets.js",dataType:"script",a:a,b:a,timeout:1900});$.ajax({url:"//apis.google.com/js/plusone.js",dataType:"script",a:a,b:a,timeout:1900});$.ajax({url:"//vk.com/js/api/openapi.js",dataType:"script",a:a,b:a}).done(function(){VK.c({f:"YOU API ID",i:a});VK.e.d("vk_like",{type:"button",height:"20"})});$.ajax({url:"//connect.facebook.net/"+document.documentElement.lang.replace("-","_")+"/all.js",dataType:"script",a:a,
b:a,timeout:1900}).done(function(){FB.c({g:"YOU APP ID",status:a,cookie:a,j:a,h:a})})});
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет

Сообщение #4 Рарогъ » 28.04.2013, 20:55

Понятно, что речь идет о кнопках социальных сетей, вроде как они реализованы, работают нормально, да и скорость работы пока устраивает, спасибо разработчикам! Только вот есть вопрос: в админке есть пункт в закладке "настройки отображения" - Путь к обложке для социальных сетей. Не могли бы Вы пояснить что это такое, для чего и где взять эту страницу, чтобы указать к ней путь?
Вложения
Снимок.png
Рарогъ M
Аватара
Откуда: Анапа
Репутация: 13
С нами: 11 лет 1 месяц

Сообщение #5 HD321kbps » 28.04.2013, 21:03

HD321kbps M
Аватара
Откуда: Армянск
Репутация: 376
С нами: 11 лет 1 месяц

Сообщение #6 Рарогъ » 28.04.2013, 21:21

Благодарю! Странно, что поиск по сайту ничего не выдал (((. Полезная штука, буду пользоваться!
Рарогъ M
Аватара
Откуда: Анапа
Репутация: 13
С нами: 11 лет 1 месяц

Сообщение #7 factotum » 29.04.2013, 08:42

У Фейсбука намечены изменения: https://developers.facebook.com/roadmap/
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет

Сообщение #8 factotum » 22.11.2013, 17:33

factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет

Сообщение #9 Андрей » 15.12.2013, 13:42

Добрый день
а как установить этот скрипт в форум?
Андрей
Репутация: 0
С нами: 10 лет 4 месяца


Вернуться в Мастерская 1.x



cron