Дополнительная глава. Оптимизация скорости загрузки сайта. Оптимизация сайта загрузки


Техническая оптимизация загрузки сайта

 

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

Для начала проверьте время загрузки сайта. Вот этот  сервис проверки, мне показался самым удобным, он сразу показывает скорость загрузки, какой файл грузится и внизу дает рекомендации что нужно улучшить. Эта проверка важный пункт в начальной оптимизации сайта.

 

Что влияет на скорость загрузки, это разные факторы, которые можно настроить и уменьшить время загрузки сайта.

Первое, на что вам надо обратить внимание это количество запросов HTTP. Если на странице сайта много картинок, flash, таблиц стилей css, скриптов, то время загрузки будет больше, этот список необходимо сделать как можно меньше. Для этого, чтобы сохранить вид сайта, надо обьединять файлы по возможности в один.

 

 Ещё один хороший сервис для проверки и оптимизации загрузки сайта находится здесь.   Достаточно информативный и полезный. 

Также необходимо иметь  в виду, что если вы создаете сайт для аудитории расположенной в России, то хостинг должен быть удален не очень далеко, ведь цены на хостинг в США например намного ниже, это не совсем основной фактор развития сайта, но время загрузки будет увеличено. 

Для пользователей Instant cms, обычно таблицы стилей css расположены в нескольких файлах, по  возможности их желательно обьединить. Это делается легко, переносом содержимого стилей в стиль styles.css расположенный в папке css вашего шаблона.

 

 

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

 

 

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

 

 

Основное что надо учесть при оптимизации загрузки сайта

 

1. Скорость соединения пользователя может быть очень разной, если ваш сайт быстро грузится у вас, это не значит что у друго го пользователя скорость такая же. 

 

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

 

3. То что мы писали выше, это вес  и содержимое страницы. Оптимальное количество веса страницы составляет 50-80 килобайт. Естественно количество http запросов, как количество файлов css, количество изображений, js файлов, это  все влияет на скорость загрузки.

 

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

 

вот пример проверки сайта www.cmsinstant.ru 

 

Анализ загрузки сайта www.cmsinstant.ru:

Оценка: 49 из 100 Число файлов: 187 Суммарный размер файлов: 583339 байт (584 кб)

Время загрузки (33,6kbps) - 217.11 сек

 

Для примера приведу, как я оптимизировал сайт. Website information - Первый результат до проверки

Total loading time:12.8 seconds

Total objects:261 (1386.7 KB)

External objects:10 (84.8 KB)

(X)HTML:1 (159.7KB)

RSS/XML:0

CSS:4 (142.8KB)

Scripts:15 (191.9KB) Images:240 (892KB)

Plugins:0 Other:1 (0.3KB) Redirected:0

Website information - результат после проверки.

Total loading time:9.3 seconds

Total objects:250 (1044.4 KB)

External objects:8 (24.2 KB)

(X)HTML:1 (159.3KB)

RSS/XML:0

CSS:3 (139KB)

Scripts:12 (99.8KB)

Images:234 (646.3KB)

Plugins:0 Other:0 Redirected:0

Похожие статьи:

Работа с сайтом → Ускоряем загрузку сайта в 5-10 раз

Как создавать сайт → Создание сайта быстро - 2

Статьи про InstantCMS → Какая CMS для сайта будет лучшей.

Как создавать сайт → Техническая оптимизация сайта - способы.

Seo статьи → Instant CMS и посещаемость сайта.

cmsinstant.ru

Оптимизация скорости загрузки страницы сайта

Всем привет. И дамам и господам, мастерами сайтостроения язык не поворачивается Вас назвать. 🙂

Наш путь как всегда прост и незатейлив. Можно прочитать тысячи мануалов по оптимизации скорости загрузки страницы сайта убираем тормоза, и не один не применить. А некоторые способы, банально сложны для среднего юзера, каждый должен заниматься своим делом. Не стоит учить  "Ка, Эс, СЭС", и "Хэ, Тэ, Мэ, Лэ" для того, что бы один раз в жизни геройски, подправить код сайта.

