Быстрый сайт
Статья для вебмастеров. Я уже писал в прошлый раз про скорость сайтов, однако мер предложенных в том посте (оптимизация настроек сервера, кэширование и сжатие) иногда бывает недостаточно для того чтобы сделать загрузку страниц вашего сайта быстрой. Почему? Проблема все равно таится в количестве обращений к вашему серверу. Поэтому давайте закончим в этом году тему оптимизации сайта; после этого блог уходит на новогодние каникулы. Оставайтесь на связи, и в следующем году я обещаю начать с вещей, интересных не только вебмастерам.
Вернемся к нашим... сайтам. Типичная ситуация. К статье на блоге оставлено множество комментариев. И у каждого комментатора есть по аватарке - маленькому изображению рядом с ником. Каждое такое изображение - это дополнительный запрос к серверу, и их количество становится огромным - загрузка существенно замедляется. Причем время тратится не на скачивание аватарок (они маленькие), а на установку соединений и ожидание ответа сервера. Так как исключить эти запросы к серверу?
Еще одна типичная ситуация. Хочется где-нибудь на странице отобразить аватарки самых активных пользователей, как это сделано у меня на сайте. Или еще вариант - на сайте есть меню с навигацией, и каждый пункт является картинкой. Опять-таки, это приводит к загрузке большого количества картинок. Как сделать так чтобы грузилась только одна картинка?
Ответы на эти два вопроса (и еще один) вы прочитаете в статье.
Data uri
Рассмотрим ситуацию, когда у вас есть много маленьких картинок, которые нужно грузить на веб-странице. Как исключить дополнительные обращения к серверу. Очень просто, используем технологию data uri, которую воспринимают даже самые старые браузеры. Пример кода:
А вот вместо знаков вопроса нужно поставить изображение, сконвертированное в base64. Тем самым, дополнительного обращения к серверу не происходит, изображение закодировано в html. Единственно что, картинка должна быть действительно маленькой, иначе основной html файл имеет шанс вырасти, и тогда он сам уже будет грузиться очень долго.
Отлично, - скажете вы. А как же получить это представление изображения? Очень просто. Привожу код на php:
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, которую будем вызывать в том месте, где нам нужно вывести изображение. В случае наличия текстового представления, оно будет подхватываться сразу, в противном случае - сначала создаваться.
$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. При этом с сервера загружается только одна картинка. Как это сделано? Привожу код:
<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 там тоже работает - достаточно написать в описании стиля
Однако проблема заключается в том, что этот код создаст фоновое изображение. Теперь нам приходится задавать размеры блока и делать так чтобы он все-таки работал как ссылка. Привожу вариант решения: в основном файле пишется
А в стилевом файле для класса test пишем следующее:
Как вы заметили, я решил проблему с использованием javascript. Кроме того, эта конструкция не работает в IE6. Кто предложит решение получше?
Дата: 28 декабря 2009 г., категория: для вебмастеров.
| ← Скорость сайта | Интернет зависимость → |
Комментарии
1# |
Спасибо за информацию. Надо воспользоваться этими советами на некоторых ресурсах. К тому же вроде как Гугл при ранжировании теперь уделяет большее внимание быстрым сайтам. |
2# |
2 недели занимались настройкой кэширования на сайте, будем надеяться труд не пропадёт зря! |
3# |
Да, это, конечно, познавательно, но при нынешних скоростях и каналах, стоит ли так изощряться? Ведь, народ уже давно не на Dial-up сидит...У меня ну оччень старенький сервер. Теперь вопрос: что дольше будет выполняться: обработка кучи скриптов или просто загрузка странички??? |
4# |
проверять надо, зависит от посещаемости... |
5# |
На мой взгляд - довольно спорное решение проблемы. По мне, так прежде всего следует проанализировать вес страницы, посмотреть, где и как можно урезаться. предположим - не оптимизированный рисунок в шапке, фон, запросы к базе и прочее. |
6# |
спасибо за описание функции image map. я использовал эту функцию для загрузки множества изображений( для фотогалереи) и мой сайт стла грузится раза 2-3 быстрее обычного. буду ждать еще каких-нибудь советов))) |
![[*]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAA7ElEQVRIie2XTQ6CMBCF3xgPQsLWQ7is8TrlECYeAe7hrhzDHdzkueBX1KSdImjCS7roYuZrp28KFQDECtoDALksW0SwW5Q40gb+UXCZQUSeRlbq4fRSldM0rfcyTF755WjVxnmCSVa5oXX9jLnp4Jbuc1g8+N1CmiSGIZsGwChz1febOlYPrgtcrt3kgDQJT6EosqMdmWs4d/9Sq8DO6h2tB4/bKnSrMeDByWEtNAXrzWXPOKqDFa5O0kMEbpCgKfUsybyhqh+B/kNxQlHHLSDEWqP7eWFX01nV/TwF/9EZz6QNvIG/JsFKj7YHwRrAR6l51asAAAAASUVORK5CYII= "Гость")
