ホームページ Category

Webサイトの高速化に取り組んでいるのですが、ファーストビュー以外の画像の読み込みを遅らせて、FCPの改善に取り組んでいるところです。

しかしながら、Chromeのデベロッパーツールなどで確認しましても、サイトの高層化にはそれほど大きな影響はないと感じています。

この原因についてですが、パフォーマンスを確認してみますと、そもそもサーバーが画像を配信する秒数は非常に短く、複数の画像を同時に配信してくるため、数十KB程度の画像で数枚程度なら、遅延読み込みで枚数を減らしてもそれほど大きな影響はないものと思います。

サイトの高速化について、それよりも大きな影響があるのは、レンダリングの処理計算にかかる時間で差が出ることが多いです。

レンダリングをする際、レイアウトの複雑な計算を何度もしなおすことで時間がかかり、高速化のボトルネックとなっていることが多いと感じています。

ただし、ブラウザが実行するレンダリング計算の中身というか、プロセスが不明なため、この点を改善するにはかなり時間がかかりそうと考えています。

ただし、ページ内で無数の画像やWebフォントを使用している際には、ファーストビュー以外の画像の読み込みを遅延させ、スクロールして実際に表示される時になってから表示させるようにすれば、多少の高速化効果は見込めるものと思います。

これを実行するには、JavaScriptでの実装が必要になりますが、いわゆるIntersection Observerという技術を使うことで実装することができます。

イメージでいえば、あえてファーストビュー以外の<img>タグのsrcを崩すことにより、画像と認識されなくなるため、HTMLを読み込んだ時点では画像をダウンロードしなくなります。

<img>タグのままでしたら、HTMLファイルを読み込んだ時点でダウンロードされてしまうため、遅延することはできないため、<img>タグをそのままでな機能しないようにする必要があります。

けれども、ユーザーがスクロールをして、画像コンテンツの箇所に差し掛かった際に、<img>タグの箇所に投入するという仕組みです。

Webフォントについては、単なる遅延読み込みのため、ファーストビューが表示された後、実際にWebフォントが反映されますが、画像とWebフォントの遅延読み込みでは、Intersection Observerの仕組みを使うか使わないかでの違いがあります。

WebフォントでもIntersection Observerも使うことは可能ですが、特にメリットはないと感じています。

ただし、このような画像の遅延読み込みをしましても、そもそも数枚程度の画像の読み込みでしたら、それほど時間はかからないため、遅延してもしなくてもあまり大きな違いはないというのがぼくの印象です。

以前にプログラミングの学習はchatGPTがベストプラクティスだの記事を更新したのですが、あれから3カ月が経過した現在、プログラミング言語のスキルが大幅に向上したと感じています。

今までは、フロントエンドのHTML、CSSぐらいは習得していましたが、これらはプログラミング言語というよりも、マークアップ言語のため、それほど難易度が高いわけではありません。

それが、この3ヶ月でHTML、CSSに加え、バックエンドのJavaScript、PHP、SQL、Pythonと、過去5年分ぐらいのスキルアップが実現したと感じています。その過程で、MySQLなどのデータベースに加え、Gitなども少しはかじっています。

もちろん、深く習得したわけではなく、読めて簡単なものでしたら書けるぐらいです。

HTMLやCSSについては、スラスラ読めて書けるぐらいには慣れ親しんでいますが、JavaScriptやPHP、SQLについては、まだぎこちない感覚があり、すんなり頭に入ってくるわけではありません。ただ、入門書レベルの書籍でしたら、内容がスラスラ入ってくる状態です。

この分ですと、年内にはよく分からないJava、Perl、C言語などもある程度は習得できそうな気もしており、ウェブ開発におけるLAMP（Linux、Apache、MySQL、PHP）あたりは、ものに出来そうな予感がしています。

フロントエンドに加え、バックエンドのプログラミング言語をかじったことにより、ウェブ開発の全貌がおぼろげながらも理解できてきたように感じます。

このChatGPTによる習得スピードが速い理由については、疑問点をその場で何度も質問しながら、ステップバイステップで習得できるからだろうと感じています。

