Страница 1 из 11
Форум про uCoz » Все для вебмастера » CEO раздел » Увеличиваем скорость загрузки сайта
Увеличиваем скорость загрузки сайта
workman
Дата: Четверг, 19.10.2017, 15:30 | Сообщение # 1
Гл. Модератор
Сообщений:1696
Награды: 8


Большинство пользователей своих ресурсов занимаются украшениями своих сайтов, запихивая в него все, что только считают нужным, не понимая даже о том что еще в первую очередь, сайт, должен быть еще и оптимизирован на скорость его открытия не только в ПК но еще и на мобильных ресурсах.

Например, если зашедший на ваш ресурс человек будет набл.дать на ней длительную загрузку, то он уйдет и не будет ждать, когда у вас там покрутятся какие-то колесики загрузки, тупо созданные для красоты. Но ладно это может быть красиво с ПК и можно смотреть на загрузку хроть минуту, а вот различных мобильных приложений, не очень есть хорошо, дабы человек на сайт заходит за ИНФОРМАЦИЕЙ, а не смотреть на красоту исполнения дизайна и разных загрузчиков.

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

Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.

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

Итак, разберемся для начала к оптимизации изображений

Используйте изображения именно того разрешения, которое необходимо на странице.

Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании фотогалерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.

Оптимизировать изображения: PNG, JPG можно с помощью данного сервиса

Научитесь уменьшать количество запросов

Объедините все CSS файлы в один это уменьшит количество запросов к серверу. Плагины для сборщиков gulp-concat-css, grunt-concat-css, css-concat-loader

Объедините все доступные вам JS файлы в один по возможности gulp-concat-js, или этим сервисом Конвертер HTML в PHP, JavaScript, ASP

Оптимизируйте CSS и JS

Сжать CSS файлы можно сжать вот этим сервисом, кстати им постоянно пользуюсь и я сам hammga, или cssminifier

Сжимайте все доступные для вас JS файлы

Предлагаю также воспользоваться такими сервисом которым работаю и оптимизирую сам, это JavaScript Compression Tool

Загружайте все CSS и JS файлы в самом конце вашей страницы, по возможности в нижнюю часть сайта.

Между тегами на страницах вашего сайта
Код
<style> и </style>
вставить самые важные CSS свойства.

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

Ну на этом практически и все. У кого какие имеются добавления, то рады будем видеть данное в ответах к данной теме.
Будем вместе делиться полезными материалами и вместе сделаем наши сайты, еще быстрее и комфортнее! 09a


Сообщение отредактировал
workman - Четверг, 19.10.2017, 15:35
Страна: (RU)
Kosten
Дата: Четверг, 19.10.2017, 18:09 | Сообщение # 2
Администраторы
Сообщений:15806
Награды: 51


Цитата workman ()
украшениями своих сайтов, запихивая в него все

Бывали времена! 11a
Страна: (RU)
workman
Дата: Четверг, 19.10.2017, 18:12 | Сообщение # 3
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата Kosten ()
Бывали времена!

Дааааа... Хотя некоторые не понимают что все это старо как .... мамонта )) и запуливают кучу ненужных скриптов а потом не понимают откуда появляется тормоз на сайте ))
Страна: (RU)
-SAM-
Дата: Четверг, 19.10.2017, 19:58 | Сообщение # 4
Проверенные
Сообщений:288
Награды: 14


Привык пользоваться вот этим сервисом - Доступно только для пользователей, что там сразу можно на одной странице оптимизировать, кодировать\декодировать. Ну и стили и скрипты подключаются в таком приоритете, как они используются: когда какой-то модуль отдельно или страница использует эти ресурсы дополнительные, то вполне есть смысл не подключать стили в общую таблицу стилей (или скрипты все в один заливать, что от сайта идут), а подключить отдельно в этот модуль или страницу. Стилизацию можно запаковывать вместе со скриптом, когда от стилей "проку нет" (ввиду того, что какой-то элемент дизайна выводиться этим скриптом, вот и выходит, что отключают поддержку js в браузере - стилям не к чему крепиться, тогда всё скопом в один файл можно запаковать, ведь без js стили будут уже как довесок).
Еще выводят полноразмерные изображения в качестве превью - вообще жесть, ведь в виде материалов по приоритету выводить нужно уменьшенную копию изображения (ясное дело, что от вида материалов зависит, но в большинстве случаев - визуально делают через стили уменьшение полноразмерных изображений, а в некоторых случаях - вообще постер выводиться из поля скриншот). Я про это говорю:
Код
<?if($IMG_URL1$)?><a href="$IMG_URL1$" class="ulightbox" rel="ulightbox"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" alt="$TITLE$" />
Тут мы видим, что визуально вывод будет уменьшенной копии изображения идти, а не так, что полноразмерное изображение стилем уменьшается до размеров уменьшенной копии - в ПУ размеры настраиваются, чтобы добиться оптимальных настроек (когда соотношение веса\искажения внешнего вида будет оптимальным).


Страна: (UA)
Kosten
Дата: Четверг, 19.10.2017, 20:51 | Сообщение # 5
Администраторы
Сообщений:15806
Награды: 51


В дополнение, когда вы видите стили, которые в комке, то есть онлайн оптимизатор CSS, что раскидает их по полочкам. Но если только там какой то эффект установлен, то его лучше не прогонять.
Страна: (RU)
Форум про uCoz » Все для вебмастера » CEO раздел » Увеличиваем скорость загрузки сайта
Страница 1 из 11
Поиск: