【一撃改善】ブログにTwitter埋め込むと遅い問題はツイッター風で解決!

Twitter埋め込むと遅いのを改善 ブログ・YouTube
当ブログでは、アフィリエイト広告を利用しています
楽観的なペンギン
楽観的なペンギン
ブログ記事にツイートを埋め込むと、ページ速度超遅い。
解決方法ってないの?

今日はこんな疑問に答えます。

ページ表示速度が遅いと、ユーザーが離脱する原因になります。
結果、SEOの評価も下がり、検索上位にも上がりにくいので要改善。

こんな感じなので、表示速度は速いに越したことはないという訳。

この記事を書いている僕もTwitter埋め込みを多用しており、ページ速度の観点で悩んでいましたが…

Twitter風ツイートで代用することで、ページ表示速度の改善に成功しました。

こんな感じですね。

ちなみに、ページ速度を改善したのは、サブドメインで運用しているブログです。

AKバイク【原付特化】
原付買取の全て『実体験ベースで金額を晒す』

という訳で、本記事ではTwitter風ツイートの作成の仕方を解説します。

なるべく丁寧に書いていますが、HTMLとCSSの知識が全くない方は厳しいかも。
その場合、『誰かにサポートをしてもらう』、『Twitter風ツイート無理な人向け解決策』が参考になるかと思います。
スポンサーリンク

Twitter風アイコンを作成してスコアーを大幅改善

大見出し1

上記の通り、PageSpeed Insightsのスコアーを大幅改善に成功。

で、やったことと言えば、Twitterの埋め込み機能でなく、Twitter風のツイートを作成しただけです。

参考になったのは、ナコさんが書いた以下の記事。

https://nakox.jp/web/coding/chat_twitter_css#outline__2_1

こちらの記事を参考に、ツイッタ風ツイートを作成しました。

スポンサーリンク

Twitter風ツイートの作成の仕方と手順

  1. function.phpにコードを追加
  2. svgフォルダーをダウンロード
  3. FTPを使って、svgフォルダーをアップロード
  4. cssコードをコピーして追加
  5. HTMLコードをコピーして追加

上記の4つですね。

順に解説します。

function.phpにコードを追加

function.phpを変更する前にバックアップをしてください。
バックアップがあれば真っ白になっても元の状態に戻すことが可能。

  1. //////////////////////////////////////////////////
  2. //ショートコードで囲んだ範囲のp,&nbspタグを消す
  3. //////////////////////////////////////////////////
  4. function noFunc( $atts, $html = null ) {
  5.     $html = str_replace( ‘<p>’ , ” , $html );
  6.     $html = str_replace( ‘</p>’ , ” , $html );
  7.     $html = str_replace( ‘&nbsp’ , ” , $html );
  8.     return $html;
  9. }
  10. add_shortcode(‘no’, ‘noFunc’);

 

上記のコードをコピーしたら

  1. 外観→テーマエディターと進み
  2. 子テーマのfunction.phpを選択
  3. 1番下にコードを貼り付け、ファイルを更新

子テーマのfunction.php1番下にコードを貼り付け、ファイルを更新。

これでOK。

svgフォルダーをダウンロード

以下をクリックしてください。

https://Akio3594.com/wp-content/uploads/2021/01/svg.zip
クリックすると、svg.zipがダウンロードできます。
ファイルを圧縮しているので、解凍してください。

FTPを使って、svgフォルダーをアップロード

Svgフォルダーを解凍したら、FTPを使って子テーマにアップロードします。

僕はFFFTPソフト(windouwsユーザ向け)を利用してアップロードしています。
macユーザーはCyberduckが利用しやすいかと。

FTP

  1. 左側(ローカル環境)のsvgを選択
  2. 右側(サーバー側)が子テーマなのを確認
  3. アップロードをクリック

右側(サーバー側)にsvgファイルが追加されればOK

Twitter風CSSコード1と2をコピーして追加

CSSコードをコピーします。

