PageSpeed InsightsのAccessibility
当ブログの、ある特定ページを PageSpeed Insights で確認すると「ユーザー補助」のパフォーマンス(PF)表示が、❗エクスクラメーションマーク（警告）で表示されていました。 （通常は数値でパフォーマンスが表示されている）
PageSpeed Insightsの説明を読んでも良く分からず、仕方がないので特定ページの怪しいと思われる要素部分を以前作った【none】ショートコードで囲ってブラウザ表示を削除(消去)して行き、警告表示が出なくなる要素を探ってみました。
その結果、コードを綺麗にハイライト表示できるUrvanov Syntax Highlighterプラグインを使っている要素に問題があることが分かりました。 ( 不思議な事に、このプラグインでscriptが短文コードの場合では警告表示は出ません。) 改善に至った顛末を紹介します。
なお、Urvanov Syntax Highlighterプラグインのバージョンは2.8.36です。
【none】ショートコードと問題要素の特定方法
point
1 【none】ショートコードについて
【none】ショートコードは、下のPHPコードをfunction.php（子テーマ）に記述することで作成できます。 なお、このショートコードは、以前の記事（ここをクリック）で紹介したものです。
Urvanov Syntax HighlighterプラグインでPHPコードを表示
|
1 2 3 4 5 6 |
//何もしないnopショートコード ショートコード名： [none] function shortcode_none(){ return null; //又は '' でもOK } add_shortcode('none','shortcode_none'); |
point
2 問題要素の特定
編集画面で【none】～要素～【/none】で囲うことで、ブラウザ上で見ると、その要素部分が表示されなくなります。
この機能を利用して、問題記事の編集画面で、ある要素を【none】ショートコードで囲って記事を保存してから、PageSpeed Insights で「ユーザ補助」の表示を確認して警告(❗)が出なくなったらその要素に問題があることが分かります。 つまりこの作業を繰り返せば消去法的に問題要素の特定に繋がります。
特定できた問題要素と警告(❗)表示の回避策
【none】ショートコードで調べた結果、Urvanov Syntax Highlighterプラグインを使ってコードを記述する要素に問題があると特定されました。 更に調べてたところ長文（約160文字以上）でコードを記述する部分があると、PageSpeed Insights「ユーザ補助」に警告(❗)が表示されることが分かりましました。
回避策としては、約160文字以上に渉る長文コードを止めて、約70文字程度の短文コードに変更して折り返すと警告(❗)が消えて通常のパフォーマンス（数値）表示になることが分かりました。
そこで、一番手っ取り早い回避策はUrvanov Syntax Highlighterプラグインの設定で「デフォルトで行を折り返す」にレ点をいれると、コード行が折り返され自動的に短文コードになり、「ユーザ補助」に警告(❗)が消えます。 ただし、この方法は、コードが見にくくなるのが難点ですので、必要なコード行を手動で折り返すことにしました。
警告❗を回避した例：11〜13行で示す様に、手動で、コードの継続を示すバックスラッシュ（ \ )を付けて行を折り返して短文にして警告（❗）を回避した例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
display dialog "次の手順で24bit入力のAAC変換（fs=48khz）を行います。 Step.1： ビットレート選択（320k,256k,160k,128k） Step.2： 音声ファイル(flac or wav)を選択（複数可） " buttons {"OK"} with title "FFmpeg(NativAACエンコーダ)でAAC変換" -- リスト形式のダイアログを表示して処理を選択する set myList to {"320k", "256k", "160k", "128k"} set mySelect to choose from list myList default items "320k" with \ title "Bit rate" with prompt "ビットレート選択" OK button name "音声ファイル選択へ" \ cancel button name "AAC変換をキャンセル" set mySelect to result as Unicode text --as Unicode textを付加しないとエラー -- キャンセルボタンが押されたら終了 if mySelect is "false" then tell me to error "AAC変換を終了します" -- automatorの場合 then error number -128 を使う -- false 以外 選択した値をクリップボードに渡す set the clipboard to mySelect |
Urvanov プラグインのデザインを一部小修正しました。
本件とは関係ありませんが、Urvanov Syntax Highlighterプラグイン による表示について、タイトルとコードの1行目の間が近接して見にくいので、Stylesheet (style.css)に以下のCSSを記述して、タイトルの下を空ける様にしました。
CSS /* urvanov タイトル下に空白を設ける */ div.urvanov-syntax-highlighter-main{margin:10px 0 0 0 !important;}
更に、Urvanov プラグインのCrayon設定で「コードの後の空行数：1」に設定して、コードの最後尾に空白行を設ける様にしました。