Web高速化トリック

Web高速化トリック

高速化、高速化と一時気にしてはおりましたが、、その後はそこまで気にはならなくなったのですが、ここへ来て、結果としましては、Webの高速化を目指すという感じにはなりますが、何よりも技術的に唐突に知りたくなり、何かを便利なツールなどを使わずに手動でサーバの高速化をしようと思い、メモをしておきます。

コードやシステム的な環境などにもよるとは思いますが、別サイトで一からコードを書いたものを作りたくて、だったら表示速度も高速化するぎじゅつもついでに学びながらやろうと思った次第です。ちなみにまだやっていないです。このWebは特段いじらないと思います。

基本的には、W3CやHTML Standardを迷ったときは見たりしますが、今回は皆さんも迷ったときには見られていると思われる、HTML Standard、WHATWG、MDN、Google Developersなどを参考にして行っていく予定です。(これからです・・・)。多分専門家の方でしたら、もっとベストではなくてもベターなやり方があるとは思いますが。HTML StandardとMDNより参照一部引用をさせて頂いておきます。あとは言語を何を使用するかにもよるとは思いますが、ベースは同じかともいますので。

DOMContent​Loaded

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // この同期スクリプトはDOMの解析を遅らせます。そして DOMContentLoaded イベントはその後に起動します。
</script>
function doSomething() {
    console.info("DOM loaded");
}

// `DOMContentLoaded` may fire before your script has a chance to run, so check before adding a listener
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` already fired
    doSomething();
}

MDN
Google Developers

loadイベント

loadイベントは、リソースおよびその依存リソースの読み込みが終わると発生します。asyncとdeferどうするかもありますが、どんどん情報を流していきます。

Window

<script>
  window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });
</script>

script 要素

<script>
  var script = document.createElement("script");
  script.addEventListener("load", function(event) {
    console.log("Script finished loading and executing");
  });
  script.src = "http://example.com/example.js";
  script.async = true;
  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
</script>

MDN

CSSを最適化する

小さなCSSファイルのインライン化の例
<html>
<head>
<link rel=“stylesheet” href=“small.css”>
</head>
<body>
<div class=“blue”>
Hello, world!
</div>
</body>
</html>
Google Developersより。どんどん情報を流していきます。
重要なCSSをインライン化
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class=“blue”>
Hello, world!
</div>
<noscript id=“deferred-styles”>
<link rel=“stylesheet” type=“text/css” href=“small.css”/>
</noscript>
<script>
var loadDeferredStyles= function() {
var addStylesNode= document.getElementById(“deferred-styles”);
var replacement= document.createElement(“div”);
replacement
.innerHTML= addStylesNode.textContent;
document
.body.appendChild(replacement)
addStylesNode
.parentElement.removeChild(addStylesNode);
};
var raf= window.requestAnimationFrame|| window.mozRequestAnimationFrame||
window
.webkitRequestAnimationFrame|| window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener(‘load’, loadDeferredStyles);
</script>
</body>
</html>
Google Developers
やることはたくさんありますがざっくりと。ほぼうち専用ですが、ざっくりとですが、よろしければ、ここに置いておきます。
MDN
Google Developers
WHATWG
w3.org/developers/tools
gnu.org/manual
fsf.org
kernel.org/doc/html/