インタラクティブなやり取りにより、疑問点を潰しながら進めますし、初歩的な質問についても、AIなら気兼ねなく、分かるまで24時間何度でも質問できます。

それに加えて、回答速度も一瞬で、口頭での説明ではなく、文章での説明のため、情報の吸収量が極めて効率的です。また、かなり正確な情報を提供してくれます。

さらに、よく間違えるという点も、プラスに働いているものと感じています。

ChatGPTから提供されたコードについては、大まかには合っていますが、ところどころ間違っており、実際には動かないケースが多いです。

そのため、１行づつ確認しながら、動かない箇所を調べていくわけですが、この確認をする過程にて、ああでもないこうでもないと繰り返しているうちに、この行は何度も確認したし、問題はここではないという状態になります。

この間違い探しをする上で、コードの意味やシンタックスを正確に確認しないといけませんし、結果的に、この確認作業がプログラミング習得にとって、極めて効率的に作用するものと感じます。

もし、そのままうごくコードばかりをChatGPTに提供されるとしたら、コピペして終わりのため、何らスキルアップには役立たないことでしょう。

これからプログラミングを習得しようとしている方は、実際にコードを書いてもらいつつ、そのコードの間違いを探すようなスタンスで取り組むと、習得スピードが飛躍的に向上するものと思います。

メジャーなプログラミング言語には、JavaScriptやPython、PHPなどがありますが、これらは明確にプログラミング言語として分類されています。

一方で、HTMLやCSSは有名ではあるものの、単にプログラミング言語とはいえない部分があり、マークアップ言語やCSSとも呼ばれています。やはり、条件分離や定義をしての操作などがない場合、プログラミング言語とはいえないのかもしれません。

そのような、プログラミング言語とはいえないものの、習得するためのコストが低く、サイト運営に役立つコスパ高い言語の一覧をご紹介します。（※HTMLとCSSは除く。）

■言語的なものの一覧

1、SQL
2、Apacheの設定構文
3、Curlコマンド
4、Jquery
5、WordPress独自タグ
6、xml
7、JSON
8、CGI
9、Winコマンドブロンプト
10、logファイル
11、CSVファイル
12、正規表現

1.SQLについて

SQLはデータベースを操作する言語ですが、SELECT、UPDATEなどの構文でデータベースを操作します。ただし、Webサイト上から操作するには、PHPなどのプログラミング言語との連携が必要になります。PHPファイルに記載することが多いと思います。

WordPressを使用している場合にも、サイトの移転などで使用することがあるかもしれません。

2.Apache

単にApacheといった場合、通常ですとApache HTTPサーバーのことを指すことが多いです。サイトの.htaccessなどを設定する際、RewriteEngine Onなどと記載することが多いですが、このサーバーを設定する際、Apacheの構文や指令のディレクティブを使用することになります。

ただし、これらはプログラミング言語ではなく、設定するための指示言語です。常時SSLや301リダイレクト設定をする際には、こちらを使用するとよいでしょう。

3.Curlコマンド

当サイト運営者の場合、こちらはWindowsのコマンドブロンプトから使用することが多いですが、HTTPリスポンスを確認する際によく利用します。

4.Jquery

Jqueryについては、JavaScriptのライブラリーのため、実際のところはJavaScriptといえます。一方で、ライブラリを使わず、生のJavaScriptについては、バニラJSと呼ぶことがあります。当サイト運営者の場合、細かい点まで管理したいため、バニラJSで使用することが多いです。

同様に、JavaScript関連ではReactがあり、React.jsと呼ばれていますが、こちらについてはFacebookが開発したものになります。

5～11

そのほか、独特な言語的なものがありますが、サイトマップを作成でxmlを使用することが多いですし、エラーログを出力した際には、ログファイルを確認するとエラーメッセージなどの独特な書き方がされています。

コマンドブロンプトについては、直接的にはサイト運営で使用することはありませんが、当サイト運営者はwois情報の確認やWebフォントのサブセットで使用することが多いです。

12.正規表現

正規表現自体はプログラミング言語ではありませんが、JavaScript、Python、Java、Perl、Rubyなど、多くのプログラミング言語で正規表現をサポートしています。

