Как сделать САЙТ еще БЫСТРЕЕ? (или Pagespeed в топку!)

Автор Dogica, 29-09-2014, 08:27:16

« назад - далее »

DogicaTopic starter

Вот несколько проверенных разбитым лбом и потерей времени и сил советов.
Они работают как каждый отдельно так и все вместе.. при желании и понимании конечно:

ВСЕ ТЕСТЫ И СРАВНЕНИЯ ПО СКОРОСТИ ЗАГРУЗКИ ЖЕЛАТЕЛЬНО ПРОВОДИТЬ МИНИМУМ НА 3Х РАЗНЫХ КОМПЬЮТЕРАХ ЧТОБЫ БЫТЬ УВЕРЕННЫМ ЧТО
ТОРМОЗА НЕ ИЗ ЗА ВАШЕГО БРАУЗЕРА в котором куча надстроек, вирусов и добавок или просто устаревшая версия самого браузера
НЕ ИЗ ЗА ВАШЕЙ ОПЕРАЦИОННОЙ СИСТЕМЫ ИЛИ СОФТА в ней (Антивирусов скажем или запущенного скандиска или архиватора во время проверок...)
и не из за ВАШЕГО ЖЕЛЕЗА (я имею ввиду количество операционной памяти, видеокарты, скорости жесткого диска.. и прочих вещей, включая драйвера и настройки системы)
И НЕ ИЗ ЗА ВАШЕГО МЕСТОРАСПОЛОЖЕНИЯ В ЛЮБИМОМ ОФФИСЕ ЗА 3мя ФАЙРВОЛАМИ и некурящим СИС АДМИНОМ С ОПЫТОМ НА ПЛЕЧАХ cool
Ну и конечно не из за скорости Вашего доступа к интернету (и \ или Вашего соседа, который висит на вашем подключении и смотрит фильмы онлайн;-)
Вот утилиты которые позволяют проверить ваш сайт при доступе с разных точек земного шара не выходя из дома: http://www.webpagetest.org/ и http://cloudmonitor.ca.com/en/checkit.php

ОБЯЗАТЕЛЬНО СОЗДАЙТЕ РЕЗЕРВНУЮ КОПИЮ ВСЕГО ЧТО МОЖЕТ ИСПОРТИТЬСЯ
ПЕРЕД ЛЮБЫМИ ЭКСПЕРИМЕНТАМИ, ТЕСТАМИ И ПРОБАМИ НА ВАШЕМ САЙТЕ !!!


0) Обязательно используйте DOCTYPE - любого вида. Даже просто вот такой <!DOCTYPE> или <!DOCTYPE html> -
если честно, я не люблю лишних пассажиров для сайта.. но как оказалось на практике - данный тэг это своего рода переключатель браузера клиента (посетителя) сайта. Если он установлен - браузер автоматически входит в нормальный режим просмотра.. иначе браузер пытается определить версию вашей вестки и в большинстве случаев это понижает время загрузки сайта.

1) ИЗУЧИТЕ и ОПРЕДЕЛИТЕ ЧТО КОНКРЕТНО (и для чего) ДЕЛАЕТ ВЕСЬ КОД НА ВАШЕМ САЙТЕ и НЕ ИСПОЛЬЗУЙТЕ НЕИЗВЕСТНЫЙ КОД.

2) ЗНАЙТЕ ФУНКЦИИ, ВОЗМОЖНОСТИ, ОПЦИИ И ЗАПРЕТЫ системы в которой вы строите ваш сайт:
ознакомьтесь с HTML - http://www.dikarka.ru/lessons.shtml
онлайн уроки и книги по HTML - http://htmlbook.ru или http://www.w3schools.com/ или http://ru.html.net/tutorials/html
подучите JQUERY - http://anton.shevchuk.name/jquery-book/ или http://www.w3schools.com/jquery
тут про FLASH - http://flash.demiart.ru или http://www.artflasher.com/webmaster
улудшите ваш код - http://habrahabr.ru/post/63797
найдите хорошие примеры - http://ruseller.com
изучите форум вашего CMS - и черпайте оттуда данные и советы как ускорить ваш сайт под их системой


