- Автор темы
- #1
Оптимизация сайта by SanGreel
Это интересует очень многих и я решил помочь всем бесплатно)
Я буду объяснять как сильно увеличить скорость работы сайта разными путями.
И так сразу к делу :
1)Оптимизация главной темы сайта:
а)тема сайта как известно состоит из многих составляющих одна из который картинки
картинки это очень большой процент от всего что загружается на странице!!
для начала я расскажу как вы можете сделать их размер меньшим ,для этого есть 2 программы :
Для просмотра ссылки Войди
Первая качественно и очень сильно урезает размеры при небольшой потери качества а вторая для масового изменения изображений
Открываем нашу тему-смотрим папку images в ней и лежат все изображения темы вот и открываем их через FastStone Image Viewer 4.4 (лично я оптимизировал через нее png и скинул на этом 100 не нужных кб что уже само по себе неплохо!)))
так дальше, не секрет что мы используем фоновое изображение которое достаточно много весит
Именно для этого я и использовал прогу RIOT - что б урезать свое изображение фоновые и опять скинул 100кб вот можете
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
Ну вот с изображениями темы закончили))
б)и так в теме вы можете увидеть css файлы -это файлы оформления и в них зачастую куча хлама(ненужные комменты,пробелы и другое) и все это размер загружаемого контента во время загрузки сайта....
есть специальные сервисы ,вот один из них(который использую я )
Для просмотра ссылки Войди
Очень качествення вещь-всем советую
Важно:
ставьте Normal потому что Super Compact может вам испортить всю тему !Compression mode: (?)
Light
Normal
Super Compact
выбирайте Strip ALL commentsComments handling: (?)
Don't strip any comments
Strip ALL comments
Strip comments at least chars long (NOT counting line breaks within comment)
Важно:Всегда держите дубликат css файлов без оптимизации ,почему?
потому что при оптимизации теряется читабельность кода
ВОТ пример
до оптимизации:
Код:
* + html .wrapper {
margin: 0px auto;
width: 995px;
text-align: left;
background-repeat: no-repeat;
background-position: 50% 0%;
}
Код:
*+html .wrapper{margin:0px auto; width:995px; text-align:left; background-repeat:no-repeat; background-position:50% 0%}
Начальный размер: 445 bytes
Размер после оптимизации: 124 bytes
Оптимизировано: 321 bytes (72%)
Ну теперь вы знаете что нужно иметь дубликат и знаете как оптимизировать- начинайте!
в)теперь если у вас есть JavaScriptто оптимизируете их приблизительно также как и css но уже через этот сервис
Для просмотра ссылки Войди
....думаю разберетесь
ВСЕ! оптимизация темы завершена,
теперь я думаю вы можете увидеть явно насколько скорея стал ваш сайт!
Но это было только начало
2)Теперь деламе все тоже но уже с другими файлами на сайте таких типов пример:
папка css у меня на трекере и в ней как не странно лежит большое количество css файлов - их тоже оптимизируем (у вас они могут лежать в другой папке)
также делаем со всеми JavaScript- там и сайта я на этом скинул приблизительно 1 мегабайт :geek: !
В принципе закончили оптимизацию файлов и скорость сайта должна возрасти в пару раз!
3)Теперь я советую отключить все JavaScript-ты где только можно а если нельзя то оптимизируйте их!
4)Теперь кешируем все блоки где только можно но ставим на время приблизительно 4-5 часов если блок не нуждается в частом обновление
вот как кешировать блоки на кибере:
Код:
$time_to_update = 60 * 60; // Обновить блок через 60 мин.
$content = ReadCache ( 'block-name', true, false, - 1, true, $time_to_update, $time_updating );
if (! $content) {
[b]Ваш блок![/b]
$content = WriteCache( $content, "", true, "", true );
}
$time_updating = ($time_to_update - (time () - $time_updating));
$content .= "<center><font size=1><strong><font color=\"green\">Блок обновится через: <span id=\"stats_timer\">" . get_elapsed_time ( time () - ($time_updating > 0 ? $time_updating : $time_to_update) ) . "</span></font></strong></font></center>";
С помощью этого приема вы можете урезать количество запросов в 2 раза!
5)Еще пару приемов от DENZEL519 которые он описал в своей статье ,,Как увеличить скорость загрузки сайта и уменьшить трафик,,
а)Включаем компрессиюКак уже наверняка, многие знаю, последние версии практически всех Интернет-браузеров поддерживают возможность разархивировать контент, переданный веб-сервером в формете gzip, на лету. Можно воспользоваться этой фишкой и предварительно сжимать gzip’ом страницы блога перед отправкой их конечному посетителю . Для этого, правда, понадобится наличие подлкюченного Apache-модуля mod_gzip. Если ваш хостер включил данный модуль по-умолчанию, то вы можете заставить его работать, добавив следущие строки к .htaccess:
Код:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Очевидно, что теперь все текстовые файлы, а также ресурсы указанных mime-типов будут сжиматься алгоритмом gzip.Если же модуль не подключен, то этот вариант не сработает. Однако есть запасной вариант, правда достаточно ресурсоёмкий:
Код:
php_value output_handler ob_gzhandler
б)Добавляем окончание кэширования на будущее и управляем кэшем
Идём дальше. При первом посещении вашего сайта браузер посетителя выполняет несколько запросов к серверу (пока скачаются необходимые файлы, скрипты, изображения). Чтобы этого не происходило каждый раз, вы с помощью заголовков Expires и Cache-Control сможете кэшировать такие файлы. После чего лишние запросы к серверу не будут осуществляться при последовательном просмотре страниц.Чтобы настроить заголовки Expires необходимо добавить следующие строки в файл .htaccess:
Код:
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 3600 seconds"
ExpiresByType text/html "access plus 3600 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
</ifModule>
Как вы видите практически файлы всех типов, кроме text/html будут кэшироваться и срок их хранения достаточно долгий (ну не каждый же час меняются, например, изображения).Теперь, что касается Cache-Control. Этому заголовку подчиняются все кэширущие системы в независимости от того осуществляется ли запрос к серверу или ответ от него. Настраиваем заголовок добавление следующих строк всё в тот же файл .htaccess:
Код:
<ifModule mod_headers.c>
# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
# 7 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 1 час
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=3600, private, must-revalidate"
</filesMatch>
</ifModule>
Заметим, что теперь файлы изображений будут кэшироваться на всех публичных кэш-уровнях в течение 1 месяца. Файлы каскадных таблиц и javascript-кода могут изменяться чаще, чем изображения, поэтому срок нахождения их в кэше поменьше, и т.д. Кстати, private никоим образом не означает конфиденциальность контента, этот ключ лишь говорит каким образом будет кэшироваться объект.
в)Выключаем проверку объектных тегов ETag
Объектные теги или entity tags (ETag) представляют собой механизм проверки на наличие новой версии кэшированного файла. Так вот, удаляя заголовок ETag, вы говорите кэширующим серверам и браузеру, чтобы они не проверяли наличие новых версий кэшированных файлов, т.е. они должны полагаться только на заголовки Cache-Control и Expires. Однако не рекомендуется отключать ETag для html-страниц. Ниже приведены строки, которые нужно добавить в .htaccess:
Код:
<ifModule mod_headers.c>
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header unset ETag
FileETag None
</filesMatch>
</ifModule>
г)Удаляем заголовок Last-Modified
В дополнение ко всему выше упомянутому вы можете удалить запросы If-Modified-Since и If-None-Match, а также ответы на них 304 Not Modified. Сделать это можно удалением заголовка Last-Modified, чтобы проверка на измененное содержание не осуществлялась до тех пор пока об этом не объявит заголовок Expires. Добавляем строки:
Код:
<ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
[i]
[b]Внеся все эти изменения в файл .htaccess скорость загрузки вашего блога увеличится, а трафик уменьшится.[/b][/i][/spoiler]
[POSTS=1][i][b][url=http://to-fu.in/index.php]ГЛЯНУТЬ ДЕМО![/url][/b][/i][/POSTS]
[i][b][color=green]
Ну вот в принципе оптимизация сайта на сегодня закончена!
[SIZE="4"]
[/color][color=orange]Статью подготовил SanGreel
[/color][/b][/i][/SIZE]
[I]P.S.Я писал эту статью бесплатно и мотивацией для меня была не большая реклама моего форума я думаю никто против не будет!:)
P.P.S.Надеюсь я не нарушил никаких правил ,но если я это сделал не баньте пожалуйста а скажите и я исправлю![/I]