JavaScriptにて使用することが多いかもしれません。

そのほか、サイト作成でCMSを使用する際には、WordPressやMovable Typeなどで独自の構文を使用することがあります。

上記については、プログラミング言語とはいえませんが、比較的、習得するには簡単たなめ、短時間で効率よく習得できると思います。コスパ高い言語になるので、覚えておくとよいでしょう。

HTMLタグを手打ちしている場合、テキストエディタのみではフォルダ内のファイルを一括で置換するようなことは難しく、また文字コードを一括で変更するなども困難です。

その点、ホームページ作成ソフトのDreamweaverなどを使用すれば、パソコン上で直感的に作業できるため、効率的ではありますが、条件を指定した上での分岐処理など、より複雑なプログラミング的な操作はDreamweaverでも困難な傾向があります。

このような場合、人気プログラミング言語のPythonを使用すれば、パソコン上のホームページファイルに対して様々な操作ができて便利です。

特に、PythonのライブラリにBeautifulSoupやosがありますが、パソコン上のHTMLファイルを読み取り、解析し、修正し、再度保存するといった一連の操作を自動化することが可能となります。

Pythonといえば、ウェブスクレイピング的な操作をするプログラミング言語と思われていますが、そのスクレイピングは、Web上だけではなく、パソコン上のファイルでも可能なのです。

このPythonには、以下のようなライブラリやモジュールがあり、ホームページの作成と親和性が高いです。

■re

正規表現を扱うためのモジュールです。正規表現で特定のパターンに一致する文字列を検索したり、置換したりできます

■os

ファイルやディレクトリの操作、パスの操作、プロセス管理など、osの名前どおり、オペレーティングシステムレベルのタスクを実行するためのモジュールです。

■shutil

ファイルやディレクトリのコピー、あるいは移動や削除などのファイル操作ができます。

■glob

ディレクトリのワイルドカード検索を行うためのモジュールです。

■codecs

文字コードを変換する際に使用すると便利です。このモジュールを使うことで特定のエンコーディングでファイルを読み書きしたり、文字コードを変換したりできます。

■BeautifulSoup

HTMLやXMLのパースや操作、スクレイピングを行うためのライブラリです。HTMLファイルの中身を操作する際に使用すると便利です。

これらのライブラリを使いこなすことができれば、HTMLタグを手打ちしてホームページを作成しているユーザーにとって、強力なツールとなり得ます。

JavaScriptと比較しても、Pythonは初心者の方でも比較的、わかりやすいプログラミング言語となっているため、HTMLやCSSの次は、Pythonの習得に取り組んでみてはいかがかと思います。

先日からPythonのアプリ的なものを作成しているのですが、最終的には各.pyファイルをまとめ、main.pyファイルで一元管理できるようにはなりました。

しかしながら、そこから先、.exe化してスタンドアロンの形にしようと思ったのですが、モジュールまでを組み込むのは難しく、最終的には断念する結果になっています。

この.pyファイルと.exeの違いですが、.pyは必要なPythonのプログラムがパソコン上に入っている必要がありますが、.exeファイルにはPython自体も組み込むことにより、単独で機能することになります。

そのため、ファイルをダウンロードしさえすれば、必要なプログラムは全て用意されている状態のため、単独で機能するソフトウェアになる利点があります。

けれども、Pythonの場合、必要なモジュールが複数あり、それはまた別にインストールする必要があるため、必要なソフトウェアを一括でそろえるのが困難であるとの結論に達しました。

あえなく、.pyの形式で使用しているのですが、それでも自分で使用する分には、既にある.pyファイルも.exeファイルも使用感は特に変わりはないため、そのまま使用しています。

この.exeファイルでスタンドアロン化するメリットは、人に配布するとか、あるいはダウンロード販売をする際には必要かもしれませんが、自分でそのソフトウェアを使用する分には、必要な要件は既にそろっているため、あえてパッケージ化する必要はないかもしれません。

それでももし、あえてスタンドアロン化する場合には、動作条件として必要なプログラムやモジュールを指定するなど、事前に説明した上で配布することをおすすめします。