3)СЖИМАЙТЕ JS И CSS CODE после того как вы закончили его редактировать и настраивать:
JS - http://jscompress.com или http://javascriptcompressor.com
CSS - http://www.minifycss.com/css-compressor или http://cssminifier.com

4) ОТКЛЮЧИТЕ 5-10-100 ПОДГРУЖАЕМЫХ .js и .css ФАЙЛОВ, СОБЕРИТЕ ВСЕ В ОДИН .js и ОДИН .css
А ЕЩЕ ЛУДШЕ - НЕ ПОДГРУЖАЙТЕ ВНЕШНИЕ ФАЙЛЫ С ПРОЦЕДУРАМИ И НАСТРОЙКАМИ ВООБЩЕ - ВНЕСИТЕ ВСЕ ВНУТРЬ ВАШЕЙ СТРАНИЦЫ. КАЖДОЕ ОБРАЩЕНИЕ И ЗАГРУЗКА ФАЙЛА ПОНИЖАЕТ СКОРОСТЬ ЗАГРУЗКИ ВАШЕГО САЙТА.

5) ЭКСПЕРЕМЕНТИРУЙТЕ С ПЕРЕСТАНОВКОЙ КОДА (функций js, divoв.. итд) И НАЙДИТЕ САМЫЙ БЫСТРО РАБОТАЮЩИЙ ВАРИАНТ. (Советы и правила это прекрасно, но все таки - сайт ваш? Вот и я о том же.. свои глаза откройте и вперед! =)

6) ПОДСЧИТАЙТЕ РАЗМЕР ВАШЕЙ СТРАНИЧКИ (всего сайта).. http://main-ip.ru/test/analizator/ (желательно чтобы был не намного больше размера любой песни КЭТИ ПЕРРИ в MP3 128 kbps : ) -
КОНЕЧНО НЕ КАСАЕТСЯ САЙТОВ СОДЕРЖАЩИХ И СТРОЯЩИХСЯ НА БАЗАХ ДАННЫХ ИНФОРМАЦИИ. ИМЕЕТСЯ ВВИДУ КОСТЯК САЙТА.. INDEX.HTML И ВСЕ ВОКРУГ (картинки, видео и аудио, флэш..)

7) ПРИ ЗАГРУЗКЕ *любого* НОВОГО ФАЙЛА НА ВАШ САЙТ - ПРОВЕРЬТЕ ЕГО РАЗМЕР и
УБЕДИТЕСЬ ЧТО ОН НЕ ПРЕВЫШАЕТ РАЗУМНЫХ
ПРЕДЕЛОВ - у каждого Админа они свои, но в общем не думаю что видео ролик размеров в 7 мб подойдет для какого либо сайта кроме видео библиотеки!

8) НАЙДИТЕ И СОЖМИТЕ ВСЕ ГРАФИЧЕСКИЕ ФАЙЛЫ, ЗА ИСКЛЮЧЕНИЕМ ЛОГО ВАШЕГО САЙТА ! (все .jpg, .gif, .png)
БЕЗ ИЗМЕНЕНИЯ ИХ РАЗМЕРА (height и width) http://www.tinypng.com или http://www.punypng.com или http://webresizer.com/resizer или http://u.to/QtkQBg

ВКЛЮЧАЯ АНИМАЦИИ - ФАЙЛЫ ТИПА .gif и .ani:
http://ezgif.com/resize или http://www.picresize.com

Кроме того, примите к сведению:
Глубина цвета - 256 цветов (8 бит) уменьшает файлы в 2 - 4 раза ...

9) НАЙДИТЕ И СКОНВЕРТИРУЙТЕ ВСЕ ГРАФИЧЕСКИЕ ФАЙЛЫ вида .bmp В файлы вида .jpg или .gif:
http://www.pictureresize.org/online-images-converter.html или http://image.online-convert.com/convert-to-jpg

