javascript

ホームページの表示を高速化・最適化に取り組んでみました

2015年9月13日

Categories | ホームページ SEO

ここのところ、ホームページの表示を高速化・最適化に取り組んでます。っていうか、

色々な方法があり過ぎて、ど壷にはまりまくってます。まずはブログ（ワードプレス）

から取り組み、以前に記事りましたが、ある程度プラグイン使えば簡単にやっつけられ

ました。で、今回はホームページ(html)を手掛けてみました。

高速化・最適化の必須ツールとして、

PageSpeed Insights

を参考にやっつける。　備忘録です。

ブラウザのキャッシュの設定
圧縮を有効にする
画像の圧縮（ロスレス圧縮：可逆圧縮）
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
JavaScript を縮小する・CSSを縮小する
HTML を縮小する
サーバーの応答時間を短縮する

■ 圧縮を有効にする

下記を「 .htaccess 」に記述。


AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

■ 画像の圧縮（ロスレス圧縮：可逆圧縮）

ロスレス圧縮とは？データの欠落がまったく起こらない圧縮方式。圧縮された画像は、

圧縮前のデータを完全に復元できる。

利用ツール： kraken.io (https://kraken.io/web-interface)

ウェブ上で圧縮・ダウンロードする。jpg/gif/pin 圧縮可

■ スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

「レンダリングを妨げる JavaScript を削除する」の対処

head内「 <head> ～ </head>」の JavaScript を </body> の直上に移動させる。

「CSS の配信を最適化する」の対処

複数のcssを出来るだけ少数にまとめる。

■ JavaScript を縮小する・CSSを縮小する

PageSpeed Insights　で分析した結果には、最適化された画像、JavaScript、CSS リソース

がダウンロード出来る。それをサーバーにアップするだけ。

■ HTML を縮小する

PageSpeed Insights　では、最適化された「HTML」は作ってくれない。ケチッ

色々ググッみたけどヨサゲなものがない。いつも使っているホームページ制作ソフト

Dreamweaver（ドリームウェーバー）CS3

で簡単にやっつけられた。

ツールバーのコマンド　→　ソースフォーマットの適用　→

Ctrl+Ａ（全てを選択）　→　Shift+Tab（左揃え）

※ ソースコードをキレイに並べ替え、左側の余白をなくす。

無料のホームページ制作ソフト「 Expression Web 4 」でも同じようなことができるので、

ツール　→　HTMLの最適化

お試しあれ。

■ サーバーの応答時間を短縮する

Google 詳細

Google のテストでは、お使いのサーバーは 1.6 秒で応答しました。サーバーの応答時間が遅くなる要因はたくさんあります。サーバーが多くの時間を費やしている箇所を監視し、測定する方法については・・・

日によってサーバーエラーが連発することが。

当方が利用するXREAサーバーの回線が込み合うと、消化不良的な症状になる。

思い切って別サーバーに越してみたら、エラーなくなりサクサク。

XREA内でのサーバー移動・移行の手順　備忘録

しまい

Comment(0) | Trackback(0)

TAGS: 最適化 / PageSpeed Insights / Dreamweaver / javascript / ホームページ / SEO / XREA / 高速化 | 2015年9月13日 |

Autoptimize　ワードプレス　HTML・CSS・JavaScriptを縮小し高速化

2015年9月6日

Categories | ブログ（WordPress) SEO

Autoptimize バージョン 1.9.4　（オートオプティマイズ）

HTML、CSS、JavaScriptを縮小してくれるプラグイン。

備忘録

当ブログでは、HTML・CSSは、有効にすると最適化されるが、JavaScriptに関しては

プラグイン ScrollTo Top　が無効化されてしまう。よって「Optimize JavaScript Code?」

だけ利用せず導入すことにした。

Comment(0) | Trackback(0)

TAGS: CSS / javascript / ｈｔｍｌ / SEO / ワードプレス / 高速化 / Autoptimize | 2015年9月6日 |

スクロールしながらページトップに戻るボタン

2013年12月15日

Categories | ホームページ

最近チョイチョイこんなページ見かけるので、自分のページに実装してみました。

でぇ、どんなホームページかと言うと、帯状に長いページ下に良く見かける、

「PAGE TOP」

コレをクリックすると、ページがスクロールしながらトップに戻るんです。

サンプルページはこちら↓

https://www.hcz.jp/what/2010.html

ちょっとした演出効果ですね。

どこかのサンプルページを参考にし、自分なりにカスタムしてみました。

超簡単に作れるので、あなたもやってみたら？

実装方法をココに残しておきます。

まず、head内にこう記述

<script type="text/javascript" src="gotop.js"></script>

それからページ一番下にこう記述

<a href="#header" title="ページトップ" onclick="Scr_updown();return false;" >↑PAGE TOP</a>

ただそれだけです。簡単でしょ。

gotop.jsは自分でファイル作ってください。

中身は

function Scr_updown() {
var Doc=document;
var Scr_y=Doc.body.scrollTop || Doc.documentElement.scrollTop || Doc.scrollY || 0;
Scr_y= Math.ceil(Scr_y*0.1);
scrollBy(0,-Scr_y);
   if(Scr_y>0){
    var Tout=setTimeout("Scr_updown()", 20);
     }else{
       clearTimeout(Tout);
     }
  }

TeraPad（フリーソフト）など使って上記をコピペし、保存する時ファイルの種類を

「JavaScript」選択し、ファイル名を「gotop.js」にして保存するだけです。

それからリンク先「#header」は自分仕様に変更してください。

Comment(0) | Trackback(0)

TAGS: ホームページ / スクロール / ページトップ / page top / javascript | 2013年12月15日 |