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

Быстрый сайт

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

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

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

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

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. Опять-таки, ее понимают практически все браузеры.

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

На картинке клик по красному квадрату приведет на Яндекс, а по зеленому кругу - на 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="http://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. Кто предложит решение получше?

Дата: 28 декабря 2009 г., категория: для вебмастеров.

Хотите знать все об интертете?

Введите свой адрес электронной почты чтобы подписаться на обновления!


Уже 552 постоянных читателя! Присоединяйтесь!


Доставляется при помощи FeedBurner. Никакого спама. Всегда можно отписаться!

Что-то непонятно или не получается?
Оставьте свои пожелания или вопрос в виде комментария к статье. Информация о новых комментариях сразу приходит ко мне на почту, и я постараюсь ответить на ваш вопрос как можно скорее!

Есть вопрос по схожей теме?
Попробуйте поискать по сайту (форма поиска находится наверху страницы). Кроме того, можно задать мне вопрос через форму обратной связи.

Нужна компьютерная помощь?
Напишите мне о своей проблеме через форму обратной связи, я постараюсь помочь. Если же проблему невозможно решить удаленно, вы можете обратиться к специалистам, чей баннер расположен наверху.

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

Комментарии

1#

alxndr blog
28 декабря 2009 г. 10:27:00

Спасибо за информацию. Надо воспользоваться этими советами на некоторых ресурсах. К тому же вроде как Гугл при ранжировании теперь уделяет большее внимание быстрым сайтам.
 

2#

степан
31 декабря 2009 г. 12:46:51

2 недели занимались настройкой кэширования на сайте, будем надеяться труд не пропадёт зря!
 

3#

remontkompjutera
17 января 2010 г. 22:31:20

Да, это, конечно, познавательно, но при нынешних скоростях и каналах, стоит ли так изощряться? Ведь, народ уже давно не на Dial-up сидит...У меня ну оччень старенький сервер. Теперь вопрос: что дольше будет выполняться: обработка кучи скриптов или просто загрузка странички???
 

4#

Sander
18 января 2010 г. 02:53:37

проверять надо, зависит от посещаемости...
 

5#

Texnik
18 января 2010 г. 09:26:36

На мой взгляд - довольно спорное решение проблемы. По мне, так прежде всего следует проанализировать вес страницы, посмотреть, где и как можно урезаться. предположим - не оптимизированный рисунок в шапке, фон, запросы к базе и прочее.
 

У вас есть вопрос не по теме статьи?
Нужна компьютерная помощь?
Задайте свой вопроc
на нашем новом проекте!

Подписаться на: комментарии к статье (rss), комментарии к статье (e-mail)
[*] Авторизоваться при помощи профиля Google (и не только)
Самые активные участники сайта:

Хотите разместить здесь свою аватарку? Авторизуйтесь, загружайте картинку и комментируйте!
Имя:

E-mail (если хотите подписаться на комментарии):

Сайт (не обязательно):

Я - робот! (снимите галочку, если это не так)
Для блоггеров: если вы хотите чтобы ваша ссылка индексировалась поисковыми системами, вам нужно авторизоваться при помощи Google Friend Connect и написать осмысленный комментарий по теме. В таком случае я переведу ваш аккаунт в разряд "trusted". Комментарии пользователей с проверенным аккаунтом не попадают на модерацию, ссылки индексируются, а рядом с ником стоит значок с зеленой галочкой. Да, модерацию могут пройти только ссылки IT-тематики! Внимание: если вы не авторизуетесь, я не смогу сделать вашу ссылку активной даже если мне понравятся ресурс и комментарий!
Комментарий:

Подписаться на  комментарии к статье (rss), комментарии к статье (e-mail)

У вас есть вопрос не по теме статьи?
Нужна компьютерная помощь?
Задайте свой вопроc
на нашем новом проекте!