10) НЕ ИСПОЛЬЗУЙТЕ ГРАФИЧЕСКИЕ ФАЙЛЫ ВИДА .png ЕСЛИ КАРТИНКА НЕ ПРОЗРАЧНА
ПРЕДПОЧТИТЕЛЬНЕЕ .jpg - ИЗ ЗА ГОРАЗДО МЕНЬШЕГО РАЗМЕРА ФАЙЛА БЕЗ ПОТЕРИ ВИДИМОГО КАЧЕСТВА http://www.fixpicture.org

11) ИСПОЛЬЗУЙТЕ ФЛЭШ ВИДЕО ФАЙЛОВ .swf ВМЕСТО .mov, .flc и .avi
УДАЛИТЕ ИЛИ СОЖМИТЕ ОГРОМНЫЕ ВИДЕО / ЗВУКОВЫЕ РОЛИКИ (если такие имеются) - обычно файлы .mov, .wav, .avi, .flc, .gif
http://www.zamzar.com

ИЛИ

ИСПОЛЬЗУЙТЕ БЕСПЛАТНЫЙ СЕРВИС от GOOGLE - https://www.youtube.com ДЛЯ ЗАГРУЗКИ И ХРАНЕНИЯ ВИДЕО и ОРГАНИЗУЙТЕ ССЫЛКУ НА ЭТИ ВИДЕО НА ВАШЕМ САЙТЕ.

12) УБЕЙТЕ ВСЮ РЕКЛАМУ КОТОРАЯ ТОРМОЗИТ ВАШ САЙТ - ОНА НЕ СТОИТ ТОГО ЧЬЯ БЫ ОНА НЕ БЫЛА (если конечно не ваша;-)

13)
НЕ ГОНИТЕСЬ ЗА СУПЕР ЭФФЕКТАМИ - САЙТ НЕ ЭТИМ ИНТЕРЕСЕН И ПРИВЛЕКАТЕЛЕН!
ПОЛОВИНА ИЗ НИХ ТОРМОЗИТ ВАШ САЙТ И ПОЛЬЗОВАТЕЛИ УХОДЯТ. А ДРУГАЯ ПОЛОВИНА ОБЫЧНО ТРЕБУЕТ ДОРАБОТКИ для БЫСТРОЙ РАБОТЫ ВМЕСТЕ С ВАШИМ КОДОМ ( :

14) ОТКЛЮЧИТЕ СЧЕТЧИКИ ПОСЕТИТЕЛЕЙ, ТИЦОВ, СЛАВЫ и прочей бурды.
Это мало кого РЕАЛЬНО интересуют (я о пользователях а не ваших друзьях, роботах Google или заказчиках)
обычно эти бесплатные навесы имеют обыкновение при загрузке странички
сайта обращаться на родительский сервер... не думаю что каждый раз вы
выезжаете через гараж соседа.. даже если он рядом : )


15) НЕ ГОНИТЕСЬ ЗА ПОСЛЕДНИМИ И НОВЕЙШИМИ ВЕРСИЯМИ ПОДКЛЮЧАЕМЫХ БИБЛИОТЕК! (MOOTOOLS, JQUERY и другие). ОБЫЧНО ЧЕМ НОВЕЕ ВЕРСИЯ - ТЕМ БОЛЬШЕ КОДА. ЕСЛИ ВСЕ ВАШИ ТВОРЕНИЯ НА САЙТЕ БЫЛИ ПОСТРОЕНЫ И ПОДОГНАНЫ ПОД БИБЛИОТЕКУ Jquery версии 1.4.2 - НЕ ГРУЗИТЕ НА ВАШ САЙТ Jquery 1.10.1! ПОМИМО ВОЗРОСШЕЙ ВЕЛИЧИНЫ САМОЙ БИБЛИОТЕКИ - НИКТО НЕ ОБЕЩАЕТ ЧТО ВСЕ БУДЕТ РАБОТАТЬ КАК РАНЬШЕ :*) а ВОТ СКОРОСТЬ ЗАГРУЗКИ МОЖЕТ УПАСТЬ ИЗ ЗА ВОЗРОСШЕГО КОДА БИБЛИОТЕКИ

p/s: вообщето новая версия jquery 2.0 меньше старых, т.к там убрана поддержка IE6, 7, 8


