📜 ⬆️ ⬇️

Optimization of loading pages in practice

I stumbled upon a bunch of interesting articles on webo.in and read. I decided to apply what was described there on a real project. That's what happened. Project small - my friends site Bookcare . They make covers for books, and their website is my “weekend project”.
Now in essence:
The main part of the content is the cover images, which are stored in jpeg format. So the actions on this part of the optimization are reduced to optimizing the images themselves and setting up caching.
To optimize images, I used jpegtran, but the problem with it was that it could not process the entire folder at once - only one file at a time. Another problem is that it is impossible to use the input file as an output file (just overwrite the optimized file with the old one).
I solved this problem with a small script and, although I am not very strong in shell scripts, it works and it is quite convenient to make replacements. So, I created a jp.sh script in my home folder:

jpegtran -copy none -optimize -perfect "$1" > "sh_conv_$1";\
mv "$1" raw/
mv "sh_conv_$1" "$1"

And then performed a simple g sequence:
# mkdir raw
# find *.jpg -depth 0 -type f -iregex ".*\.jpg" -exec ~/s.sh {} \;

After that, in the folder with pictures are already optimized jpegs, and a new raw / folder is created, containing the source files. Daddy raw / was very useful when it turned out that my script did not work on files with names that are not Latin (the files were simply cleared). Now everything works.

So, after the pictures are optimized in a convenient way, it was necessary to set up caching. I added the issue of Etag'ov. This is simple and described on webo.in. It is done by adding one line to htaccess
')
FileETag MTime Size

In fact, you still need to customize the output of the Expires headers, but this is also made easy.

After fights with karinka, they began to weigh 34% less, which on the page of the Catalog accelerated the download by almost the same amount, since the main content is just pictures.

Next, I walked through the issue at issue. Layout is not mine, for this, I haven’t gotten into the markup optimization yet, but I did the basic features: I removed line breaks, tabs and repeated spaces.

Further more interesting. I wanted all (even phpshnye) pages to be issued LastModified and respond correctly to If-Modified-Since.
I looked at the main page and realized that only news and recent arrivals (from dynamic content) are displayed there. Accordingly, I received the date of the latest news, the date of the last receipt, received the maximum and processed it as follows:

// $md -
$modified = gmdate( "D, d MYH:i:s" ,$md). " GMT" ; // HTTP - "Mon, 20 Dec 2004 09:34:19 GMT";
$hdr = '' ;

$headers = apache_request_headers();

foreach ($headers as $header => $ value ) {
if (eregi( 'If-Modified-Since' , $header)) {$hdr = $ value ;}
}

if ($hdr === $modified) {
header ( "HTTP/1.1 304 Not Modified " );
header ( "Last-Modified: " . $modified);
header ( "Expires:" );
header ( "Cache-Control:" );
exit();
}
header ( "Last-Modified: $modified" );
header ( "Expires:" ); //
header ( "Cache-Control:" );


* This source code was highlighted with Source Code Highlighter .


It should be noted that the time in Last-Modified must always be specified in GMT, that is, GMT.

Now the page is loaded once, and then we see the answer 304 Not Modified;
Another important note is that the Last-Modified header should always be issued, otherwise the page will be loaded once, since the Last-Modified was not specified in the 304 response. This behavior was noted for FF3.

Then I got to the issue of css in the form of archives. Here I was not satisfied with the solution that was given on webo.in, since there is no mod_headers on the server bookcare.ru. I used a rather controversial method, but within the framework of this task, I believe, it is quite legitimate:

RewriteEngine On
AddEncoding gzip .css
RewriteCond %{HTTP:Accept-encoding} !gzip [OR]
RewriteCond %{HTTP_USER_AGENT} Konqueror
RewriteRule ^(.*)\.css$ $1_css.nozip [L]

Accordingly, for example, main.css is initially in the form of an archive, and main_css.nozip is a regular version of the file.
If these lines are in .htaccess in a separate folder, they do not affect the files outside this folder, so in this form this technique is only useful. With minimal action on the server, it turns out what should be obtained.

That's probably all, if I have not forgotten something.

UPD1: Still forgotten . After cutting out all the extra characters from html-issuing it is given in gzipovanym form with a compression ratio of 9.

UPD2: Rewrote shell script. Now everything works well and with any names.

UPD3: There was a problem with the issue of css in the form of archives. Fixed .htaccess code

UPD4: On the advice of the user Roxis publish the code on pkhp, which selects the correct headers without reference to mod_php

$hdr = isset($_SERVER[ 'HTTP_IF_MODIFIED_SINCE' ])?$_SERVER[ 'HTTP_IF_MODIFIED_SINCE' ]: '' ;

if ($hdr === $modified) {
header ( "HTTP/1.1 304 Not Modified " );
header ( "Last-Modified: $modified" );
header ( "Expires:" );
header ( "Cache-Control:" );
exit();
}
header ( "Last-Modified: $modified" );
header ( "Expires:" );
header ( "Cache-Control:" );


* This source code was highlighted with Source Code Highlighter .


PS Please do not kick much, these are my first steps to bridge client optimization. But for the comments I will only be grateful.

Source: https://habr.com/ru/post/43873/


All Articles