И перестаньте читать дурь, о подвигах в этой сфере.

Статья вводная, но причины тормозов твоего сайта как правило не связаны с оптимизацией скорости загрузки.

Я путем оптимизации, сократил целых три запроса к базе данных (ВАУ). И сократил Css на 3 байта (ОПЯТЬ ДРУЖНОЕ вау). Для примера покажу, что значит уменьшить, сжать (не совсем правильный термин) Css, на примере обычного текста.

Один пенек, проделал это, а тысячи переписали. И теперь это, позиционируется, сделаешь так же, и тормоза твоего сайта в прошлом.

После оптимизации это будет выглядеть так.

Одинпенек,проделалэто,атысячипереписали.Итеперьэто,позиционируется,сделаешьтакже,итормозатвоегосайтавпрошлом.

Теперь, что будет после оптимизации, не дай бог надо будет, что подправить, заипаетесь.

Ну и чего достигнешь? Скорость загрузки страницы уменьшилась на нол нол ноль целых хер десятых (Вау, как тот и не катит). Ну ведь просто смешно.

На самом деле все проще чем кажется. Давайте посмотрим от чего зависит время загрузки страниц, неважно оптимизирован он или нет.

  1. Скорость загрузки сайта на 99% зависит от хостера
  2. Оптимальный вес страницы 800 килобайт
  3. На странице не должно быть битых ссылок
  4. Оптимизация скорости загрузки страницы сайта, должна быть выполнена создателем шаблона
  5. Кеширование, тут все просто, плагин WP File Cache

Первое и самое главное, от хостинга. Пройдено и не мной одним. Одно сообщение отправленное в техподдержку хостинга (затратив 2 мин времени), ускорит загрузку твоего сайта в разы (!). Что гораздо лучше чем ускорение загрузки на 0,00001 сек, после недельного ковыряния в коде.

Посмотри на скрины загрузки, мой seoparazit и рамблер. Оптимизированы примерно одинаково (где я, скромный труженик, и где монстр с баблом рама). Вот только ответа времени сервера, у меня хромает. У них свой, у мну дядин. Не верите? Проверьте, так же и у Вас на сайтах будет. И тем не менее, мой грузится даже быстрее, чем rambler. Парадокс. А нам про три секунды твердят, не открылся, народ свалил. Неправда....

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

developers.google.com/speed/pagespeed/insights/о

gtmetrix.com/

Оптимизируеи скорость загрузки сайта

seoparazit.ru

Дополнительная глава. Оптимизация скорости загрузки сайта · Методическое пособие по HTML-верстке для новичков

В современной жизни человека остро стала проблема актуальности информации. Мы ищем информацию, которая нам необходима в данную минуту. Мы не любим ждать, нам надо сейчас! Так как сайты стали популярным источником информации, вопрос скорости доступа к ней стал очень актуален. Мы рассмотрим некоторые приемы и инструменты для оптимизации скорости загрузки страниц.

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

Инструменты браузера

Мы говорим о скорости загрузки страницы. Но как же нам ее измерить? Для этой задачи существуют инструменты в самом браузере. Например, у Google Chrome и Opera есть Web Inspector.

В нем есть вкладка Сеть (Network), в которой отображается список загружаемых ресурсов и данные о них, а также в нижней части находится важное для нас значение Load, т.е. время полной загрузки страницы. Что входит в это значение? Все! А именно, загрузка HTML, CSS, JS, изображений, шрифтов и другого контента.

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

GooglePageSpeed

Данный инструмент анализирует вашу страницу и отображает результат по 100-бальной шкале.

Для оценки система учитывает следующие критерии:

  • Включите сжатие;
  • Используйте кеш браузера;
  • Не используйте переадресацию с целевой страницы;
  • Оптимизируйте видимое содержание;
  • Оптимизируйте изображения;
  • Сократите CSS;
  • Сократите HTML;
  • Сократите JS;
  • Сократите время ответа сервера;
  • Удалите из верхней части страницы код JS и CSS, блокирующий отображение.

