SNSボタンを後から読み込んでみたこの記事は2013年6月21日に公開されました。遅くて重いWordpressサイトの速度改善を目指していろいろとやってみた話のひとつ。WordPress自体も遅いし安いレンタルサーバーも遅いけど、とりわけ何が遅いって、facebookやTwitterなどのSNSですがな。これを貼り付けた瞬間、表示が激遅になります。そこでいろいろ探ってみた。非同期にするといいそうな。わかりませんが、非同期にするといいそうです。どこに足したかというとここなんです。'facebook-jssdk'));</script>よくわからないながらもTwitterのコードにも同じような文字列を見つけて足してみた。結果、少し改善した感じではありました。これで過ごしていたんですが、でもやっぱり読み込みの遅さが気になります。そこでもう少し調べてみたら、そもそもSNS絡みのコードをページと一緒に読み込むから遅いんであって、これを遅らせればいい、ということがわかりました。SNSボタンなんぞは、ページの読み込みや描画が終わってから時間差でゆっくり読み込めば十分であるという考え方ですね。その方法がわかりません。方法やスクリプトを書いている記事を漁ってみましたが、そもそもスクリプトとか、何のことやらわかりません。「あとはご自身の環境に応じて便宜書き換えてください」などと言われても何がご自身なのか便宜とはどこをどうするのか、基礎的なことすらわからないからどうしようもありません。拝借できそうな具体例を探してまわります。探し続けて最適な記事を見つけました。デザイン日々独学さんの「Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!」という派手派手しいタイトルのこの記事です。記事では、まず最初に概要とそのコードが、次に具体例とそのコードが書かれています。これは素人にとってとてもありがたい配慮です。意味がわからないところは具体例に当てはめて何とかなります。具体例をそのままコピーして自分のサイトで試しましたところ、何とエラーも出ずにちゃん処理されているじゃありませんか。コードをコピぺしても自サイトではエラーが出るもんです。思い通りに動いているわけではありません。それは当たり前ですね。設置しているボタンも表示しようとしているdivのcssクラスも違いますから。一つずつ検証と修正を施します。以下、「Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!」さんの載せているコードをお手本に、どのように変えていったかを記します。該当記事とセットでお読みください。不要なところを消すまず使用するこちらのサイトには「はてなボタン」はありません。これは不要なので消し去ります。<![CDATA[</script>';これを消しました。するとエラーが出ました。エラーのわけはすぐにわかりました。最初の定義のところや、最後の表示のところに消した部分に関する記述があります。「hatena_btn」というのがそれです。これらを同じように消してあげて整合性を取らねばなりません。整合性を取り、動作を確認します。