Социальные плагины. Кто как умеет бороться с ними?

Question

[Daniel Newman]

Захожу на главную страницу нашего новостного портала.

+350 ms ожидания и html-страница загрузилась.

+100 ms — css

далее сыпется море блокирующих запросов G+, FB плагинов, скрипты

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

количеству скриптов.


Наше: html, css, 25 картинок, загрузка которых отложена скриптами

социалок на все 1500 ms. Загрузка самих картинок измеряется 20-60 ms

каждой + задержка сервера — 15 ms.


Итого — 89 запросов 924.8 Кб, загрузка 3930 ms из которых 780 Кб -

социалки и их контент, конкурирующие с основными картинками, всё

это затянуло процесс на 2500 ms лишнего времени, что критично.


Что, кроме переноса скриптов в хвост страницы, можно предпренять,

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

социалок на самое потом?






upd: по совету общественности
habr.ru/post/148213/
habr.ru/post/105850/
habr.ru/post/136360/
habr.ru/post/49245/    (webo.in/articles/habra...)

Comments

[Eugene]

chrome.google.com/webstore/detail/mlomiejdfkolichcflejclcbmpeaniij

Answer 1

[Wott]

Делаете отложенную загрузку
Легкий вариант например для G+ гугл предлагает по умолчанию
Можно функцию вызывать по onload или даже по таймеру после onload

Comments

[Daniel Newman]

И вы правы.

Answer 2

[charliez]

А, и еще, погуглите на тему «асинхронная загрузка». Посмотрите как сделано это например у rbc.ru если открыть любую новость, в конце исходного кода страницы. Все эти социальные кнопочки подгружаются в конце динамически и рендерятся на странице динамически.

Answer 3

[charliez]

некоторые внешние скрипты иногда можно (и нужно) загружать со своего сайта (тупо скопировать на свой хост и загружать оттуда).

Answer 4

[Максим Иванущик]

На хабре проскакивал пост о одном из способах ассинхронной загрузки файлов. Автор делится своим решением.

Answer 5

[Алексей Сундуков]

Если еще не установлена такая штука как Page Speed от Google, то рекомендую поставить.

Comments

[Daniel Newman]

И что же он вам скажет об асинхронных скриптах?)

[Алексей Сундуков]

Совет об асинхронке у них есть developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources и в подсказках он выводится. Проверил на примере данной страницы.

Даже если бы он там не выводился, Page Speed все равно был бы инструментом, которым должен быть в арсенале любого веб разработчика занимающегося оптимизацией загрузки страниц.

Answer 6

[Dzen_Marketing]

Badoo на HPC рассказывали, что они грузят обычную картинку, изображающую лайк, а потом когда надо подгружают виджет

Comments

[Daniel Newman]

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

Answer 7

[egorinsk]

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

Comments

[egorinsk]

А если вы разработчик сайта — то можно 1) грузить плагины асинхронно (некоторые не рассчиатны на это, но всегда можно сделать костыль) 2) не ставить эти плагины 3) грузить только при прокрутке страницы до определенного места 4) грузить асинхорнно через N секунд после загрузки 5) показать вместо них статические картинки, а при клике/подведении мыши подменять на настоящие (но тут нужны эксперименты) 6) скрыть за кнопкой и загружать только при клике на кнопку.

Способов — море. было бы желание.

[Daniel Newman]

Вот потому и вопрос был — потому что способов море, а успешных практик — единицы. Спасибо.

[egorinsk]

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

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

[Daniel Newman]

Мое дело маленькое — оптимизировать загрузку страницы и снизить нагрузку на сервер. К тому же, никто из-за меня не будет отказывться от многолетней оправданной практики комментариев с помощью fb-виджета. Да и у меня таких желаний не возникало.

Answer 8

[Mikhail Osher]

Я может поздно пришел, но я гружу все плагины через async=true