以下のTwitter風CSSコード1を「外観→カスタマイズ→追加CSS」に貼り付けてください。

  1. /*/////////////////////////////////////////////////
  2. //twitter風チャット画面(会話方式)を記事に表示する方法
  3. /////////////////////////////////////////////////*/
  4. .twitter__container {
  5.   padding: 0;
  6.   background: #ffffff;
  7.   overflow: hidden;
  8.   max-width: 400px;
  9.   margin: 20px auto;
  10.   font-size: 80%;
  11.   border: solid 1px #eeeeee;
  12. }
  13. .twitter__container a {
  14.   color: #58aeed;
  15. }
  16. /* タイトル部分 */
  17. .twitter__container .twitter__title {
  18.   background: #58aeed;
  19.   padding: 10px;
  20.   text-align: center;
  21.   font-size: 150%;
  22.   color: #ffffff;
  23. }
  24. .twitter__container .twitter__title .twitter-logo {
  25.   margin: 0 auto;
  26.   width: 20px;
  27.   height: 20px;
  28.   display: block;
  29.   background: url(svg/twitter-logo.svg) center no-repeat;
  30. }
  31. .twitter__container .twitter__title span {
  32.   font-size: 20px;
  33. }
  34. /* タイムライン部分 */
  35. .twitter__container .twitter__contents {
  36.   overflow: hidden;
  37.   position: relative;
  38.   line-height: 135%;
  39. }
  40. .twitter__container .twitter__contents.scroll {
  41.   height: 500px;
  42.   overflow-y: scroll;
  43. }
  44. .twitter__container .twitter__block {
  45.   width: 100%;
  46.   display: block;
  47.   padding: 10px;
  48.   margin-bottom: 5px;
  49.   border-bottom: solid 1px #eeeeee;
  50.   overflow: hidden;
  51. }
  52. .twitter__container .twitter__block:last-child {
  53.   border-bottom: solid 0px;
  54. }
  55. /* アイコン画像 */
  56. .twitter__container .twitter__block figure {
  57.   width: 50px;
  58.   padding: 0;
  59.   margin: 0;
  60.   float: left;
  61.   width: 50px;
  62. }
  63.   /* 正方形を用意 */
  64. .twitter__container .twitter__block figure img {
  65.   border-radius: 50%;
  66.   width: 50px;
  67.   height: 50px;
  68. }
  69. /* コメントエリア */
  70. .twitter__container .twitter__block-text {
  71.   margin: 0;
  72.   position: relative;
  73.   margin-left: 60px;
  74.   padding-right: 10px;
  75. }
  76. .twitter__container .twitter__block-text .name {
  77.   font-weight: bold;
  78. }
  79. .twitter__container .twitter__block-text .name .name_reply {
  80.   color: #8a9aa4;
  81.   margin-left: 10px;
  82. }
  83. .twitter__container .twitter__block-text .date {
  84.   position: absolute;
  85.   top: 0;
  86.   right: 20px;
  87.   text-align: right;
  88.   color: #8a9aa4;
  89. }
  90. /* 本文 */
  91. .twitter__container .twitter__block-text .text {
  92.   margin: 5px 0;
  93. }
  94. /* 画像を貼る場合 */
  95. .twitter__container .twitter__block-text .text .in-pict img {
  96.   border-radius: 20px;
  97.   -webkit-border-radius: 20px;
  98.   -moz-border-radius: 20px;
  99.   margin: 5px 0;
  100.   width: 95%;
  101.   height: 200px;
  102.   object-fit: cover;
  103. }
  104. /*///////////////////////////////////////////
  105. //埋め込みアイコン
  106. ////////////////////////////////////////////*/
  107. .twitter__container .twitter__icon br{
  108.   display: none;
  109. }
  110. .twitter__container .twitter__icon .twitter-bubble {
  111.   width: 14px;
  112.   height: 14px;
  113.   display: block;
  114.   padding-left: 20px;
  115.   background: url(“svg/twitter-bubble.svg”) left no-repeat;
  116.   width: 20%;
  117.   float: left;
  118.   color: #8a9aa4;
  119. }
  120. .twitter__container .twitter__icon .twitter-heart {
  121.   width: 14px;
  122.   height: 14px;
  123.   display: block;
  124.   padding-left: 20px;
  125.   background: url(“svg/twitter-heart.svg”) left no-repeat;
  126.   width: 20%;
  127.   float: left;
  128.   color: #8a9aa4;
  129. }
  130. .twitter__container .twitter__icon .twitter-loop {
  131.   width: 14px;
  132.   height: 14px;
  133.   display: block;
  134.   padding-left: 20px;
  135.   background: url(“svg/twitter-loop.svg”) left no-repeat;
  136.   width: 20%;
  137.   float: left;
  138.   color: #8a9aa4;
  139. }

 

