Категории

Последние новости

Вопрос по теории фехтования
Legatus 03-07-2008 17:36 Камрады, читаю сейчас книгу "Учитель фехтования" Артуро Перес-Реверте. Так вот в ней идет речь о том, что уколы рапирой проводятся в четыре сектора. О каких именно секторах

Основы работы ножом - Статьи СРУБ - - Каталог статей СРУБ - пользуйтесь выбором категорий! - Современный Реальный Уличный Бой
Н ож, это великолепное оружие рукопашного боя, в умелых руках способное решить исход схватки с противником, превосходящим вас силой, техникой ведения боя или количеством. В силу своей компактности,

Учитель Фехтования - Перес-Реверте Артуро - читать бесплатно электронную книгу онлайн или скачать бесплатно
Тут находится электронная книга Учитель Фехтования автора Перес-Реверте Артуро . В библиотеке isidor.ru вы можете скачать бесплатно книгу Учитель Фехтования в формате формате TXT (RTF), или же в формате

Реферат: Фехтование
Фехтование зародилось в глубокой древности. Утилитарное фехтование на различных видах холодного оружия было известно также в Греции и Риме. В античный и раннесредневековый период умение владеть холодным

Основы работы ножом - Статьи СРУБ - - Каталог статей СРУБ - пользуйтесь выбором категорий! - Современный Реальный Уличный Бой
Н ож, это великолепное оружие рукопашного боя, в умелых руках способное решить исход схватки с противником, превосходящим вас силой, техникой ведения боя или количеством. В силу своей компактности,

Фехтование как главный вид спорта этого лета. 7 вопросов, которые волнуют каждого
Прямые трансляции Олимпийских игр — в полном объеме на сайте «Матч ТВ На Олимпиаде в Рио-де-Жанейро сборная России по фехтованию завоевала семь медалей, четыре из которых — золотые. «Матч ТВ» узнал

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

Мастер-класс по фехтованию на
Все новости Мастер-класс по фехтованию на «легком» оружии. Профессор Мовшович А.Д. (ассистирует Е.А. Зыков.) Я очень коротко попытаюсь изложить то, что я хотел вам сказать. И в первую

Глава IV. ФЕХТОВАНИЕ НА РАПИРАХ
  Рапира — колющее спортивное оружие. Применение только колющих ударов и небольшая поверхность поражаемого пространства (по сравнению с другими видами оружия) создают благоприятные условия для обороны

Материалы по фехтованию - Двуручный меч - Техники ведения боя - Хроники - Kohmar-Citi
Это - начало толкования Рыцарского искусства Длинного меча, записанного в рифмах великим Мастером фехтования средневековой немецкой школы Йоганнесом Лихтенауэром. Он зашифровал свои поучения, чтобы

Календарь

«     Июль 2016    »
Пн Вт Ср Чт Пт Сб Вс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Облако тегов

Архивы

Счетчики

Удалите AMP и не влияйте на SEO-рейтинг, органический трафик, производительность

  1. Удаление AMP
  2. SEO и органический трафик результаты удаления AMP
  3. Предварительная загрузка веб-страниц для мгновенного просмотра
  4. Тестирование мобильного пользовательского опыта
  5. Настройка HSTS
  6. Кэшируйте все с помощью Cloudflare CDN
  7. Оптимизация загрузки изображений
  8. Предварительная загрузка версии с низким разрешением
  9. Пересмотреть зависимости
  10. Соотношение цены и цены
  11. Резюме

Я привык рекомендовать Страницы Google AMP как надежный способ повысить рейтинг сайта SEO и органический трафик посетителей. Недавно я удалил AMP с моего сайта. В этой записи блога я опишу, как это повлияло на мой блог, и на несколько более продвинутых методов оптимизации производительности сети, которые я использую вместо проприетарного стандарта, такого как Accelerated Mobile Pages.

Удаление AMP

Как это сделать

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

Удаление AMP с вашего сайта не происходит мгновенно и должно выполняться с осторожностью, чтобы ничего не испортить.

Вы должны начать с настройки перенаправления с AMP-версии страницы на стандартную. В моем случае это было сделано с использованием простой директивы NGINX:

местоположение ~ ^ / amp /(.*)$ {return 301 / $ 1; }

Кроме того, убедитесь, что вы указали правильный rel = "canonical", указывающий версию AMP страницы на оригинальную. Когда он работает, вы можете удалить rel = "amphtml" и запросить переиндексацию в консоли поиска Google.

