Оптимизация загрузки страниц

[Sarmano]

Из собственного опыта работы со скинами и дизайном сайтов.

 

 

Что можно/нужно сделать для увеличения скорости работы и открытия страниц по разделам:

ПРЕЖДЕ ЧЕМ ДЕЛАТЬ КАКИЕ ЛИБО ИЗМЕНЕНИЯ - СДЕЛАЙ РЕЗЕРВНЫЕ КОПИИ ИЗМЕНЯЕМЫХ ФАЙЛОВ!!

 

 

СЖАТИЕ ПЕРЕДАВАЕМЫХ ДАННЫХ

1. Я полностью не уверен идет ли сжатие данных при открытии страниц в новых версиях форума, поэтому сначала воспользуемся утилиткой сжатия. Забираем тут.

Распаковываем и кидаем на фпт в корень форума как есть.

 

Редактируем файл в корне форума index.php

Найти:

<?php

Ниже добавить:

include('/абсолютный_путь_к_файлу_на_сервере/forum/gzdoc.php');

 

Найти:

?>

Выше добавить:

gzdocout();

 

Рекомендация по сжатию - заходим в файл gzdoc.php, находим строчку

function GzDocOut($level=4, $debug=0){

Значения $level отвечают за силу сжатия передаваемых данных, мои рекомендации 3-5, если у Вас выделенный сервер, то можно поиграть со значениями 6-8.

 

Все вышеописанные манипуляции ускорят загрузку страниц в разы (до 3-5 раз)

 

PS. Можно также поискать компрессор для графики при условии использования Вами на сайте огромного количества PNG файлов, сжатие поможет съэкономить трафик до 60%. Если же используете GIF - данная опция не подойдет.

 

 

 

 

КЭШИРОВАНИЕ

В большинстве случаев, открываемые страницы используют редко обновляемую графику и оформления в стиле, тем не менее не все браузеры умеют "интуитивно" обрабатывать данные или тратят доли секунд на обработку данных с выбором откуда их "подцепить" к стилю из кэша бразера или перескачать с сайта, что займет какое-то время.

 

1. Навяжем браузерам "время последних изменений" в страницах.

 

Редактируем файл в корне форума index.php

Найти:

<?php

 

Ниже добавить:

# Всегда обновлен
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
# для HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
# для HTTP/1.0
header("Pragma: no-cache");

 

Таким образом "заставим" браузеры не тратить время на их решения, но сразу определиться - страница обновлена.

Одной проблемой становится меньше, браузеры "тупо" делают загрузку по нашим настройкам без выбора.

 

2. Поскольку выше Мы указали браузерам о постоянстве обновлений, необходимо указать что нужно закэшировать и не обрабатывать в будущем (по истечении времени).

 

Все это Мы сделаем через .htaccess.

Забираем тут - настроенный файл доступов с глобальными значениями.

Также рекомендую закинуть следующий файл в директории, которые требуется кэшировать "навсегда или надолго". Будет полезным закинуть данный файл во все папки с графикой, например ico-posting,style_images,style_avatars и т.д., тоесть во все папки содержащие в большинстве своем изображения.

Изменено 26 Января 2009 пользователем Sarmano

[Sarmano]

CSS

 

Стили страниц можно также сжимать и оптимизировать, хотя многие этого не делают из-за неудобства правки в будущем.

Тем не менее всегда можно сохранить оригинальный (несжатый) файл отдельно и после правок пережать заново.

Есть также и нюансы в самой настройкой каскадных стилей и их поддержкой в разных браузерах.

 

1. Сделаем данные "чистыми" для онлайн валидаторов. Для этого нам нужно будет произвести разделение стилей на два вида :

- для IE семейства браузеров

- все остальные браузеры

 

 

Многие используют в последнее время ряд команд для красоты, например прозрачности.

Поэтому можно вынести подгрузку стиля для разных браузеров:

 

<style type="text/css" media="all">@import url(style.css);</style>
<!--[if IE]>
<style type="text/css" media="all">@import url(style_ie.css);</style>
<![endif]-->

 

Несколько раз замечал стиль под IE, полностью дублирующий стиль по умолчанию в чем нет необходимости.

style_ie.css - будет служить лишь дополнением к уже имеющемуся основному стилю style.css

 

В теле стиля имеется строчка прозрачности для класса test:

.test{filter:alpha(opacity=85);opacity: 0.85;}

Валидатор выдаст ошибку, указав на неизвестную опцию filter:

 

Сделаем разделение

для style.css:

.test{opacity: 0.85;}

для style_ie.css:

.test{filter:alpha(opacity=85);}

 

Как видим класс мы не удаляем, но разделяем. В примере класс состоит только команды прозрачности, но скорее всего класс будет заполнен командами, в момент разделения основные команды остаются именно в style.css файле.

В style_ie.css только лишь дописывается дополнение от разделения, остальные опции дублировать нет необходимости.

 

2. В IE существует баг с мерцанием графики при динамическом использовании.

Чтобы этого не происходило в style_ie.css сделаем дополнение:

html{filter: expression(document.execCommand("BackgroundImageCache", false, true));}

 

3. Существует в IE также баг с поддержкой PNG файлов с прозрачностью, как ни крути, но иногда очень хочется сделать красивое дополнение к дизайну скажем в момент празников, без полной верски страницы можно добавить элемент с наименьшими усилиями как раз воспользовавшись PNG.

 

Чтобы все это стало возможным, пришлось перерыть очень много информации. Гугл или Яндекс выдадут по запросу достаточное количество решений, но все они работают "не чисто", что-то всегда отображается не как хотелось или задумано. Для реализации воспользуемся следующим классом (вставить в style_ie.css):

/* CSS PNG Image Fix for IE */
* html img#png{position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "imаges/blank_dot.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}

 

Обратите внимание на this.src = "imаges/blank_dot.gif" - здесь указан путь к GIF файлу на сервере, шириной и высотой в 1 пиксель с прозрачным бэкграундом. Можно взять отсюда.

 

Для примера использования, скажем нам требуется в правый верхний угол форума еловая ветка с новогодними игрушками, (рисуем ее разумеется во всей красе) и вставляем следующим образом в код страницы:

<nolayer><div style="position:absolute; top:0; right:0;"></nolayer>
<img border="0" src="images/xmas.png" id=png>
<nolayer></div></nolayer>

 

4. После подготовки поддержки стилями разных "фишек" с поддержкой браузеров перейдем к сжатию.

Поможет нам в этом например сервис - CSS Formatter and Optimiser.

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

 

5. Попробуем "ужать" и графические изображения GIF. Сжать у нас не получится, но воспользоваться трюком с экономией можно.

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

 

Задержки при открытии страниц происходят именно в момент обращения браузером на сервер, каждую картинку требуется открывать как независимую единицу, что разумеется занимает время обращения, тоесть при наличии на странице 50 графических элементов - браузер 50 раз обратится на сервер. Это к сожалению не доли секунд, намного больше ...

 

Требуется вынести всю графику в классы основного стиля и подгружая их в нужном расположении, заполнять страницу, воспользуемся трюком CSS Image Sprites.

Сложно ничего нет, но в принципе работы разобраться придется. Любая поисковая система вполне сможет направить Вас найти описания работы и примеры.

 

Мои рекомендации по онлайн сервису - CSS Sprite Generator.

 

Полученные изменения могут дать экономию на графике до 30%, что значительно в условиях форума, но только при условии имеющего у вас количества изображений (более 25) в оформлении.

 

 

 

 

 

 

СКРИПТЫ

Как все уже заметили скриптов в последних версиях становится все больше и больше.

Поэтому настоятельно рекомендую пробовать сжимать самостоятельно, но нужно будет разбираться, что и как.

В новые версии дистрибутивов, если не ошибаюсь уже входят сжатые версии, со старыми сложнее.

 

1. Рекомендую следующие сервисы:

JS Minifier - сжимает неплохо, особенно полезен для динамических скриптов без библиотек.

Javascript compressor, алгоритм от Dean Edwards - сжимает очень сильно, но не всегда полезен при вызове функций, хотя если Вы разбираетесь, то можно настроить.

 

2. Скрипты обычно выполняют роль функциональности, поэтому в момент загрузки страниц нет необходимости их загружать до HTML кода или до стилей CSS. Особенно это будет ощутимо при открытии достаточно больших библиотек.

Задержки открытий страниц будут измеряться уже не в долях секундах, но в секундах.

 

В момент начала загрузки пользователь не в состоянии воспользоваться скриптом, атрибуты которого еще не подгрузились из кода страницы, поэтому логичнее будет вынести загрузку скриптов в самую последнюю очередь.

Для этого зайдем в панель администратора:

ВНЕШНИЙ ВИД - Управление стилями - Список стилей - Изменить общий шаблон форума

Найдем в шаблоне строку <% JAVASCRIPT %> и перенесем ее в самый вниз.

Найти:

</body>

 

Выше добавить

<% JAVASCRIPT %>

 

 

 

 

Если ГУРУ помогут, подправят или дополнят - будет замечательно.

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

Изменено 26 Января 2009 пользователем Sarmano

[Sannis]

html{filter: expression(document.execCommand("BackgroundImageCache", false, true));}

Мне кажется, или это неоптимизированный экспрешн?

 

Спасибо за подробное описание, многим оно пригодится. Закрепляю.

 

P.S. А для совсем продвинутых очень подойдёт http://webo.in

[Sarmano]

Sannis

 

Насколько не оптимизировано - не уверен. Думаю даже нет смысла ничего оптимизировать, возможно неправ.

Насколько смог понять это всего лишь дополнение к стилю на совместимость для IE семейства не более того.

[Sannis]

Насколько не оптимизировано - не уверен. Думаю даже нет смысла ничего оптимизировать, возможно неправ.

Насколько смог понять это всего лишь дополнение к стилю на совместимость для IE семейства не более того.

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

html{
behavior: expression(
	runtimeStyle.behavior = 'none',
	document.execCommand("BackgroundImageCache", false, true)
);
}

Использовать ли behavior или filter на мой взгляд не принципиально, хотя...

 

А можно вообще вынести это из стилей в скрипт, но это уже кому как больше нравится

 

 

По этому поводу можно почитать Тонкий CSS для Internet Explorer (expression) и презентацию. Наверняка можно и видеозапись найти.

[Sannis]

Мдя, IE меня убивает. Любая мелкая ошибка в экспрешене убивает браузер без возможность отладки :/

[Chib@]

Все вышеописанные манипуляции ускорят загрузку страниц в разы (до 3-5 раз)

А на линейке 2.x.x убьют аттачи...

[Sarmano]

Chib@

 

Каким образом описанные манипуляции могут затронуть вложения на страницах.

Если можно с пояснением принципа или какой-то логикой описания.

 

Заранее спасибо!

Изменено 21 Марта 2009 пользователем Sarmano

[likro]

Кстати да, поставил дня два назад gzdoc. Всё работало отлично, и вроде как даже помогло (в смысле оптимизации).

Но сегодня заметил что аттачи не работают. Просто не хотят открываться.

 

Ошибка в типе содержимого

Страница, которую вы пытаетесь просмотреть, не может быть показана, так как она использует неверную или неподдерживаемую форму компрессии.

Пришлось убрать =(

[Makeich74]

Кстати да, поставил дня два назад gzdoc. Всё работало отлично, и вроде как даже помогло (в смысле оптимизации).

Но сегодня заметил что аттачи не работают. Просто не хотят открываться.

оптимизации незаметил, а аттачи тоже перестали открываться.

[MARY_76]

2. Поскольку выше Мы указали браузерам о постоянстве обновлений, необходимо указать что нужно закэшировать и не обрабатывать в будущем (по истечении времени).

 

Все это Мы сделаем через .htaccess.

Забираем тут - настроенный файл доступов с глобальными значениями.

 

После этих изменений, сайт выдает ошибку 500. Что не так делаю?

[ancheys]

Посоветовали обратиться в bSimple.Люди советовали правильные, но все же. Кто что про них знает?

[myrl48]

Отличный материал, спасибо. Современные поисковые системы стали требовательным к таким вещам.