Ваше местоположение в сети:
Рубрика:

Быстрый сайт

Разделы сайта:

Статья для вебмастеров. Я уже писал в прошлый раз про скорость сайтов, однако мер предложенных в том посте (оптимизация настроек сервера, кэширование и сжатие) иногда бывает недостаточно для того чтобы сделать загрузку страниц вашего сайта быстрой. Почему? Проблема все равно таится в количестве обращений к вашему серверу. Поэтому давайте закончим в этом году тему оптимизации сайта; после этого блог уходит на новогодние каникулы. Оставайтесь на связи, и в следующем году я обещаю начать с вещей, интересных не только вебмастерам.

Вернемся к нашим... сайтам. Типичная ситуация. К статье на блоге оставлено множество комментариев. И у каждого комментатора есть по аватарке - маленькому изображению рядом с ником. Каждое такое изображение - это дополнительный запрос к серверу, и их количество становится огромным - загрузка существенно замедляется. Причем время тратится не на скачивание аватарок (они маленькие), а на установку соединений и ожидание ответа сервера, и получается, что ваш сайт - совсем не быстрый. Так как исключить эти запросы к серверу?

Еще одна типичная ситуация. Хочется где-нибудь на странице отобразить аватарки самых активных пользователей. Или еще вариант - на сайте есть меню с навигацией, и каждый пункт является картинкой. Опять-таки, это приводит к загрузке большого количества картинок. Как сделать так чтобы грузилась только одна картинка?

Ответы на эти два вопроса (и еще один) вы прочитаете в статье.

Data uri

Рассмотрим ситуацию, когда у вас есть много маленьких картинок, которые нужно грузить на веб-странице. Как исключить дополнительные обращения к серверу. Очень просто, используем технологию data uri, которую воспринимают даже самые старые браузеры. Пример кода:

<img border="0" src="'data:image/png;base64,?????????????'" />

А вот вместо знаков вопроса нужно поставить изображение, сконвертированное в base64. Тем самым, дополнительного обращения к серверу не происходит, изображение закодировано в html. Единственно что, картинка должна быть действительно маленькой, иначе основной html файл имеет шанс вырасти, и тогда он сам уже будет грузиться очень долго.

Отлично, - скажете вы. А как же получить это представление изображения? Очень просто. Привожу код на php:

$image = imagecreatefrompng($FILENAME);
imagealphablending($image, false);
imagesavealpha($image, true);
ob_start();
imagepng($image);
$contents = ob_get_contents();
ob_end_clean();
$FILECODE=base64_encode($contents);
imagedestroy($image);

Переменная FILENAME должна содержать имя файла, переменная FILECODE получает искомое представление. Внимание: FILENAME - это не адрес картинки в интернете, а имя файла (с путем) на сервере!

Но у вас, наверное, есть еще один вопрос. Неужели сервер должен каждый раз заниматься конвертацией? Это же повышает нагрузку! Правильно, и поэтому бы будем сохранять текстовое представление картинки на сервере. Напишем свою функцию insert_png, которую будем вызывать в том месте, где нам нужно вывести изображение. В случае наличия текстового представления, оно будет подхватываться сразу, в противном случае - сначала создаваться.

function insert_png($file) {
$file_d = $file.".txt";
if (file_exists($file_d)) {
$fh = fopen($file_d, 'r');
$file_code = fread($fh, filesize($file_d));
fclose($fh);
} else {
$file_p = $file.".png";
$image = imagecreatefrompng($file_p);
imagealphablending($image, false);
imagesavealpha($image, true);
ob_start();
imagepng($image);
$contents = ob_get_contents();
ob_end_clean();
$file_code=base64_encode($contents);
imagedestroy($image);
$fh = fopen($file_d, 'w');
fwrite($fh, $file_code);
fclose($fh);
}
return("'data:image/png;base64,".$file_code."' ");
}

Теперь вы в нужном месте просто пишите < img src="<?php echo(insert_png( PATH_TO_FILE_WITHOUT_EXTENSION))>">

Image map

Предудыщая технология приводит к росту размера вашего html файла. Поэтому в случае, когда вам нужно изобразить несколько картинок в ряд, лучше ее не применять, а загрузить все картинки одним изображением (один дополнительный запрос к серверу) и применить технологию image map. Опять-таки, ее понимают практически все браузеры.

Технология image map основана на том, что не вся картинка делается ссылкой, а лишь нажатия на определенные части картинки приводят к переходу по ссылки. Эта часть может быть прямоугольником, выпуклым многоугольником и даже кругом. Так что я был совершенно не прав, говоря в своей статья про дизайн, что в интернете не бывает ничего круглого. Приведем простой пример:

На картинке клик по красному квадрату приведет на Яндекс, а по зеленому кругу - на Google. При этом с сервера загружается только одна картинка. Как это сделано? Привожу код:

<MAP name="map">
<area href="http://www.yandex.ru" target="_blank" shape="rect" coords="50,50,150,150" title="Яндекс"/>
<area href="http://www.google.ru" target="_blank" shape="circle" coords="250,100,50" title="Google"/>
<img border="0" src="https://it.sander.su/images/image_map.png" width="350" height="200" usemap="#map">
</MAP>

Поясню. Тэг map начинает описания image map. В конце просто загружается картинка. А вот два тэга area описывают области на этой картинке. Так что все предельно просто!

Нажатие на фоновые картинки.

Как уже было сказано выше, применение технологии data uri может привести к тому, что большой основной html файл начнет грузиться медленно. Возникает естественная идея - а что если попытаться перенести картинки из основного файла в стилевой файл css. Data uri там тоже работает - достаточно написать в описании стиля

background-image:url('data:image/png;base64,?????????????')

Однако проблема заключается в том, что этот код создаст фоновое изображение. Теперь нам приходится задавать размеры блока и делать так чтобы он все-таки работал как ссылка. Привожу вариант решения: в основном файле пишется

<div class="test" onclick="document.location.href='???????????'">

А в стилевом файле для класса test пишем следующее:

.test {float:left;padding:0;margin:0;min-width:54px;width:54px;height:39px;background- repeat:no-repeat;background-image:url('data:image/png;base64,??????????')}

Как вы заметили, я решил проблему с использованием javascript. Кроме того, эта конструкция не работает в IE6. Кто предложит решение получше? Или вы знаете еще советы, как сделать ваш сайт быстрее?

А напоследок немножко реальности. Как выяснилось на примере моего сайта, можно оптимизировать "до посинения", но иногда вам просто нужен хороший хостинг. Если на вашем используются тормозные перегруженные компьютеры, то никакие увертки вам не помогут!

← Скорость сайтаИнтернет зависимость →
comments powered by Disqus