タグ

ブックマーク / ics.media (3)

  • WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA

    ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse(Google ChromeのデベロッパーツールのAuditsタブ)というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ

    WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
  • 今の時代、ウェブページは一瞬で表示するべき! 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA

    ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、記事では「AMPアンプ(Accelerated Mobile Pages)」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ(Accelerated Mobile Pages)」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 サイト(ICS MEDIA)では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま

    今の時代、ウェブページは一瞬で表示するべき! 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
  • GIFアニメからAPNGの時代に! 次世代画像形式APNGを使いこなそう - ICS MEDIA

    APNG(エーピング)とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bit

    GIFアニメからAPNGの時代に! 次世代画像形式APNGを使いこなそう - ICS MEDIA
    ron1003
    ron1003 2014/09/30
  • 1