HOME → 

nginx-WordPress WebP 画像の配信

WordPress Twenty Seventeen
nginx + WordPress
次世代フォーマットでの画像の配信
 
「PageSpeed Insights」の測定で、「次世代フォーマットでの画像の配信」に【警告】が表示されるページが出てきた。
 
改善できる項目を見ると、「次世代フォーマットでの画像の配信」に【警告】が表示されている
 
以下、nginx + WordPressの環境で、画像を【 WebP 】での配信に切り替えた記録。
HOME → 

FTPで 画像を 特定の年月別フォルダーにアップロードする

WordPress Twenty Seventeen
FTPでの画像アップロード
指定した年月別フォルダーへのアップロード
 
目的
「メディアを、FTPで特定の年月フォルダーにアップロードする。」
 → 記事を投稿した年月と同じ年月のフォルダーに、
   画像をアップロードしたい。
 
記事における画像へのリンクと、画像ファイルの場所。
記事を投稿した年月と同じ年月のフォルダーに、画像をアップロードしたい
 
以下、特定の年月フォルダーに画像をアップロードする方法を記録。
HOME → 

AMPページを「highlight.php」を使って シンタックスハイライトする

 
WordPress Twenty Seventeen
AMPページでのシンタックスハイライト
「highlight.js」から「highlight.php」に変更
 
AMPページを、「highlight.js」を使用してシンタックスハイライトすると、Search Consoleにおける AMPでのエラーが続発することになった。そこで、【 Javascript 】ではなく【 PHP 】を使用した「highlight.php」でシンタックスハイライトすることにした。
 
PHP版の「highlight.php」での Syntax Highlight
 
以下、PHP版の「highlight.php」をインストールした記録。
HOME → 

タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。

WordPress Twenty Seventeen
Search Console の AMP
「CSS !important」が含まれています エラー
 
Search Console の AMPで、『タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。』というエラーが出る。
 
「CSS !important」が含まれています エラー
 
以下、「CSS !important」エラーの修正記録。
HOME → 

WordPress Related Posts 関連記事 AMP用のカスタマイズ

WordPress Twenty Seventeen
関連記事プラグイン WordPress Related Posts
AMPページ用のカスタマイズ
 
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう。
 
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう
 
以下、AMPページ用にCSSをカスタマイズした記録。
HOME → 

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

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

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

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

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

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

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 の更新中にエラーが発生しました
 
以下、このプラグインの更新が出来ないトラブルへの対処記録。
HOME → 

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サイトの高速化」の為に、画像サイズについて、今一度見直しを行ってみた。