p/s#2: Вообще то лучше выбирать старые версии, 132 в 2-3 раза меньше чем 161 - 172...
Уменьшать размер, избавляться от них вообще ... подключать только в тех модулях где без них не обойтись функционально ..


16)
ПО ВОЗМОЖНОСТИ (и по уму !!!) - ПОДГРУЖАЙТЕ СТАНДАРТНЫЕ БИБЛИОТЕКИ из FREE CDN NETWORKS А НЕ С СЕРВЕРА ВАШЕГО БЕСПЛАТНОГО ХОСТИНГА, вот список бесплатных CDN сетей http://techyfuzz.com/free-cd....website А ЭТО РАЗЛИЧНЫЕ ПОДКЛЮЧАЕМЫЕ БИБЛИОТЕКИ НА GOOGLE https://developers.google.com/speed/libraries.
У Яндекса тоже появилась своя сеть CDN в последнее время.

17) ОБЯЗАТЕЛЬНО ПРОВЕРЬТЕ ЧТОБЫ НИ ОДНА БИБЛИОТЕКА (JS) НЕ БЫЛА ПОДКЛЮЧЕНА БОЛЬШЕ ОДНОГО (1) РАЗА !!

18) ИМЕЙТЕ ВВИДУ - ВСЕ АБСОЛЮТНО ПЛЮСИКИ И ЛАЙКИ НА ВАШЕМ САЙТЕ КОТОРЫЕ
УМЕЮТ СЧИТАТЬ КОЛИЧЕСТВО И ПОКАЗЫВАТЬ (НАПРИМЕР "FACEBOOK LIKE")
ТОРМОЗЯТ ВАШ САЙТ И ВАШИ СТРАНИЧКИ ПРИ ЗАГРУЗКЕ ТАК КАК ОБРАЩАЮТСЯ НА
РОДИТЕЛЬСКИЕ СЕРВЕРА.. А ОНИ НЕ ВСЕГДА БЫСТРЫ СВОБОДНЫ И ДОСТУПНЫ..
КРОМЕ ТОГО - МОЖЕТ БЫТЬ ТАКОЙ ВАРИАНТ ЧТО ВАШ САЙТ ИЛИ СТРАНИЧКА ВООБЩЕ
НЕ ЗАГРУЗЯТСЯ ЕСЛИ НЕТ ДОСТУПА СКАЖЕМ К СЕРВЕРУ "ВКОНТАКТЕ" или
"БОБРДОБР" а у вас на сайте прописаны линки к этим сетям.
Я понимаю что ДАЛЕКО не все будут готовы заменить лайки простыми <a href> ссылками..
но каждому свое - мне например важнее скорость загрузки МОЕГО сайта
и удобство МОИХ пользователей а не накрутка лайков в какой либо социальной сети..

19) ОПРЕДЕЛИТЕ ВРЕМЯ ЗАГРУЗКИ ВАШЕГО САЙТА \ СТРАНИЧКИ (в минутах) - http://www.webwait.com
СРАВНИТЕ ЕГО С ДРУГИМИ ВАМ ИЗВЕСТНЫМИ САЙТАМИ и НЕМНОЖКО УСПОКОЙТЕСЬ. ПОЭКСПЕРЕМЕНТИРУЙТЕ С КОДОМ - НАЙДИТЕ КАКОЙ КОД (js), НАСТРОЙКИ (css) или РЕСУРСЫ (jpeg, mp3, png, swf, avi...) НА ВАШЕМ САЙТЕ ЗАМЕДЛЯЮТ ЕГО ЗАГРУЗКУ И СОЖМИТЕ ИЛИ ЗАМЕНИТЕ ЭТИ РЕСУРСЫ, НАСТРОЙКИ И \ ИЛИ КОД

20) ВИДЖЕТЫ \ ГАДЖЕТЫ \ НЕКОТОРЫЕ АНИМИРОВАНЫЕ КУРСОРЫ \ ОБЛАКА \ СНЕГ \ ЕЛКИ - ПАЛКИ \ КОТЯТА \ ДОЖДЬ \ БЕГУЩИЕ СТРОКИ \ МУЗЫКА ПРИ ВХОДЕ \ КУЧИ красивых БАННЕРОВ \ RADIO \ MP3 PLAYER \ YOUTUBE CLIPS и даже просто большие АНИМИРОВАННЫЕ КАРТИНКИ (.gif)- ЭТО ВСЕ ТОРМОЗИТ ВАШ САЙТ, ПО ВОЗМОЖНОСТИ ВСЕ или хотя бы частично НА ФИГ =)

