7562 читателя, 1406 постов
Администрация
Модераторы
Полезности для web-разработчиков.
Web-разработка whois
- индекс
- 184,85
Как я выполнял советы webo.in
Сегодня изучал советы сервиса webo.in. Захотелось рассказать, что и как делал.1. CSS-файлы можно уменьшить в размере. JS-файлы можно уменьшить в размере.
Не сильно они и большие у меня, но если можно, то ладно.
1. yuilibrary.com/downloads/#yuicompressor – скачал
2. >java -jar yuicompressor-2.4.2.jar main-src.js -o main.js
3. >java -jar yuicompressor-2.4.2.jar main-src.css -o main.css
Пункт первый готов.
2. Выносите javascript и CSS во внешние файлы.
Счетчик гугла надо спрятать в main.js. Не все работает, как хочется, пришлось читать разные тексты:
1. community.livejournal.com/ru_coding/243574.html
2. stevesouders.com/efws/script-onload.php
3. blog.andrewcantino.com/2008/11/23/replacement-for-script-onload-in-ie/ — здесь еще по теме, но мне достаточно было и предыдущего варианта. Не проверял, но в закладки добавил.
Итак, main.js пополнился такими строками:
function loadscript(url, onload)
{ s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', url);
s.onload = function() { // FF, Opera
if (!s.onloadDone) // Opera
{
s.onloadDone = true;
if (onload) onload();
}
};
s.onreadystatechange = function() {
if ( "loaded" === s.readyState && !s.onloadDone ) { // IE, Opera
s.onloadDone = true;
if (onload) onload();
}
}
document.getElementsByTagName('head')[0].appendChild(s); }
function analytics()
{
loadscript('http://www.google-analytics.com/ga.js',
function()
{ try {
var pageTracker = _gat._getTracker("UA-2367900-6");
pageTracker._addOrganic("mail.ru","q");
pageTracker._addOrganic("rambler","query");
pageTracker._addOrganic("webalta","q");
pageTracker._addOrganic("aport","r");
pageTracker._addOrganic("tut.by","query");
pageTracker._addOrganic("all.by","query");
pageTracker._initData();
pageTracker._trackPageview();
//alert(pageTracker); // Ok?
} catch(err) {} }
); }
Object.prototype.attachEvent = function (sEvent, fnHandler, bUseCapture) {
this.addEventListener(sEvent.indexOf('on') == 0 ? sEvent.replace('on', '') : sEvent, fnHandler, bUseCapture);
}
window.attachEvent('onload', analytics, true);
* This source code was highlighted with Source Code Highlighter.Убрал с одного места пару строк и добавил в другое в 10 раз больше, оптимизатор:) Изучил новые мини-трюки.
3. HTML-файлы могут быть уменьшены в размере. Не включено кеширование для статических файлов.
Получилась такая функция. Применяется после ob_get_contents();
function filterContent($data)
{ $data = preg_replace('#\s{2,}#', ' ', $data);
$data = preg_replace('#<!--.+?-->#s', '', $data);
return $data;
}
* This source code was highlighted with Source Code Highlighter.В .htaccess:
# server-tuning.info/apache/content-compressing.html
AddOutputFilterByType DEFLATE text/html application/xhtml+xml text/plain text/xml \
text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent env=!dont-vary
# https://studio.tellme.com/vxml2/ovw/perf/cache_apache13.html
<IfModule mod_expires.c>
<FilesMatch "\.css$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
FileETag none
</FilesMatch>
<FilesMatch "\.js$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
FileETag none
</FilesMatch>
</IfModule>
* This source code was highlighted with Source Code Highlighter.1. Кто-нибудь расскажет как бороться с оставшимися двумя советами? Что-то терзают сомнения по поводу правильности добавления всего содержимого стилей и js на страницу из-за двух лишних запросов.
2. Почему у меня аж 166% возможного ускорения?
Мой сайт похож на google — такой же самый крутой))
UPD: обновил по наводке homm вырезалку комментариев.
FileETag none — 10x 2 volinrok
комментарии (48)
preg_replace('#<!--.+?-->#', '', $data);Так не лучше?он работает до закрывающейся скобки треугольной. а она только в конце комментария
странно что я его часто видел, а тут свое кривое что-то вписал)
Я бы воспользовался таким:
<!--[\s\S]*?-->(возможно, что профи регэкспов закидают меня помидорами, но он работает, это я знаю точно:))
Вырезание комментариев таким регекспом может вызывать потерю значимого кода.
— There are 2 components with misconfigured ETags
* www.grinkevich.by/styles/main.css
* www.grinkevich.by/scripts/main.js
Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser's cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.
Вообще очень рекомендую почитать blog.stackoverflow.com. Много интересной информации о оптимизации большого проекта.
Например вот здесь много полезного:
blog.stackoverflow.com/2009/08/a-few-speed-improvements/
Разве лишнее подключение к серверу (загрузка внешнего файл) ускоряет загрузку страницы?
дополнительно приписывать по 10-15-30… Кб мусора. уверен, что ускоряет :)
Оптимизация ради оптимизации — это всего лишь хороших способ пораскидать кнопочки по сайтам.
это тренировка. а тест webo.in показал, что чего-то да и наоптимизировал :)
да и самому заметно. мелочь, а приятно)
вы вынесли весь JS в один файл (чем плохо в двух?), но зато понаписали кучу кода для того, чтобы второй js-файл работал в первом js-файле
имхо, это уже клиника
я не вижу никакого роста производительности в том, что вместо 124 запросов на сервер будет 125
просто опять же дело не в скрипте от гугла, дело в том, что сделал автор топика — сделал мотоцикл, чтобы запустить велосипед
кстати, сколько себя помню — ни разу не тормозил скрипт GA
Last-Modified Sat, 12 Sep 2009 00:35:39 GMT
то есть нужно было бы еще и обновлять у себя его регулярно
а моей велик на мотоцикле сейчас летаей ой-йой-йой))
Переносить на свой сервер я не предлагал, это скорее всего противоречит EULA. А вот вынести в onload вместо inline — вполне разумное решение.
1. веб-сайт полностью посещает пару млрд. человек
2. веб-сайт полностью приводит тысячи клиентов
3. веб-сайт полностью сделал работников компании миллиардерами
ну и тому подобное. есть к чему стремиться :)
«Загружается более 1 фонового изображения.»
«Размер фоновых изображений очень большой.»
«Загружается более 1 картинки.» о_О
короче, оптимизируйте xD
Может под-архивацией подразумевается gzip-сжатие на серваке.
<filesmatch "\.(ico|jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault «access plus 1 year»
FileETag MTime Size