自分用参考リンク

参考になるリンクを自分用にまとめるページです。

趣旨

ブラウザのブックマークは普段閉じてるので、正直何をブックマークしていたのかまったく意識にのぼらないので、こうしてページ一覧にしておこうかと。

パフォーマンス

ページ速度とか、効率化とか、調査方法とか。

GTmetrix: パフォーマンス測定用。

mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製

XSERVERで簡単使える mod_pagespeed の詳細な説明。各設定の意味とON/OFFの仕方が記載されている。必要に応じて、例えばデフォルトではONのcssやjsのキャッシュをOFFにすれば、ファイル更新に伴うキャッシュ削除も気にしないで良いかもしれない（キャッシュの恩恵はなくなるが)。


//例 カンマで区切って列記する
ModPagespeedEnableFilters filterAAA,filterBBB
ModPagespeedDisableFilters filterCCC,filterDDD

//実装例
ModPagespeedDisableFilters combine_css,rewrite_css,fallback_rewrite_css_urls,rewrite_style_attributes_with_url,flatten_css_imports,inline_css
ModPagespeedDisableFilters rewrite_javascript,inline_javascript

scriptのdefer/asyncを理解し、ページの高速化方法を探る

deferとasyncの違い。
jQuery依存などはasyncだと問題あるので、deferしかない模様。HTML4と5はdefreだが、XHTMLはdefer="defer"になる。


//wordpressでwp_enqueue_scriptで登録したjsにasyncを付ける
function add_async($tag) {
  return str_replace("type='text/javascript'", 'async', $tag);
}
add_filter('script_loader_tag','add_async');

//wordpressでwp_enqueue_scriptで登録したjsにdeferを付ける
//XHTML版
function add_defer($tag) {
  return str_replace("type='text/javascript'", 'defer="defer"', $tag);
}
add_filter('script_loader_tag','add_defer');

ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得: jsでリスト化して出力。どこかでDNSプリフェッチは遅くなるとか意味ないとか見たので、なぜそうなのかというのは要確認。Yslowでは変化確認できず。

WordPress：覚えておいて損はない、開発者向けプラグイン 25＋: 網羅的にまとまっている。

WordPress 開発に便利なプラグイン Debug Bar

Debug-Barの使い方。管理バーを表示させること。

wp-config.php に以下の3行を追加することで、このプラグインは真価を発揮します。


define('SAVEQUERIES', true);
define('WP_DEBUG', true);
define('WP_DEBUG_DISPLAY', false);

Debug BarとDebug-Bar-ExtenderでWordPressのパフォーマンスチェック

Debug-Bar-Extenderの使い方。ただし、Debug-Bar-Extenderは2011年頃に更新が途絶えたまま。


//テンプレートファイル内への計測ポイント記述例(が、動かない)
<?php Debug_Bar_Extender::instance()->checkpoint('loop start'); ?>

Chrome Developer Toolsでパフォーマンス計測・改善: Chromeのtimelineなどの各項目の説明あり。

SVGOMG: SVGを軽量化。Github内にあり、いつまでつかえるかはわからない。

逆引き！フロントエンドのイマドキパフォーマンス改善: will-changeCSS ContainmentrequestIdleCallbackPassive EventListenerpreloadなど、cssやjsに絡むパフォーマンス向上の手がかり。

CSS will-changeプロパティについて知っておくべきこと

will-changeを実際にjsで使う場合のサンプルコードなど


// Rough generic example
// Get the element that is going to be animated on click, for example
var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	this.style.willChange = 'animation';
}

function removeHint() {
	this.style.willChange = 'auto';
}

パフォーマンス・バジェット、ADN…ためになりすぎる！竹洞先生に聞く、Webパフォーマンス最新動向: 「CDNはもう遅い」「Minifyの重要度はほとんどない」など 2017.1.18 現在の状態を語るインタビューが掲載されている。
ただし、記事自体は最新技術や海外状況を加味しているので、自分の環境で有効な事柄かどうかには注意。

ChromeのPerfomanceによる改善方法