Изучив список рекомендаций, его можно разделить на несколько групп.

Конфигурирование WEB-сервера

Первая группа включает в себя рекомендации по конфигурированию web-сервера, а именно:

  • Включите сжатие;
  • Используйте кеш браузера;
  • Не используйте переадресацию с целевой страницы;
  • Сократите HTML;
  • Сократите время ответа сервера.

При разработки проектов, настройкой web-сервера занимаются программисты или системные администраторы, поэтому мы не будем подробно рассматривать каждый пункт, но при желании вы сможете легко найти информацию в интернете.

Верстка и подключение CSS и JS

Вторая группа включает в себя рекомендации по верстке и по порядку подключения CSS и JS файлов на странице, т.е:

  • Оптимизируйте видимое содержание;
  • Удалите из верхней части страницы код CSS и JS, блокирующий отображение.

Рассмотрим более детально каждый пункт.

Оптимизация видимого содержания

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

Удаление из верхней части страницы JS и CSS код, блокирующий отображение

Когда браузер встречает тег < script > при обработке HTML, он останавливает анализ HTML и выполняет содержимое тега. Это вынужденная мера, т.к при исполнении JS мы можем изменить HTML структуру документа и если бы это было бы параллельно с анализом HTML, то браузер не знал бы, что ему нужно отобразить.

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

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

Когда браузер встречает данный атрибут, он загружает JS файл, но выполняет его после того, как загрузит страницу. Также при этом он не останавливает обработку HTML.

Мы рассмотрели рекомендации по JS, а как быть с CSS?

Если вы используете несколько файлов CSS и они маленького объема, то лучше их объединить в один файл. Но! Тут важно контролировать размер итогового файла. И если он оказывается большым, то практика объединения всего кода в один файл вам не подходит.

В такой ситуации сначала вам нужно проанализировать посещаемость сайта и в один файл включить CSS для популярных страниц, а для менее посещаемых создать отдельный файл. К примеру, мы выделим в отдельный файл main.css стили для каркаса сайта и общие элементы, в другой файл actions.css стили для страницы "Акции".

Обычно, посещение сайта пользовать начинает с главной страницы. Зайдя на нее, он загружает файл main.css с сервера. Далее, при посещении страницы "Акции" файл main.css у него загрузится уже не с сервера, а из локального кеша браузера, и тем самым мы сократили время загрузки страницы.

Также, хорошей практикой является помещать CSS для первого экрана пользователя прямо в HTML. Это поможет при решении проблемы "белого экрана" при медленном интернет соединении.

Оптимизация веса файлов

Третья группа включает в себя рекомендации по оптимизации размера файлов:

  • Оптимизируйте изображения;
  • Сократите CSS;
  • Сократите JS.

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

Оптимизация изображений

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

Для решения этой задачи я советую использовать 2 инструмента, которые можно открыть по ссылкам: https://kraken.io/ и https://tinypng.com/. Для того, чтобы использовать инструменты, вам потребуется загрузить файлы через специальную форму и после обработки, скачать их оптимизированные версии.

Оптимизация CSS и JS

Существует несколько способов выполнения этой задачи. Первым способом является использование онлайн-инструментов. Для минификации CSS и JS можно использовать http://cssshrink.com и http://www.jsmini.com/. Вам просто нужно скопировать CSS или JS и вставить его в форму. После обработки вы получите сжатую версию кода.

Главным недостатком предыдущего способа является то, что каждый раз приходится выполнять однотипные действия. Это утомительно. По этой причине разработчики создали консольные инструменты, которые автоматически выполняют рутинные задачи. К ним относят: Gulp.js, Grunt.js и другие. Но для начала работы с ними, вам требуется сначала познакомиться с JS, поэтому мы не будет подробно останавливаться на них.

Но для новичков существует десктопное приложение Prepros, которое также поможет автоматизировать задачи. Для изучения возможностей, посетите официальный сайт.

Заключение

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

melnik909.gitbooks.io