Снижение производительности кнопок социальных сетей
Я подумал о том, чтобы добавить возможность:
- Нравится (Facebook)
- Поделиться (Facebook)
- Твит (Твиттер)
- Поделиться (Google+)
На странице продукта. Для этого я использовал фрагменты кода, доступные непосредственно с каждой из консолей разработчиков платформ социальных сетей, а именно:
Репрессивно.
Я полагал, что это будет наиболее минималистичный подход к добавлению поддержки социальных сетей (в отличие от установки расширения для этого). Результат, однако, не был приятным. :-/
До того, как:
- Время загрузки страницы: 1,96 с
- Общий размер страницы: 233 КБ
- Общее количество запросов: 34
После:
- Время загрузки страницы: 3,02 с
- Общий размер страницы: 783 КБ
- Общее количество запросов: 50
Использование http://gtmetrix.com / для анализа производительности. Это ужасно! Неужели я так плохо подхожу к этому? Был бы признателен за некоторый вклад.
1 answers
Проведя довольно много исследований, я пришел к следующим выводам:
Подводные камни кнопок социальных сетей
- Зависит от Javascript
- Загружает сторонние ресурсы
- Добавляет дополнительные http-запросы
- Добавляет дополнительный вес страницы
1. Непосредственно от разработчика
Если вы перейдете по любой из ссылок, которые я упомянул в вопросе (т.е. в зону разработчиков для Facebook/Twitter/Google+), эти кнопки будут отображаться на счетчике механизм попадает во все вышеупомянутые ловушки.
2. Пользовательские легкие кнопки
Я решил использовать пользовательские кнопки, которые я разработал для себя, используя простой CSS/HTML, без JS. Я объединил кнопки, используя методы сращивания, и в итоге добавил около 3 КБ к размеру страницы и одному запросу.
- Facebook: https://www.facebook.com/sharer/sharer.php?u=_YOUR_URL
- Google+: https://plus.google.com/share?url=_YOUR_URL
- Твиттер: http://twitter.com/home/?status=_YOUR_URL
Вы также можете добавлять текст, хэштеги, упоминания и т.д. Просто прочитайте информацию о разработчике напрямую из наборов социальных сетей, и вам будет хорошо.
Метод счетчика (т.Е. просмотр того, сколько людей делятся страницей), к сожалению, невозможен со статическими ссылками, подобными этой, вам понадобится немного JS на странице, и это то, что я для один из них готов сдаться ради производительности.