- Удаление AMP
- SEO и органический трафик результаты удаления AMP
- Предварительная загрузка веб-страниц для мгновенного просмотра
- Тестирование мобильного пользовательского опыта
- Настройка HSTS
- Кэшируйте все с помощью Cloudflare CDN
- Оптимизация загрузки изображений
- Предварительная загрузка версии с низким разрешением
- Пересмотреть зависимости
- Соотношение цены и цены
- Резюме
Я привык рекомендовать Страницы 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 оптимизация и советы по веб-производительности ,
Похожие
Joomla SEOВ DM Solutions вы получите дешевую и идеально подобранную поисковую оптимизацию Joomla. Оптимальный SEO Joomla благодаря прозрачным и ориентированным на клиента методам работы - убедитесь сами. Годы опыта Joomla Годы опыта SEO Onpage / Offpage оптимизация Нет автоматизированных процессов оптимизации Наш совет: свяжитесь с нами сейчас Свяжитесь с нами сейчас и попросите ваше предложение SEO. Мы будем рады ответить вам Chrome SEO
Сегодня для любой компании, которая хочет расти на рынке, важно иметь хорошие позиции в Интернете. Многие корпорации вкладывают средства в SEO-действия, что означает поисковую оптимизацию, с целью улучшить свою позицию в основных поисковых системах и получить больше кликов. Существует целый ряд показателей SEO, которые помогут вам определить, что нужно улучшить или изменить на сайте, чтобы он лучше позиционировался в поисковых системах. Основы SEO: оптимизация внутренних ссылок
Большинство подстраниц не имеют внешних ссылок, поэтому Google может использовать это как фактор классификации Если мы возьмем в качестве справочника каталог желтых страниц Германии и посмотрим на обычные показатели, мы заметим, что благодаря 12 000 городов и муниципалитетов и 3500 категориям промышленности в базе данных - мы уже можем создать 42 миллиона (12 000 x 3500). ) страницы локализованной категории. Каждый имеет возможность ранжировать не менее 42 миллионов различных SEO
Аутсорсинг персонала является одной из лучших фирм, которые стремятся предоставлять услуги SEO и SMO, используя наших квалифицированных специалистов по SEO аутсорсингу. Наблюдайте за ростом трафика, когда вы получаете органические методы, настроенные для вашего веб-сайта. С помощью наших представителей по SEO аутсорсингу мы поможем вам достичь вершин результатов. SEO консалтинг
... иками охватывает все этапы разработки веб-сайта: создание, дизайн, графика и оптимизация. Мы предлагаем индивидуальные CMS и программные продукты высшего уровня. Но наша работа не ограничивается размещением в сети. Мы гарантируем нашим клиентам полную стратегию, которая включает в себя лучшее позиционирование в поисковых системах и лучшую видимость благодаря нашим навыкам SEO . Поисковая оптимизация является фундаментальной SEO код | SEO методы | SEO стратегия | Пилот Рыба
Использование современного SEO-кодирования является важным элементом, который не только определяет, как отображается ваш сайт, но и помогает поисковым системам интерпретировать ваш контент. Оценка нового или Поисковая оптимизация [SEO] Зачем мне SEO агентство? Наши услуги по поисковой оптимизации (SEO) в ...
Поисковая оптимизация [SEO] Зачем мне SEO агентство? Наши услуги по поисковой оптимизации (SEO) в Мумбаи и по всей Индии предназначены для повышения наглядности в результатах алгоритмического поиска, чтобы обеспечить высококачественный целевой трафик на ваш сайт. Каждый хочет быть на первой странице, но не каждый SEO УСЛУГИ
... трафика - ФАКТ. Приблизительно 33% поисковиков нажимают на позицию 1, 18% на позицию 2, 11% на позицию 3, затем спуски быстро продолжаются вниз. SEO - это дисциплина, которая управляет вашими «органическими» или «естественными» позициями на страницах результатов поисковой системы (SERPS) - цель состоит в том, чтобы получить максимально возможные места размещения для определенного набора целевых слов или фраз, которые относятся к вашему бизнесу. Органические результаты основаны SEO для виджетов
Для веб-сайтов с отличным контентом, но с небольшим влиянием в Интернете, один из способов увеличить свое присутствие в Интернете - выпустить контент через виджеты. Виджеты могут быть лучшим другом SEO. Они отлично подходят для повышения узнаваемости бренда, контент-партнерств, обратных ссылок и веб-сигналов. Так что, если вы можете сэкономить труд и затраты, вознаграждение может стоить того. Для тех, кто не уверен, виджеты - это фрагменты кода, которые могут быть встроены в веб-страницу NJ SEO Company Нью-Джерси Поисковая оптимизация
... ите больше трафика для большего количества звонков и больше продаж с поисковой оптимизацией! Сайт так же хорош, как и его видимость. Когда дело доходит до вашего сайта, если вас не найдут, вас не будет. Наша локальная Wp seo pix
Главный / Карта / Wp seo pix Название: Wp seo pix Размер файла: 9 МБ Язык: Английский Рейтинг: 4/10 Скачать 23 ноября Метод объяснил здесь juniordaveybodhranacademy.com Wp seo pix. 2 мая Закрыт как WSO - скоро будет переиздан в реальном мире.
Комментарии
Например, «SEO совет: как SEO-эксперты могут использовать SEO для достижения SEO Nirvana в пространстве SEO?Например, «SEO совет: как SEO-эксперты могут использовать SEO для достижения SEO Nirvana в пространстве SEO? Ответ: мощный SEO! » Чарли Уайт - старший редактор, Mashable и соавтор Bloggers Boot Camp @Charlie_White. Поделиться постом "SEO: почему я не вижу такие же результаты?
Поделиться постом "SEO: почему я не вижу такие же результаты?" Вы ищете партнера по SEO, чтобы работать с вами месяц за месяцем, чтобы улучшить ваш органический трафик?
Вы ищете партнера по SEO, чтобы работать с вами месяц за месяцем, чтобы улучшить ваш органический трафик? Если вы считаете, что ваш сайт нуждается в профессиональном руководстве профессионального SEO, и вы хотели бы видеть реальные результаты, связаться с нами сегодня! Но как вы улучшаете свой рейтинг в Google, когда все и их бабушка утверждают, что имеют секреты отличного SEO (и отличного SEO для свадебных фотографов)?
Но как вы улучшаете свой рейтинг в Google, когда все и их бабушка утверждают, что имеют секреты отличного SEO (и отличного SEO для свадебных фотографов)? Правда в том, что поисковая оптимизация - это не дым и зеркала, а алгоритмы и лучшие практики. Как деловой человек, все, что вам действительно нужно знать, это как играть вместе. Хотите создать успешный бизнес в сфере фотографии? Твердое развитие Если вы занимаетесь уборкой, робототехникой или юридической практикой, почему бы не реализовать эти шесть локальных стратегий SEO сегодня и не увидеть разницу?
Если вы занимаетесь уборкой, робототехникой или юридической практикой, почему бы не реализовать эти шесть локальных стратегий SEO сегодня и не увидеть разницу? 1. Заявите о себе на Google. Звучит достаточно просто, но вы будете удивлены количеством предприятий, которые еще не заявили свое имя в Google My Business. Требование вашего бизнеса это очень просто и занимает всего несколько минут. После этого ваша компания будет иметь 1. Что означают буквы SEO и какова цель SEO?
1. Что означают буквы SEO и какова цель SEO? SEO это сокращение от Оптимизация поисковых систем , SEO включает в себя повышение вероятности того, что ваш веб-сайт будет значиться в списке, когда пользователи выполняют поиск на таких сайтах, как Google.com, Yahoo.com или Bing.com. 2. Что такое ключевое слово? Ключевое слово не то, на что это похоже. Обычно это не SEO и SEA: в чем сходство и различие между SEO и платным поиском?
SEO и SEA: в чем сходство и различие между SEO и платным поиском? С чисто эстетической точки зрения естественные и платные результаты можно легко спутать на страницах поиска Google: объявления SEO и SEA похожи. Итак, как отличить рекламную ссылку от естественной? Натуральная ссылка (SEO) против Рекламной ссылки (SEA) Эстетичное изложение натуральной и платной рекламы практически одинаково. Если вы не можете получить рейтинг сайта, не проголосовав за себя, заслуживает ли ваш сайт рейтинга?
Если вы не можете получить рейтинг сайта, не проголосовав за себя, заслуживает ли ваш сайт рейтинга? Может быть, ваш контент не так качественен, как вы думали. Даже если мораль всего этого не придет вам в голову, знание того, что Google активно ищет PBN для деиндексации, пугает вас, по крайней мере, немного. Людям, включая меня, весь бизнес был разрушен из-за проблем, связанных с PBN. Да, ребята все еще продают их как «магические бобы», чтобы мгновенно ранжировать сайт. Как «контентный маркетинг может полностью обогнать SEO», если единственным способом успешного контентного маркетинга является SEO?
Как «контентный маркетинг может полностью обогнать SEO», если единственным способом успешного контентного маркетинга является SEO? Как вы можете разорвать эти два на части, как это? К счастью, в какофонии путаницы есть голос разума (например, статья smallbusiness.yahoo выше). Осторожные маркетологи наблюдали разрыв и пытаются указать, что SEO и контент-маркетинг идут вместе У вас может быть самая визуально привлекательная веб-страница в Интернете, полная полезной информации, изображений и контента, но какой цели она служит, если люди даже не знают, что она существует?
У вас может быть самая визуально привлекательная веб-страница в Интернете, полная полезной информации, изображений и контента, но какой цели она служит, если люди даже не знают, что она существует? Способ привлечь потенциальных потенциальных клиентов на ваш сайт - разместить его на первой странице Google. Чем выше в результатах поиска, тем лучше. Чтобы это произошло, вам нужна органическая поисковая оптимизация, простая и понятная. Премьер SEO агентство Все еще не совсем уверены, как SEO-дружественный контент пойдет на пользу вашему бизнесу?
Все еще не совсем уверены, как SEO-дружественный контент пойдет на пользу вашему бизнесу? посетите наш SEO информационная страница ,
Ico | css | js | gif | jpe?
Поисковая оптимизация [SEO] Зачем мне SEO агентство?
Например, «SEO совет: как SEO-эксперты могут использовать SEO для достижения SEO Nirvana в пространстве SEO?
Поделиться постом "SEO: почему я не вижу такие же результаты?
Поделиться постом "SEO: почему я не вижу такие же результаты?
Вы ищете партнера по SEO, чтобы работать с вами месяц за месяцем, чтобы улучшить ваш органический трафик?
Вы ищете партнера по SEO, чтобы работать с вами месяц за месяцем, чтобы улучшить ваш органический трафик?
Но как вы улучшаете свой рейтинг в Google, когда все и их бабушка утверждают, что имеют секреты отличного SEO (и отличного SEO для свадебных фотографов)?
Но как вы улучшаете свой рейтинг в Google, когда все и их бабушка утверждают, что имеют секреты отличного SEO (и отличного SEO для свадебных фотографов)?
Хотите создать успешный бизнес в сфере фотографии?