21) ЧАЩЕ ВСЕГО ОКРЫТИЕ (появление) НОВОГО ОКНА (в принципе размер и содержание НЕ ВАЖНЫ) ПОВЕРХ УЖЕ СУЩЕСТВУЮЩЕГО ОКНА ВАШЕГО САЙТА ЗАМЕДЛИТ ЕГО РАБОТУ И СОЗДАСТ ДИСКОМФОРТ ДЛЯ ПОСЕТИТЕЛЯ - СТАРАЙТЕСЬ ДЕЛИТЬСЯ ИНФОРМАЦИЕЙ и ПОЛУЧАТЬ ФИДБЭК (нужную инфу) ОТ ПОЛЬЗОВАТЕЛЯ ВНУТРИ УЖЕ СУЩЕСТВУЮЩЕГО ОКНА.

22) ОНЛАЙН ЧАТ ПРЯМО НА СТРАНИЧКЕ - С ОДНОЙ СТОРОНЫ ОЧЕНЬ УДОБНАЯ ВЕЩЬ! С ДРУГОЙ СТОРОНЫ - ЕСЛИ Я ХОЧУ ЧАТИТЬСЯ РЕАЛЬНО, СКОРЕЕ ВСЕГО НЕ БУДУ ИСКАТЬ ТАКОЙ ВОЗМОЖНОСТИ ЧЕРЕЗ САЙТ.
(ИМХО): НЕ НА КАЖДОМ САЙТЕ НЕОБХОДИМА ТАКАЯ ВЕРСИЯ ЧАТА, думаю вполне разумным компромиссом будет ССЫЛКА НА ЧАТ (кто хочет - пожалуйста, вот он под рукой незаменимый!)

23) Для полноты обзора и тестинга.. ОБЯЗАТЕЛЬНО ПРОВЕРЬТЕ ВАШ САЙТ НА СКОРОСТЬ В РАЗНЫХ БРАУЗЕРАХ - с помощью этой проверки можно настроить сайт оптимальным образом под различные браузеры: http://browsershots.org/ или http://browserling.com или http://spoon.net/browsers (СКОРЕЕ ВСЕГО, ВЫ ЗАМЕТИТЕ ЧТО ВАШ САЙТ РАБОТАЕТ БЫСТРЕЕ НА Google Chrome и Mozilla Firefox ЧЕМ НА IE)

24) ХОСТИНГ (или содержание физических файлов вашего диска) и ДОМЭН (адресс вашего сайта на интернете) ДА ВЛИЯЮТ НА СКОРОСТЬ ЗАГРУЗКИ ВСЕХ СТРАНИЦ ВАШЕГО САЙТА И ЕГО ОБЩЕЕ БЫСТРОДЕЙСТВИЕ. ПОСОВЕТОВАТЬ МОГУ ТОЛЬКО ОДНО - ОПРЕДЕЛИТЕ ПОТЕНЦИАЛЬНОЕ МЕСТНОНАХОЖДЕНИЕ БОЛЬШИНСТВА ПОЛЬЗОВАТЕЛЕЙ ВАШЕГО САЙТА и КУПИТЕ СЕБЕ ХОСТИНГ и ДОМЭН В БЛИЖАЙШЕЙ К БОЛЬШИНСТВУ ПОЛЬЗОВАТЕЛЯМ ДОМЕННОЙ и ЖИЛИЩНОЙ ЗОНЕ.. (Например если большинство пользователей из Укрaины - купите домен UA, России - RU, Германии - DE и так далее.. а сервера хостинга соответственно в Укрaине, России и Германии)