次に以下のTwitter風CSSコード2を「外観→カスタマイズ→追加CSS」に貼り付けてください。

  1. .twitter__container {
  2.   padding: 0;
  3.   background: #ffffff;
  4.   overflow: hidden;
  5.   //max-width: 400px; ←コメントアウトする
  6.   margin: 20px auto;
  7.   font-size: 80%;
  8.   border: solid 1px #eeeeee;
  9. }

 

HTMLコードをコピーして追加

テキストモードで、Twitter風ツイートを表示させたい場所に貼り付けてください。

ツイッター風HTMLコード(画像なし)

  1. <div class=”twitter__container”>
  2.     <div class=”twitter__title”>
  3.       <span class=”twitter-logo”></span>
  4.     </div>
  5.       <div class=”twitter__block”>
  6.         <figure>
  7.           <img src=”ここにプロフィール画像URL” />
  8.         </figure>
  9.         <div class=”twitter__block-text”>
  10.           <div class=”name”><a href=”https://twitter.com/Akraft3594/status/1317747743654256640?ref_src=twsrc%5Etfw”>ここに名前</a><span class=”name_reply”>ここに@~</span></div>
  11.           <div class=”date”>ここにツイート投稿日</div>
  12.           <div class=”text”>
  13.            ここにツイート内容
  14.             </div>
  15.            </div>
  16.           <div class=”twitter__icon”>
  17.             <span class=”twitter-bubble”>リプ数</span>
  18.             <span class=”twitter-loop”>リツイート数</span>
  19.             <span class=”twitter-heart”>いいね数</span>
  20.           </div>
  21.         </div>
  22.       </div>

 

ツイッター風HTMLコード(画像あり)

  1. <div class=”twitter__container”>
  2.     <div class=”twitter__title”>
  3.       <span class=”twitter-logo”></span>
  4.     </div>
  5.       <div class=”twitter__block”>
  6.         <figure>
  7.           <img src=”ここにプロフィール画像URL” />
  8.         </figure>
  9.         <div class=”twitter__block-text”>
  10.           <div class=”name”><a href=”ここにプロフィール画像URL”>ここに名前@~</a></span></div>
  11.           <div class=”date”>ここにツイート投稿日</div>
  12.           <div class=”text”>
  13. ここにツイート内容
  14.             <div class=”in-pict”>
  15.               <img src=”ここに画像URL”>
  16.             </div>
  17.           </div>
  18.           <div class=”twitter__icon”>
  19.             <span class=”twitter-bubble”>リプ数</span>
  20.             <span class=”twitter-loop”>リツイート数</span>
  21.             <span class=”twitter-heart”>いいね数</span>
  22.           </div>
  23.         </div>
  24.       </div>
  25. </div>

 

background-imageを変更

  • twitter__container .twitter__title .twitter-logo
  • twitter__container .twitter__icon .twitter-bubble
  • twitter__container .twitter__icon .twitter-heart
  • twitter__container .twitter__icon .twitter-loop

上記クラスの『background: url』をアップロードした、svgフォルダーとパスで繋ぎます。

  1. https://Akio3594.com/wp-content/themes/cocoon-child-master/svg/twitter-logo.svg

 

※上記は私のブログの場合のパスです。
子テーマにアップしているなら、サイトURLを変更すれば代用できると思います。

Twitter風のツイートが完成!

ツイッター風(画像なし)バージョン

ツイッター風(画像あり)バージョン

画像を貼るバージョンでは画像の高さが、 height: 200px;になっています。
ココは各自で最適な高さを調整してください。

【Twitter風ツイートが無理な人向け】検討したい3つの解決策

大見出し4

『ツイッター風が難しい』、『めんどくさい』、『気にいらない』

