Socialite.js를 사용한 지연로드 소셜 버튼

스피드 키보드

오늘 저는 Angie 's List의 웹 팀과 함께 환상적인 하루를 보냈습니다. Angie 's List는 사이트를 놀라운 리소스 라이브러리로 발전시켜 왔습니다. 그리고 계속해서 사이트 속도를 높이고 있습니다. 그들의 페이지는 눈부신 속도로로드됩니다. 나를 믿지 않는다면이 페이지를 팝업 차고 문.

페이지에는 이미지, 비디오 및 소셜 버튼이 통합되어 있으며 밀리 초 단위로로드됩니다. 그들의 사이트를 내 사이트와 비교하는 것은 F-16으로 Prius를 경주하는 것과 같습니다. 고객 경험을 개선하고 콘텐츠를 찾고 공유 할 수있는 방법을 항상 모색하고 있습니다.

우리는 풀 타임 개발 팀이나 상장 기업의 자원이 없기 때문에 진행이 Angie 's List보다 약간 느립니다. 우리는 플라이휠 – 고급 캐싱 및 CDN을 활용하지만 여전히 우리를 해치는 것이 있다는 것을 알고 있습니다. 예를 들어, 이미지가 최적화되지 않았습니다. 선명도를 유지하면서 이미지를 크기의 일부로 변환 할 수있는 서비스가 있습니다. 우리는 그들을보고 있습니다.

내가 그들에게 우리 사이트를 보여줄 때, 나는 소셜 버튼을로드 할 때 페이지가 멈춤에 따라 내 머리를 구부리고 매달렸다. 페이스 북이라고 생각합니다. 아아… XNUMX ~ XNUMX 초 후에 버튼이 나타나고 나머지 페이지가로드되었습니다. 으.

제가 문제를 설명하자 엔지니어는 즉시 해결책을 찾았습니다. 사회자.js. Socialite는 원하는 시간에 수많은 소셜 공유 버튼을 구현하고 활성화하는 매우 쉬운 방법을 제공합니다. 문서로드시, 기사 호버링시, 모든 이벤트에서! socialite는 버튼을 비동기 적으로로드하기 때문에 50kb의 소셜 미디어를 기다리는 동안 문서가 중단되지 않습니다.

고맙게도 Socialite를 통합하는 WordPress 플러그인이 이미 있습니다. WP소셜라이트. 오늘 밤에는 버튼을로드하기위한 모든 사용자 정의 코드를 뜯어 내고 WPSocialite를 구현했습니다. CSS를 커스터마이즈하고 원하는 버튼을 수정할 수있었습니다. 앞으로 Buffer 또는 Reddit과 같은 몇 가지 추가 버튼이 추가되기를 기대하고 있지만 지금은 완벽합니다!

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.