workman |
Четверг, 19 Октября 2017, 15:30 | Сообщение 1 |
|
Большинство пользователей своих ресурсов занимаются украшениями своих сайтов, запихивая в него все, что только считают нужным, не понимая даже о том что еще в первую очередь, сайт, должен быть еще и оптимизирован на скорость его открытия не только в ПК но еще и на мобильных ресурсах.
Например, если зашедший на ваш ресурс человек будет набл.дать на ней длительную загрузку, то он уйдет и не будет ждать, когда у вас там покрутятся какие-то колесики загрузки, тупо созданные для красоты. Но ладно это может быть красиво с ПК и можно смотреть на загрузку хроть минуту, а вот различных мобильных приложений, не очень есть хорошо, дабы человек на сайт заходит за ИНФОРМАЦИЕЙ, а не смотреть на красоту исполнения дизайна и разных загрузчиков.
Промониторив интернет и тем более когда я сам для себя занимаюсь созданием сайтов, прочитав несколько статей по оптимизации понял, что красота красотой, а вотоптимизация на скорость загрузки еще никому не помешает. На данный момент существует огромное количество сервисов для анализа скорости загрузки сайта и выявления проблемных мест, но несмотря на это, большинство сайтов все еще не оптимизированы надлежащим способом.
Хочу обратить внимание: если вы проверяете свой сайт только в сервисе 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 файлы в самом конце вашей страницы, по возможности в нижнюю часть сайта.
Между тегами на страницах вашего сайта вставить самые важные CSS свойства.
Самое важное, это если вы берете скрипты с сторонних сайтов, то обязательным условием - удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта или стиля и т.д. Особенно если там стоят ссылки на авторство, дабы будет идти подгрузка ссылки на другой сайт через скрипт или файл CSS
Ну на этом практически и все. У кого какие имеются добавления, то рады будем видеть данное в ответах к данной теме.
Будем вместе делиться полезными материалами и вместе сделаем наши сайты, еще быстрее и комфортнее! 
Сообщение отредактировал
workman - Четверг, 19 Октября 2017, 15:35 |
| [ RU ] |
|
|
Kosten |
Четверг, 19 Октября 2017, 18:09 | Сообщение 2 |
|
Цитата workman (  ) украшениями своих сайтов, запихивая в него все
Бывали времена! 
|
| [ RU ] |
|
|
workman |
Четверг, 19 Октября 2017, 18:12 | Сообщение 3 |
|
|
Цитата Kosten ( ) Бывали времена!
Дааааа... Хотя некоторые не понимают что все это старо как .... мамонта )) и запуливают кучу ненужных скриптов а потом не понимают откуда появляется тормоз на сайте ))
|
| [ RU ] |
|
|
-SAM- |
Четверг, 19 Октября 2017, 19:58 | Сообщение 4 |
|
Привык пользоваться вот этим сервисом - Доступно только для пользователей, что там сразу можно на одной странице оптимизировать, кодировать\декодировать. Ну и стили и скрипты подключаются в таком приоритете, как они используются: когда какой-то модуль отдельно или страница использует эти ресурсы дополнительные, то вполне есть смысл не подключать стили в общую таблицу стилей (или скрипты все в один заливать, что от сайта идут), а подключить отдельно в этот модуль или страницу. Стилизацию можно запаковывать вместе со скриптом, когда от стилей "проку нет" (ввиду того, что какой-то элемент дизайна выводиться этим скриптом, вот и выходит, что отключают поддержку 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$" />
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
|
| [ UA ] |
|
|
Kosten |
Четверг, 19 Октября 2017, 20:51 | Сообщение 5 |
|
|
В дополнение, когда вы видите стили, которые в комке, то есть онлайн оптимизатор CSS, что раскидает их по полочкам. Но если только там какой то эффект установлен, то его лучше не прогонять.
|
| [ RU ] |
|
|