レイアウトの強制同期の診断 | Chrome DevTools | Google Developers

例示がありわかりやすい。ただスクリンショットなどは例の如く古いままなので信用できない。Timelineタブは今はないので、Performanceタブでリロードボタンを押して計測して出てくるタイムラインを用いること。

WordPressを高速化！PageSpeed Insightsで高得点を目指す方法

the_expect()が遅いので、get_the_expecet()をechoする方が良いとのこと。
get_the_expect()はthe_expect()の値を出力するだけらしいく、pタグの有無しか違いが無い模様。そのため、echo時にサニタイズ処理は不要。
get_the_content()で取得してサニタイズや抜粋する方がさらに早いとのことだが、管理画面の抜粋指定など抜粋用の指定が反映されないため、get_the_content()を使うならその点も注意。


//ループ内のみ使える
function my_excerpt() {
  $str = get_the_excerpt();
  echo '<p class="my_excerpt">' . $str . '</p>';
}


//出力したい箇所に記述
my_excerpt();

PHPコード最適化Tipsのウソと本当(解説)Add Star: 関数を作るとき、可能ならstaticを使う方が早くなるとのこと。実際に試したが少なくとも遅くなることはなく、微妙に早いかもしれない。
classを使う必要あり。

PNG画像を最適化するツール「OptiPNG」

OptiPNGをMacにインストールして使う。ターミナル使用。Googleの PageSpeed Inaights 対策としてはこの方法でほぼクリアできる。劣化しないが、削れる量は小さい。より強力に軽量化するなら次項のpngauantが必要。


//cdでPNG画像があるディレクトリに移動してから、以下のコマンドを実行。
optipng *.png

pngquantでPNG圧縮

pngquantをMacにインストールして使う。ターミナル使用。PNG24(α値を持つものも含む)もPNG8に変換されるため、削れる量は大きい。ただし、pngquantで削減した画像を画像編集ソフトで使おうとすると、ソフトによっては透過部分がグレーになってしまうため、使えない（使いづらい)。やる場合は、オリジナルは残しておく必要がある。


//cdでPNG画像があるディレクトリに移動してから、以下のコマンドを実行。
pngquant --ext .png --force *.png

jpegのロスレス圧縮

jpegtrantをMacにインストールして使う。ターミナル使用。実際には、ロスレス圧縮ではなく、メタデータの削除とデフラグのような最適化。削れる量は小さい。


//cdで該当フォルダに移動する必要なない
find (※画像のあるフォルダのパスを入力/ターミナルにドラッグすれば楽) -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

MacでJPEG画像のサイズを小さくする

jpegoptimをMacにインストールして使う。ターミナル使用。圧縮量はオプションで選択可能。Googleの PageSpeed Insights にたいしては、品質80ぐらいで良い模様。ただし、80でも画像が荒れるので、画像の質が重要な場合は使わない方がいい。


//cdで該当フォルダに移動してから
jpegoptim --strip-all --max=83 *.jpg

WebP

画像の最適化を自動化する | Web Fundamentals | Google Developers
仕組みやメリットデメリット、変換方法、実際に使う場合のフォールバック込みでのサンプルあり

動画を遅延読み込みする

ShopifyのSymmetryをカスタムする案件で試したところ、上記で書かれた下記のコードが正常に動作したので、他のサイトやテーマでも良さそう。


document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

ただし、Shopifyのテーマエディタ使用時には邪魔になる(頻繁に更新されるためか動画が表示されない場合があった)ので、Liquidのrequest.design_modeかJSのShopify.designModeを使って除外した方がよい。

Googleの PageSpeed Insightsを切り抜けるための裏技?

PageSpeed Insights では、チェック後に最適化の警告が出た場合、サンプルとしてファイルをダウンロードするテキストリンクが表示される。これを利用する。

サーバー上に必要な画像を並べただけのHTMLを上げる(PHPで自動取得と表示をさせると楽)
1のURLを PageSpeed Inasights にかける
サンプルのリンクから、Googleが圧縮した画像を手に入れる。