25) ПОСЛЕДНЕЕ НО ЗОЛОТОЕ ПРАВИЛО - ПОМЕНЬШЕ ЛИНКОВ НА ЛЮБЫЕ ВНЕШНИЕ (чужие) РЕСУРСЫ (любых форматов) КОТОРЫЕ ПОКАЗЫВАЮТ У ВАС НА САЙТЕ ЧТО ТО БОЛЬШЕЕ ЧЕМ ПРОСТО ТЕКСТ и НАХОДЯТСЯ НА ЧУЖИХ САЙТАХ. ТО ЕСТЬ - ЕСЛИ ВЫ ХОТИТЕ КАРТИНКУ ИЛИ РОЛИК У СЕБЯ НА СТРАНИЧКЕ ИЛИ САЙТЕ (и вас не интересует политика прав или у вас есть разрешение или..) - СКАЧАЙТЕ ЭТУ КАРТИНКУ ИЛИ РОЛИК И ЗАГРУЗИТЕ К СЕБЕ НА САЙТ, А ИНАЧЕ СКОРОСТЬ ЗАГРУЗКИ ВАШЕГО САЙТА \ СТРАНИЧКИ БУДЕТ НАРЯМУЮ ЗАВИСЕТЬ ОТ СКОРОСТИ ЧУЖОГО САЙТА \ СТРАНИЧКИ \ СЕРВЕРА

26) НУ И НАКОНЕЦ... СУЩЕСТВУЮТ РАЗЛИЧНЫЕ ПЛАТНЫЕ И БЕСПЛАТНЫЕ ПЛАГИНЫ, ОНЛАЙН СЕРВИСЫ И ПРОГРАММЫ ДЛЯ АНАЛИЗИРОВАНИЯ И УСКОРЕНИЯ ВАШЕГО САЙТА. ПОПРОБУЙТЕ ЗАПУСТИТЬ ИХ И ПРОЧИТАТЬ СОВЕТЫ.. ВОЗМОЖНО ПОЧЕРПНЕТЕ ЕЩЕ ИНФОРМАЦИИ НА ПУТИ К БЫСТРОМУ И ЛЕГКОМУ САЙТУ ВАШЕЙ МЕЧТЫ..

ПЛАГИН:
http://yslow.org (С ЕГО ПОМОЩЬЮ ВОЗМОЖНО НАЙТИ СЛАБЫЕ МЕСТА В САЙТЕ по скорости И ИСПРАВИТЬ)
ОНЛАЙН СЕРВИСЫ:
http://tools.pingdom.com/fpt или http://developers.google.com/speed/pagespeed/insights или http://gtmetrix.com

27) В любом браузере есть так называемые "Инструменты разработчика", которые
позволяют поработать с кодом полученной html-страницы - разобрать по
элементам, изменить "на лету" свойства этих элементов, посмотреть
протокол загрузки и т.д.
IE - F12 > закладка "сеть".
Хром - меню > инструменты > инструменты разработчика > закладка "network".
FF - меню > веб-разработка > веб-консоль > закладка "сеть".
Опера - меню > страница > средства разработки > opera dragonfly > закладка "сеть".
Включаешь (если выключен) режим отслеживания сетевой активности и перезагружаешь страницу.
В таблице видим весь протокол сетевой активности при загрузке данной
страницы для каждого элемента - css/js/html -файлов, запросов и пр.
В колонке статус видно, как браузер обрабатывал данный элемент: 200 -
полная загрузка с сервера; 304 - чтение из кеша. Ну и время загрузки
каждого элемента списка.
-------------------------------------------------------------
Удачи, друзья!  8) ;D


http://www.dogica.com/LOGO/dogspuppy.jpg[/img]
DOGICA®<br>The world's only Free & Complete FIDO Encyclopedia of Dogs, Canines, Poochies and Puppies<br>
http://www.dogica.com]
DOGICA®<br>The world's only Free & Complete FIDO Encyclopedia of Dogs, Canines, Poochies and Puppies<br>
http://www.dogica.com
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)
  •  


DogicaTopic starter

остальным не нужно или неактуально?
может быть есть более современные способы о которых мне (и другим пользователям форума) еще неизвестно
поделитесь пожалуйста - с удовольствием обсудим и внедрим  ???
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)
  •