Через пару дней ваши страницы AMP начнут исчезать с мобильного SERP.

SEO и органический трафик результаты удаления AMP

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

Я не заметил негативного влияния на позицию в поисковой выдаче и количество органических трафика.

Красная точка указывает дату, когда я удалил поддержку AMP из этого блога

Возможно для блога, публикующего новую статью каждую неделю или около того, потенциальное размещение топ-карусели не имеет большого значения.

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

Предварительная загрузка веб-страниц для мгновенного просмотра

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

Каждый пост в этом блоге ссылается на предыдущий и следующий. Я использую следующие теги ссылки для предварительной загрузки содержимого соседних записей в формате HTML:

<link rel = "prefetch" href = "/ previous-post-url"> <link rel = "prefetch" href = "/ next-post-url">

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

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

(function () {var urls = [...] // URL, загруженные с использованием шаблонов Jekyll var preloadedUrls = [] preloadedUrls. push (urls [0]) preloadedUrls. push (urls [1]) var preload = function (url) {if (url === undefined) {return;} if (preloadedUrls. includes (url)) {return;} var preloadLink = document. createElement ("link"); preloadLink. setAttribute ("rel", "prefetch") ; preloadLink. setAttribute ("href", url); document. getElementsByTagName ("head") [0]. appendChild (preloadLink); preloadedUrls. push (url);} окно. onscroll = function () {var preloadIndex = parseInt ( window. scrollY / 300) preload (urls [preloadIndex]);}}) ();

Я заметил, что предварительная загрузка надежно работает в настольных браузерах Chrome и мобильных устройствах Android. Он предлагает мгновенную навигацию даже при плохом соединении. К сожалению, это не похоже на iPhone, настольный Safari или Firefox. Chrome - самый популярный браузер, так что в любом случае это хорошая победа.

Тестирование мобильного пользовательского опыта

Если у вас высокоскоростной WIFI, вы можете не заметить улучшения, предлагаемого предварительной загрузкой. Вы можете подумать, что ваш сайт работает быстро, если вы когда-либо заходите на него только на настольном компьютере. В настоящее время основная часть трафика приходится на мобильные устройства, и разработчик веб-сайта должен сосредоточиться на том, чтобы предлагать им наилучшие возможности просмотра в частности.

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

Если вы хотите создавать быстрые сайты, используйте медленный интернет

Настройка HSTS

С такими инструментами, как Давайте зашифруем а также Cloudflare предлагая бесплатные сертификаты SSL / TLS, нет никаких причин, по которым любая часть вашего сайта должна обслуживаться по обычному HTTP.

Добавление заголовка HSTS (HTTP Strict Transport Security) - это простой способ избежать ненужных перенаправлений на стороне сервера, когда пользователь вводит URL-адрес вашего веб-сайта непосредственно в браузер.

Без перенаправления заголовка HSTS будет выполняться 301 HTTP-код, перенаправляющий HTTP-версию на HTTPS. Если у вас есть заголовок HSTS, перенаправление будет выполнено на стороне клиента, что сократит одну полную передачу по сети и, следовательно, улучшит первоначальный опыт пользователя.

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

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

Кэшируйте все с помощью Cloudflare CDN

Я использую Cloudflare как CDN для этого блога. По умолчанию кэшируется только статические ресурсы ,

В этом случае каждый посетитель должен будет загрузить веб-сайт HTML с сервера VPS, расположенного в США. Это означает, что вам нужно совершить поездку в обе стороны до самого США, независимо от их географического местоположения, чтобы увидеть что-нибудь на экране.

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

Заголовки кеша Cloudflare и настройка правил страницы

Чтобы это работало, я использую следующую конфигурацию NGINX:

location ~ * \. (?: ico | css | js | gif | jpe? g | png) $ {expires 8d; add_header Cache-Control "public"; try_files $ uri = 404; } местоположение / {истекает 15м; add_header Cache-Control "public"; try_files $ uri $ uri .html $ uri / /404.html; }

Я могу кешировать статические ресурсы на 8 дней, чтобы сделать Google Page Insights счастливый. я использую Джекилл-активы для добавления дайджеста md5 к имени файла на основе содержимого, поэтому устаревший кеш не является проблемой.

После каждого развертывания я запускаю следующий скрипт Ruby, который очищает кэши Cloudflare для статических HTML-страниц:

требуют 'sitemap-parser' требуют 'http' response = HTTP. заголовки ("X-Auth-Email" => ENV. fetch ("CLOUDFLARE_EMAIL"), "X-Auth-Key" => ENV. fetch ("CLOUDFLARE_API_KEY"), "Content-Type" => "application / json") ). post ("https://api.cloudflare.com/client/v4/zones/ # {ENV. fetch ('CLOUDFLARE_ZONE_ID')} / purge_cache", json: {файлы: SitemapParser. new ("./docs/sitemap. xml "). to_a})

Это означает, что каждый посетитель будет хранить копию HTML-страниц в своем локальном кэше не более 15 минут, а после этого запрашивать актуальную версию с узла Cloudflare CDN-сервера.

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

Большинство посетителей этого блога, боты или нет, из США

Я недавно перенес сервер VPS моего стороннего проекта Abot Slack Bot в США. Хотя пользователи Abot разбросаны по всему миру, сам бот подключается к Slack API Американские серверы для каждой команды. Сокращение расстояния между обходами внутренней стороны сервера значительно улучшило время отклика.

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

Показать заполнитель

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

Если вы знаете соотношение ваших изображений, вы можете использовать простой трюк CSS, чтобы предотвратить «скачок» окружающего контента при окончательной загрузке изображения:

<div class = "main-image-placeholder"> <img src = "/images/image.jpg"> </ div> .main-image-placeholder {position: родственник; прокладка снизу: 61%; / * отношение высоты изображения к ширине * / высота: 0; переполнение: скрытое; цвет: #ееее; цвет фона: #eee; } .main-image-placeholder img {position: absolute; верх: 0; слева: 0; ширина: 100%; }

Он отобразит пустой серый заполнитель с правильным размером независимо от области просмотра посетителя до загрузки изображения.

Предварительная загрузка версии с низким разрешением

Еще одна оптимизация, которую вы можете применить, - это отображение версии изображения с низким разрешением до загрузки оригинальной версии. Это может быть достигнуто с помощью небольшого кода JavaScript.

(function () {Array. prototype. slice. call (document. getElementsByClassName ('js-async-img')). forEach (function (asyncImgNode) {var fullImg = новое изображение () fullImg. src = asyncImgNode. набор данных. src ; fullImg. onload = function () {asyncImgNode. classList. remove ('js-async-img') asyncImgNode. src = asyncImgNode. dataset. src};});}) ();

Соответствующий HTML-узел img:

<img class = "js-async-img" data-src = "https://example.com/assets/high-res-image.png" src = "https://example.com/assets/low-res -image.png ">

45 кб лося против 4 кб лося

Пересмотреть зависимости

Передозировка сторонних JavaScript-библиотек - самый простой способ снизить производительность вашего сайта. Стандарт AMP не позволяет включать их вообще. Я хотел бы предложить подход среднего уровня.

Добавление еще одного <script src = "..."> может показаться не таким уж большим делом. Легко забыть, что один тег скрипта может привести к каскаду запросов, каждый из которых будет содержать больше скриптов и ресурсов. Давайте посмотрим на стоимость встраивания примеров сторонних библиотек JavaScript:

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

3 МБ и 16 запросов против двух десятков строк HTML + CSS

В конце концов, я решил, что Disqus - единственная тяжеловесная библиотека JavaScript стороннего производителя, которая предлагает достаточно возможностей, чтобы встроить ее в этот блог. Возможно, если бы я использовал всплывающие окна с полноэкранной подпиской SUMO и другие инструменты преобразования, было бы целесообразно добавить эти 3 МБ полосы пропускания.

[Обновление] Я перенес мою систему комментариев в облегченный Commento ,

Соотношение цены и цены

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

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

Напротив, 8 дополнительных запросов и почти 200 КБ для интерактивной кнопки «Твиттер» не являются хорошим компромиссом.

Запросы выдаются при включении библиотеки Sumo JavaScript

Обязательно отключите отслеживание файлов cookie и партнерские ссылки в административной панели Disqus, чтобы уменьшить количество запросов:

Резюме

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

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

Я все еще делаю этот блог максимально эффективным. Если вы заметили какие-либо улучшения, которые могут быть применены здесь, пожалуйста, оставьте комментарий. Кстати, я очень рекомендую к прочтению Высокопроизводительная сеть браузера Илья Григорик, который послужил вдохновением для многих оптимизаций, о которых я пишу. Вы также можете проверить мой предыдущий пост для более SEO оптимизация и советы по веб-производительности ,

Ico | css | js | gif | jpe?

Поиск

Реклама