こういった方もいるはずなので、そういった人は以下の3つを検討してみるといいかも。

なお、サーバー変更や画像の圧縮などはここでは除外。
あくまでTwitterに焦点を絞った解決策です。
  1. Twitterを埋め込まない
  2. スクリプトタグを削除する
  3. Twiiterのasyncを削除し非同期読み込み

①はそもそもTwitteを埋め込まないという選択。

②と③は、私の場合効果は微妙でしたが、以下の記事で速度改善に効果があると紹介されていました。

404 NOT FOUND | KT LIFE
KEITOのAI情報発信を見やすくまとめコラム化

順に解説します。

Twitterを埋め込まない

そもそもTwitterを埋め込みをしなければ、表示速度は遅くなりません。

Twitterに限らず、Instagramやyoutubeなども同様。

要は、外部ソースを読み込むとどうしても、スコアーは悪くなります。

私の場合は、信頼性と見え方を変えれるとメリットから、Twitter埋め込みを辞める選択肢はありませんでしたが…

楽観的なペンギン
楽観的なペンギン

みんなTwitter埋め込んでるし、なんとなく埋め込んでます。

こんな感じなら、辞める選択肢もアリ。

Twiiterのasyncを削除し非同期読み込み

下記は私のツイートのコード。

  1. <blockquote class=”twitter-tweet”><p lang=”ja” dir=”ltr”><a href=”https://twitter.com/hashtag/%E6%9C%AC%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw”><a href=”https://twitter.com/hashtag/%E3%83%96%E3%83%AD%E3%82%B0%E6%9B%B8%E3%81%91?src=hash&amp;ref_src=twsrc%5Etfw”></a></p> <a href=”https://twitter.com/Akraft3594/status/1346249672961134594?ref_src=twsrc%5Etfw”>January 5, 2021</a></blockquote> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

 

最後の方に、『script async src=”https~』みたいなのありますよね。

この部分の『async』を削除→『script src=”https~』

こんな感じにするということです。

『async』を消すと早くなる理由については、参考元のブログ『KT LIFE』を読んでください。

スクリプトタグを削除する

Twitterの埋め込みには全て下記のスクリプトタグが入っています。

  1. <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

 

このタグはページ内に1つ入っていればいいので、複数のツイートを貼っている場合は、削除しましょう。

スクリプトタグは、コードの中でも重たいらしい。

なので、不要なスクリプトタグを削除することで、ページ速度を早くできるようです。

私の場合はイマイチ効果を実感できませんでしたが、簡単にできるのでトライする価値はあります。

最後に:自分で改善できないなら人を頼るのもアリ

大見出し5

今回のページ速度改善ですが、ぶっちゃけ僕一人の力で高速化できたわけではありません。

すいみんさんにサポートしてもらいました。

PageSpeed Insightsで問題箇所を指摘されてもぶっちゃけ素人には何を改善すればいいのかわからないですよね。

今回Twitterの埋め込みが原因なのもすいみんさんにサポートをしてもらったからこそ気づけました。

Twitter風ツイートも、その過程で導入することに至ったという訳です。

めちゃくちゃ丁寧にアドバイスくれるので、初心者のかたも利用しやすいと思います。
あと、お正月にも関わらずレスポンスが超早かったので、助かりました。

一人で悩んでいる場合は、誰かにサポートを依頼する選択肢も大いにアリです。

僕が利用したすいみん@cg_methodの詳細依頼ページを貼っておきます。

https://www.cg-method.com/side-job/design-request-for-blogger/

という訳で、先輩方の記事とすいみんさんのサポートに感謝して今回の記事はおわります。

参考にした記事とページ速度を改善できた自分のサイト

ナコさんのブログ

https://nakox.jp/web/coding/chat_twitter_css#outline__2_1

Kt lifeさんのブログ

404 NOT FOUND | KT LIFE
KEITOのAI情報発信を見やすくまとめコラム化

すいみんさんの詳細依頼ページ

https://www.cg-method.com/side-job/design-request-for-blogger/

ページ速度を改善できた自サイト(サブドメインで運営)

AKバイク【原付特化】
原付買取の全て『実体験ベースで金額を晒す』

コメント

タイトルとURLをコピーしました