ただし、データサイズだけではなく、寸法も縮小されることがあり、画像の荒れも気にされないので、ダウンロードしたデータが使えない場合も多々ある。 PageSpeed insights を重視して荒れた画像をつかうか、ユーザーやサイトのために警告がでても綺麗な画像を使うかを判断する必要がある。

コーディング

SublimeText2でのEmmetのラップ変換(wrap with abbreviation)

SublimeTextのEmmetでラップ変換を行う方法。

範囲選択
control+option+return
最初は必ずdivで括られているが、ウィンドウ下部欄のdivを書き換えることで変更して適用させる。

Material metrics: デバイスの画面サイズやアスペクト比の一覧。増加していく模様。

Function Reference/wp add inline style: インラインでstyleを出力する。

[解決済] wp_add_inline_style で既存のハンドルに依存してCSSを出力する方法について: wp_add_inline_styleの具体的な使い方。

Card validator: Twitter Cardの検証ツール。ちゃんと設定出来ているかチェックして確認するためのツール。通常のTLであれば、検証ツールを使えばその時点の状態で迅速に反映される模様。しかしモーメントには効かない。

SEO

サイバーエージェント・木村賢が徹底解説！「スタートアップが今やるべきSEO最新版」前編【ビタミンゼミレポート#09】 | Marketing Native（マーケティングネイティブ）: 具体性のある内容が書かれていて考え方を学ぶ材料となる内容。前編。

【後編】サイバーエージェント・木村賢が徹底解説！「スタートアップが今やるべきSEO最新版」【ビタミンゼミレポート#09】 | Marketing Native（マーケティングネイティブ）: 具体性のある内容で考え方を学ぶ材料となる内容。後編。

ECサイト × SEOのすべて – 株式会社カブキ: ECにおけるSEOの基本的なところ。

CSSに関して

CSS変数の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ | コリス: CSS変数の利用方法。

Performance of CSS Variables – Lisi Linhart

CSS変数のパフォーマンスについて。transitionを使ってCSS変数の書き方の違いでどの程度コストがかかるのかの情報もある。
設定するだけならどういう書き方でも概ね良い模様(この点記事内には明確に書かれていないように思うので推測)。
JSで操作する場合は、ルートに近い(スコープが広い状態)箇所に対して操作を行うと遅くなり、ブラウザごとの違いもあるようなので注意が必要。

以下の順で上の方が早く下が遅い。ただしこの結果は古い上に少々微妙に思えるのであくまで参考程度に。

translateY(100px);
pxでハードコーディング
translateY(100%);
%でハードコーディング
translateY(var(–translationPx));
CSS変数にpx付きで値を入れた場合
translateY(var(–translationPercent));
CSS変数に%付きで値を入れた場合
translateY(calc(var(–translationt) * 1px));
CSS変数に単位なしで値を入れ1pxを掛けて%とする場合付きで値を入れた場合
translateY(calc(var(–translationt) * 1%));
CSS変数に単位なしで値を入れ1%を掛けて%とする場合付きで値を入れた場合

アニメーションに CSS 変数を使用する方法: CSS変数のパフォーマンスについて。前項とほぼ同様。具体的なCSS変数とJSを用いたアニメーションのサンプルあり。

JavaScriptに関して

【JavaScript】メモリの浪費を避けるコーディング: メモリを意識したJSの書き方ポイントなど。

JavaScript アプリケーションのメモリー・リークを理解する: メモリー・リークに関してより詳しい説明。

【JavaScript】記述方法別の実行タイミングについて

scriptタグの位置でアクション可能な対象がどうかわるかが記載。インラインや外部jsに関して記述あり


//script要素を生成することにより、動的にJavaScriptファイルをロードすることのできる記述方法。JavaScriptファイルのダウンロードから実行開始まで、その他の処理をブロックしないという特徴がある。
var script = document.createElement('script');
script.src = 'test.js';
document.body.appendChild(script);

WordPressに関して

Reference: WP RESET-APIに関してのリファレンス。指定可能なリソースとエンドポイントの指定方法などの一覧。などなど。取得したデータを見るにはデコードが必要なので、簡単に確認したい時はツールを使う(テキスト処理ツール)。

