Tīmekļa lapu optimizācija

Pēdējās dienās aizrautīgi pētu un eksperimentēju ar tīmekļu lapu optimizāciju ar mērķi nodrošināt ātrāku tās ielādi. Necentīšos pārstāstīt salasītās gudrības. Ja nu kādam ar’ interesē, tad gan Google, gan Yahoo! pacentušies apkopot daudzus padomus, ko un kā darīt, un, protams, padarījuši šīs gudrības pieejamas ik vienas interesentam: Web Performance Best Practices (Google) un Best Practices for Speeding Up Your Web Site (Yahoo!).

Personīgi man viss lielākais atklājums ir bijis, ka attēlu apstrādes lietotnes mēdz saglabāt rastra attēlu ļoti neveikli, un ka ar dažu rīku palīdzību attēla faila izmēru var padarīt vēl mazāku, nezaudējot ne kripatiņas kvalitātes. Lūk piemērs ar Journaler ikonu:

Oriģinālā bilde
Oriģinālā bilde
11,9 KiB

Optimizētā bilde
8,8 KiB

Vai bez tām piezīmēm, kas zem bildītēm, tās varētu vizuāli atšķirt? Par bilžu optimizācija var palasīt jau pieminētajos avotos: 1, 2.


Un vēl dažas gudrības, lai pašam ir kur meklēt un varbūt vēl kādam noder.

Padoms Nr. 1

Veids, kā ar bash for-ciklu un pngcrush nooptimizēt visus PNG attēlus aktīvajā direktorijā:

for IMAGE in `ls *.png`;
  do mv $IMAGE $IMAGE.old;
  pngcrush -rem alla -reduce -brute $IMAGE.old $IMAGE;
  rm $IMAGE.old;
done

Padoms Nr. 2

Faila .httaccess saturs, kas liek Apache padot (servēt) iepriekš ar gzip saspiestu CSS un JavaScript failus.

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule ^(.+) $1.gz [L]

<FilesMatch ".(css|js).gz$">
  Header add Content-Encoding     gzip
  Header add Vary Accept-Encoding
</FilesMatch>

<FilesMatch ".css.gz$">
  ForceType text/css
</FilesMatch>

<FilesMatch ".js.gz$">
  ForceType text/javascript
</FilesMatch>

3 thoughts on “Tīmekļa lapu optimizācija

  1. Opā! Iepriekš nebiju aizdomājies par png kompresiju. Noderīgi! Paldies!