AMPに「highlight.js」シンタックスハイライトを適用する

WordPress Twenty Seventeen
pre ソースコードのハイライト
AMPページで「highlight.js」を使用する
 
「Crayon Syntax Highlighter」から「highlight.js」に乗り換えたが、AMPページでは【ソースコード】がハイライト表示されない。
 
ampページではハイライトされない
 
以下、「highlight.js」を AMPページに組み込んだ記録。

 

Syntax Highlighterを「Crayon」から「highlight.js」に乗り換える

WordPress Twenty Seventeen
Crayon Syntax Highlighterから
highlight.jsへの移行
 
「Crayon Syntax Highlighter」プラグインを長年に亘り使用してきたが、ここに来てバグが顕在化してきたり、サイトのスピードアップの弊害になってきたので、思い切って代替策を検討することにした。
 
当サイトで採用したのは、「tomorrow-night-blue.css」
 
以下、「highlight.js」に乗り換えた記録。

 

第三者コードの影響を抑えてください 解決策

WordPress Twenty Seventeen
PageSpeed Insights Webサイトの高速化
その-10
第三者コードの影響を抑えてください 解決策
 
PageSpeed Insights では、診断の欄に、
「第三者コードの影響を抑えてください」と指摘される。
GTmetrix では、「YSlow」タブに、
「Reduce DNS lookups」と指摘される。
 
診断の欄に、「第三者コードの影響を抑えてください」と表示される
 
以下に、この指摘を解消した方法を記録。

 

Google Analytics Safariからの 自分のアクセスを除外

Webサーバー サイトの管理
Google Analytics
iPad Safari から 自分のアクセスを除外する方法
 
iPadの Safariで、ブログにアップした記事内容のチェックや、AdSense広告の表示状況、あるいは、サイトの稼働状況等を頻繁に確認している。
 
AdFilter - 広告ブロック アプリ
 
これら自分のアクセスを、Analytics の「リアルタイム」計測から除外する対策を施した。

 

PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

WordPress Twenty Seventeen
WP Fastest Cache Premium

プラグインの更新が出来ない
 
 
WP Fastest Cache Premium の更新中にエラーが発生しました: パッケージをインストールできませんでした。 PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
 
 
WP Fastest Cache Premium の更新中にエラーが発生しました
 
以下、このプラグインの更新が出来ないトラブルへの対処記録。

 

EWWW Image Optimizer API クレジットの購入と Cloud版の使用

WordPress Twenty Seventeen
Webサイトの高速化
その-7 「適切なサイズの画像」

EWWW Image Optimizer を使ってみる
 
ブログで使用している画像は経験値として、
全て「.jpg」形式のフルサイズで、7
・デジカメ写真の場合は「800 x 600」
・スマホ写真の場合は「840 x 472」
に、サイズを縮小してアップロードしている。
 
スマホ写真の場合は、「840 x 472」にサイズ変更して後、「tinyjpg」による圧縮してプロードするのが良い。
 
ここに来て「Webサイトの高速化」の為に、画像サイズについて、今一度見直しを行ってみた。

 

EWWW Image Optimizer の導入で「jpegtran, optipng, gifsicle がありません。」になる

WordPress Twenty Seventeen
EWWW Image Optimizer の導入
有効化するとエラーが出る
 
EWWW Image Optimizer をインストールし、有効化すると次のエラーが出る。
 
EWWW Image Optimizer を有効化するとjpegtran, optipng, gifsicle がありません。
エラーメッセージの内容。
EWWW Image Optimizer は jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp を使用します。 jpegtran, optipng, gifsicle がありません。 設定ページ と インストール手順 をインストールしてください。
 
以下、このエラーを解決した記録。

 

GTmetrix 測定での「Leverage browser caching」への対応

Webサーバー サイトの運用
Webサイトの高速化
その-6 「Leverage browser caching」

Nginx ブラウザキャッシュの有効化
 
「GTmetrix」という、WEBサイトの表示速度チェックツールを使ってみると、6「PageSpeed Insights」とは異なった視点で、具体的な改善点が指摘される。
 
詳細を見ると、【expiration not specified】の行が多数ある
「Leverage browser caching」での【expiration not specified】。
 
以下、nginxで「Leverage browser caching」に対応した記録。

 

nginx fastcgi キャッシュによる サイトの高速化

Webサーバー サイトの構築
PageSpeed Insights Webサイトの高速化
その-5 キャッシュによる サイトの高速化

Nginx-Wordpressで fastcgi cacheの設定
 
PageSpeed Insights で指摘された「改善できる項目」の中から、
 その-1 テキスト圧縮の有効化
 その-2 レンダリングを妨げるリソースの除外
 その-3 Font Awesomeを ローカル使用に変更する
 その-4 サーバー応答時間の短縮(TTFB)。
と、ページ読込時間の短縮対策を打ってきた。
サイトの速度が上がると、それに比例してアドセンスの収益も上がってきたので、さらに改善すべく『キャッシュの有効化』に挑戦した。
 
fastcgi cache
 
以下、Nginxの fastcgi cacheを設定した記録。

 

nginx 設定ファイルの ドメイン別分割 と 最適化

Webサーバー サイトの構築
nginx 設定ファイル ドメイン別分割 と 最適化
 
複数のドメインで、SSL化やWWWの正規化を行うと、nginx の設定ファイル『default.conf』における「server」ブロックの記述が多くなり、長くて見にくくなってきた。
 
nginxの設定ファイルと、ドメイン別分割設定の概念
 
以下、nginxの設定ファイルの見直しとドメイン別分割を行った記録。