Articles

Webサイト高速化のために行ったこと…今回は第四回です。
Djangoで出力したHTMLを圧縮する方法についてまとめました。

１．圧縮を有効にする（html, css, jsなどの静的コンテンツ）
２．ブラウザのキャッシュを有効にする（静的コンテンツにキャッシュを導入する）
３．CSSを縮小する
４．HTMLを縮小する（当記事）
５．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する（※一部）
６．読み込み中のときにloading indicatorを表示する（これはユーザー体験を高めるためのおまけ）

では、さっそく行ってみます。

続きを読む

Webページの読み込みが遅いと、それだけでユーザー体験が低下し離脱につながってしまいます。
当サイトはまだ本格運用を始めたばかりなのでそもそもユーザー数少ないのでサイトのパフォーマンスが
低かろうが影響もあまりないのですが（笑）

まぁ、ページの描画は早いほうがいいだろうということで色々試してみました。

１．圧縮を有効にする（html, css, jsなどの静的コンテンツ）（当記事）
２．ブラウザのキャッシュを有効にする（静的コンテンツにキャッシュを導入する）
３．CSSを縮小する
４．HTMLを縮小する
５．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する（※一部）
６．読み込み中のときにloading indicatorを表示する（これはユーザー体験を高めるためのおまけ）

続きを読む

今回はただの日記です。

３年くらい前は自信を持って「Web系のフロントエンドエンジニアです！」って名乗れたものだけど
（さらに前はバックエンド）、
最近はもう名乗るのもおこがましい、完全なるバックエンドエンジニアになっています。＠趣味だけど

もちろん、仕事でもフロントエンドはやっていますが、あくまでネイティブアプリのフロントなので
Webではなかったりします。

２０１５年頃から２０１６年にかけて、Javascript旋風が巻き起こって、Webフロント業界は
Angular JS, Aureliaに代表されるフルスタックフレームワーク、
Backbone JS, React JSなど割りと軽量なフレームワークなど、戦国時代に突入した感がありました。

続きを読む

ただの作業メモ

・使ったライブラリ
highlight.js

162言語、72のスタイルに対応しているようです。

上記サイトからダウンロードをしますが、ダウンロード前にどの言語を有効にするかを
選べるようになっているので、自分に必要な物を追加でチェックします。

ここ

自分の場合は、Django, YAML, SCSSを追加でチェックしました。

ZIPがダウンロードされるので、あとはサイトに設置するだけ。
highlight.pack.jsが本体。
その他、諸々のスタイルが記述されてるCSSが格納されています。（設置はどれか一つでOK）

続きを読む