WP RESET API: 日本語で書かれたリファレンス。ただし、プラグインの方の模様。仕組みは同じはずなので、こちらで内容を確認可能と思われる。

環境

MAMPのMySQLサーバが起動しない件 – MySQL DatabaseのUpgradeでOK

MAMP起動時にMySQLだけが立ち上がらない場合。なお、Macのアプリケーションファイアウォールを設定している場合、許可を求めるポップアップがでるので、それに許可を出す必要がある、かも。


//ターミナルで以下を入力
$ killall -9 mysqld

SASSだけを簡単に使える環境を作る

簡単にローカルなSASS環境構築 | IT工房｜AI入門とWebの勉強サイト


//専用のディレクトリを作り、その中でコンパイルを完結させる
//1 package.jsonが作成されるまでreturn連打でよい
npm init
//2
npm install node-sass
// package.jsonのscriptを以下のように変える
/*
"scripts": {
    "compile:sass":"node-sass sass/main.scss css/style.css -w"
  }
*/
//sassディレクトリとmainディレクトリを作って使う場合の前提なら例の通りで良い
//3 実際に使う場合 wで監視されてる状態
npm run compile:sass

node.js – Minify CSS with Node-sass – Stack Overflow

minifyする場合は、package.jsonのscriptsに –output-style compressed　を追加


// minifyする場合は、--output-style compressed　を追加
/*
"scripts": {
    "compile:sass":"node-sass sass/main.scss css/style.css --output-style compressed -w"
  }
*/

node-sassでnode-sass-globbingを使う時の設定方法 – Qiita

glodパターンを使う場合は以下のように node-sass-globbing をインストールして用いる。


//glodパターンを使う場合 
//import "base/**" のような感じで指定フォルダ内のファイルを丸ごと指定できる
npm i node-sass-globbing --save

その後package.jsonのscriptを以下のようにする。


//--importer node_modules/node-sass-globbing/index.js という記述を追加する
"scripts": {
    "compile:sass": "node-sass --importer node_modules/node-sass-globbing/index.js sass/main.scss css/style.css --output-style compressed -w"
  },

計測

進化途中のGA4を使える状態に戻すおススメ初期設定まとめ | CX UPDATES: GA4の基本的な設定に関して。データの収集自体は行われているが、設定しないと表示されずに捨てられている。

調査

https://g.co/ampdemo: 検索結果上でAMPを表示させるデモ用のurl。Chromeの開発者ツールでスマホのUAをセットしている必要がある。PCのままだとリダイレクトされて使えない。

DNS Checker – DNS Propagation Check & DNS Lookup: whatsmydns.net lets you instantly perform a DNS lookup to check a domain name’s current IP address and DNS record information against multiple name servers located in different parts of the world.

This allows you to check the current state of DNS propagation after having made changes to your domain’s records.

入力したドメインに対する各国のネームサーバーでのDNSのA RecordeやCNAMEなどを確認できる。DNSの設定反映状態を確認できる？日本は対象外。

htaccess tester – madewithlove: .htaccessによるリダイレクトのチェックができる。
このツールが良い点は、.htaccessの記述をそのまま入力し、アクセスする想定のURLを記載すれば、.htaccessのどこが動作してりだいれくとが実行できるのか、または実行されないのかが解りやすい点。
結果を共有するためのリンクもあるので便利。

素材

Royalty-free vector clip art, svg files and graphics | Public domain vectors: CC0でSVG,Ai,EPSのデータ素材がある。権利的に怖いのもありそうなので、一応使う前には確認した方が安全かも。使える場合はとても便利。

Hero Patterns | Free repeatable SVG background patterns for your web projects

SVGの背景パターンが作成できる。

CSSの背景画像でSVG要素を使う場合にIEにも対応させる書き方 | 滋賀／京都／大阪でホームページ制作ならYUKiYURi WEB

上記ページにあるIE用のURLエンコードも行われているので、その点も安心。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。