Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ランディングページ最適化

More than 1 year has passed since last update.

WEBデザイナーからHTMLがあがってきたらやってることを書いてみます。

1. 画像サイズ縮小

まずは画像サイズのダイエット。

TinyPng

使い方は簡単。ブラウザに画像をドラッグ&ドロップするだけです。圧縮の度合いもいい感じに勝手にやってもらえます。
スクリーンショット 2019-11-02 12.33.17.png

2. 画像遅延処理

lazyload 2.x
cf. 1x1の最小GIF・PNGファイル(透過/base64)

imgタグのsrcにダミー画像、data-srcに本来ロードする画像を指定します。classにlazyloadを。

<head>
<script src="js/lazyload.js"></script>
</head><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=" data-src="images/hoge.png"><script>
lazyload();
</script>
</body>

3. javascriptのミニマイズ

JavaScript Minifier

スクリーンショット 2019-11-02 14.32.17.png

4. レンダリングパフォーマンス測定

自分の場合、画像圧縮とlazyloadの仕込みが終わった時点でとりあえず測ってみます。

PageSpeed Insights

↑パフォーマンス測定のみでなく、改善点も教えてくれる素敵なサイト。

スクリーンショット 2019-11-02 12.50.09.png

あとは自鯖ならapacheのキャッシュ設定とか、画像のCDN化(AWS S3等)でしょうかね…

fromage-blanc
楽曲制作(ベリバービリバー/石川ひとみ等)と開発(Webシステム、iPhoneアプリ)を生業にしてます。
https://fromage-blanc-recette.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away