Товаров:
- 1 и 2 - объединение файлов CSS и Javascript
- 3, 4 и 5 - минимизируйте свой CSS, HTML и код JavaScript
- 6 - Сжатие ваших изображений
- 7 - Обслуживание масштабированных изображений может спасти КиБ
- Бонус - вещи, которые вы можете игнорировать благодаря HTTP / 2
Просмотр оригинальной статьи опубликовано Вот ,
Google PageSpeed Insights это фантастический бесплатный ресурс, чтобы понять, как ваш сайт оптимизирован для скорости. Однако, самый большой недостаток инструмента и других подобных ему, они не принимают во внимание контекст.
Как сам бывший разработчик, я могу понять причину, по которой принимаются определенные решения об использовании HTML, CSS или Javascript, которые могут привести к тому, что PageSpeed Insights покажет вам палец.
Одна из ошибок новичков в проведении аудита скорости сайта заключается в том, что сначала не понимают фактическую архитектуру рассматриваемого сайта.
Понимание того, кто создал сайт, платформу, которую он использует, и уникальных проблем, с которыми он сталкивается, позволяет вам проводить аудит скорости сайта более умным способом. Например, избегая ситуаций, например, когда вы в пятый раз говорите своей команде разработчиков, что они должны использовать Image Sprites, несмотря на то, что ваш сервер фактически использует HTTP / 2, что теоретически делает их существование избыточным.
Цель этого поста - познакомить вас с 7 распространенными тактиками ускорения, предложенными Google PageSpeed Insights, и помочь вам разобраться с ними в контексте или действии - поскольку инструмент, как и раньше, не предлагает много рекомендаций по реализации.
1 и 2 - объединение файлов CSS и Javascript
Логика, лежащая в основе этого предложения, заключается в уменьшении количества ресурсов, которые браузер пользователей должен запрашивать у сервера вашего веб-сайта. Действие - уменьшить количество загружаемых файлов CSS и Javascript и объединить их вместе.
Это совершенно разумный совет, однако внешние разработчики все чаще используют библиотеки и шаблоны с открытым исходным кодом, размещенные извне, чтобы обеспечить современные веб-стандарты и, конечно же, немного упростить свою работу в области программирования.
Примеры:
- Javascript: Angular, React, JQuery, D3, Grunt, Gulp.
- CSS: Bootstrap, Google Web Fonts
Я бы рекомендовал избегать объединения этих файлов. Разумнее хранить их снаружи и предоставлять разработчикам и пользователям возможность пользоваться новейшими кодами - будь то безопасность или эффективность кода.
Та же логика также применима к любому дополнительному CSS или Javascript, сгенерированному плагинами CMS. Например, многие из самых популярных плагинов WordPress, Magento и Drupal имеют сопутствующие CSS / JS. Если эти файлы будут объединены вручную, это усложнит автоматическое обновление плагина.
Наконец, я бы также оставил любые аналитические файлы отслеживания Javascript отдельно. В частности, Google Analytics имеет привычку менять способ отслеживания событий.
3, 4 и 5 - минимизируйте свой CSS, HTML и код JavaScript
Минификация - это процесс удаления ненужного белого кода из файлов CSS и Javascript для незначительного улучшения скорости загрузки. Опять же, это ценная лучшая практика, но проблема в масштабах, что вы делаете, когда у вас есть миллионы URL-адресов?
Есть несколько интересных решений для этого. У Google есть два серверных модуля, которые потенциально могут автоматизировать минимизацию контента. Во-первых, есть Модуль PageSpeed , что может дополнительно оптимизировать изображения и расширить кеширование в браузере (еще две галочки в списке, который вы обычно получаете при запуске инструмента). Отдельно есть Javascript Закрытие Компилятор это также обладает силой минификации.
За пределами Google Kangax разработал HTML Minifier это можно найти на Github, а для небольших сайтов Minifier.org вы можете просто скопировать, вставить и преобразовать свой код CSS / JS на лету.
6 - Сжатие ваших изображений
«Ваши изображения не сжаты», - говорит каждый аудит скорости сайта, когда-либо написанный SEO-консультантом. Оптимизация изображения может привести как к самым быстрым выигрышам, так и к увеличению времени загрузки сайта, однако это опять-таки задача, которую трудно выполнить в масштабе.
Google (удивительно) недавно начал выступать за открытый исходный код без потерь формат изображения WebP в качестве потенциального решения. Согласно их собственным данным, формат WebP часто на 26% меньше, чем файлы PNG, и обеспечивает еще лучшие результаты - на 34% меньше для JPEG. WebP уже изначально поддерживается в Google Chrome и браузере Opera, предлагает ряд утилит для автоматизации преобразования существующих библиотек изображений и даже плагин фотошоп ,
7 - Обслуживание масштабированных изображений может спасти КиБ
Кредит изображения: Тэй Бенлор
TL; DC - Google Page Insights не учитывает изображения, совместимые с Retina-дисплеем, которые подаются в соответствующем масштабе.
Исходя из вышеизложенного, изображения, размещаемые на веб-страницах, нередко размещаются с другой высотой и шириной, чем сам необработанный файл. Например, файл с именем logo.png, опубликованный на ilovetowinlinks.com, может иметь размер 660 x 330 пикселей, но обслуживается только с разрешением 120 x 110 пикселей, поэтому реальное изображение больше, чем то, что на самом деле видит пользователь.
Конечно, это может быть расточительным и плохой практикой, когда речь идет о сжатии изображений. Однако с момента появления iPhone 4 и сопровождающего его MacBook Pro с Retina-дисплеем концепция изображений Retina приобретает все большую тенденцию.
Компьютерные дисплеи, которые могут обслуживать до 2 раз больше пикселей на дюйм, требуют более высокого качества изображения, чтобы сохранить его четкость. Есть два решения для этого, которые являются общепринятыми - используйте векторные изображения или файлы SVG, где это возможно, или альтернативно создайте изображение с разрешением 200 x 200 пикселей и используйте CSS для отображения только с разрешением 100 x 100 пикселей. Google PageSpeed Insights не учитывает это Широко используется решение для обслуживания изображений с более высоким разрешением.
Бонус - вещи, которые вы можете игнорировать благодаря HTTP / 2
Подавляющее большинство тактик скорости сайта, которые отстаивались на протяжении многих лет, существуют из-за ограничений протокола HTTP / 1. В прошлом году я опубликовал подробное руководство по HTTP / 2, в котором рекомендовал каждому бренду начать его использовать. На момент написания, все еще только 12% веб-сайтов используют HTTP / 2.
Как уже упоминалось в этом руководстве, существуют дополнительные распространенные предложения PageSpeed Insight, которые можно игнорировать, поскольку они эффективно исключаются при наличии HTTP / 2. Это включает в себя создание спрайтов изображений, разделение доменов и объединение файлов CSS / JS, которые существуют как способы уменьшения количества запросов браузера, но приводят к ресурсам, которые могут не отображаться на странице, которую посещает пользователь.
Мне нравится слышать о стратегиях реализации других людей, касающихся скорости сайта, особенно на крупных сайтах - не стесняйтесь чирикать мне в теме.
Похожие
Изменение Google может стоить вам клиентов... ил результаты поиска и увеличивает долю рекламы. Это может сильно ударить вас как малый бизнес. Как защитить себя. Из почти 50 миллионов запросов шведского населения в Google каждый день 40 процентов являются локальными, что показывает цифры поискового гиганта. Это означает, что они содержат место, например «напрапат нака», или интерпретируются как то, что пользователь хочет, чтобы попадания были рядом с его 25 потрясающих бесплатных инструментов Google для маркетологов
Любите ли вы Google или ненавидите Google, вы должны признать одну вещь. Google предлагает множество бесплатных инструментов для удобного доступа к ним с одним логином. Маркетологам, в частности, следует воспользоваться этими инструментами, чтобы извлечь больше пользы из своего поискового движка и опыта маркетинга в социальных сетях. Следующее - некоторые из лучших маркетологов инструментов Google, должны охватить от A до (почти) Z! 1. Google AdSense 5 вещей, которые бесят SEO-консультантов больше всего
Вы хотите разозлить своего консультанта по SEO? В этой полусерьезной статье мы объясняем, как это можно сделать. В определенных обстоятельствах каждый может потерять контроль, и, вероятно, это также нормально, если наши благие намерения полностью не поняты или, что происходит нередко, потому что между нашими Google Maps SEO
Как создать хорошую запись Google Maps Самое главное при создании записи Google Maps - это категория! Google Maps категории Первая категория является основной и наиболее важной для рейтинга. Имеет смысл выбирать только Google Vs. Naver: Почему Google не может доминировать в поиске в Корее?
Хотя в настоящее время Google занимает 83% мирового рынка поиска, есть страны, которые постоянно выходят из-под контроля. Одна такая страна - Корея, если быть точным, Южная Корея. Спросите любого корейца, какую поисковую систему они используют, и, скорее всего, ответ будет ... Naver. Naver - профиль Naver (производный от navigate) в настоящее время является поисковой системой номер один в Корее, и на ее долю приходится более 70% поискового рынка. 10 SEO задач, которые вы можете выполнить с помощью Google Search Console
... ициальный блог Google Webmaster Central был объявлен исторический проход, который видел Инструменты для веб-мастеров от Google превратиться в консоль поиска Google . То, что может показаться чистой операцией ребрендинга, на самом деле является реальным переходом на новую платформу, которая обещает интересные новости для разработчиков и, прежде всего, новый подход к общению между Google и веб-мастерами. Некоторые ошибки SEO на ваших изображениях, которые вы должны избегать
Вы ищете лучшие темы и плагины WordPress? Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой веб-сайт. Уже более 49 720 000 загрузок. [ЭКСКЛЮЗИВ] Теперь вы знаете, что если ваши усилия не направлены на оптимизацию SEO, ваш контент не будет иметь особой ценности. SEO на изображениях играет важную роль в вашей общей стратегии SEO и имеет решающее значение для сайтов, которые делятся учебниками. Подумайте обо всем 30 бесплатных инструментов SEO, которые вы можете использовать для поиска ссылок
Поиск ссылок является одной из важнейших и первых инициатив в процессе приобретения ссылок. Любая тактика создания ссылок всегда начинается с поиска ссылок в определенном веб-месте с использованием бесплатных инструментов SEO и сортировки этих ссылок в электронной таблице на основе стандартов ссылок бренда. Кроме того, ручная и тщательная оценка целевых ссылок, если они подходят для вашего сайта / страницы, сильно повлияет на ваш Pagespeed Insights & SEO - когда беспокоиться, а когда нет
... изображений и изображений, которые слишком велики и масштабируются в CSS. Этот кусочек того, о чем сообщает Pagespeed Insights, должен быть совершенно определенно замечен. Вы можете сэкономить много времени на загрузку, если просто решите эту проблему самостоятельно на своих веб-страницах. Тем не менее, даже если вы используете хороший плагин для сжатия изображений (Ewww / Imagify), Pagespeed может не распознать, что изображение уже сжато, и не будет учитывать, какой Типы SEO стратегии
Прежде чем приступить к новому проекту, лучше узнать, где мы находимся и есть ли у нас какой-либо шанс получить результаты. Для этого нет ничего лучше, чем знание типа стратегии SEO, которую делает наш конкурент . Мы не всегда сможем появиться по тем терминам, которые нам нравятся, или по тем, которые хотели бы получить наш клиент, если мы работаем только с аспектами на странице, и меньше, если мы сталкиваемся с вертикальным порталом. Мы должны будем использовать Google PageSpeed - скорость загрузки сайта - SISTRIX
... ине 2009 года Google начал свою инициативу по созданию более быстрого интернета «Давайте сделаем Интернет быстрее». Это заложило основу для другого (нового) фактора рейтинга. Мы фокусируемся на скорости как ключевом требовании в разработке продуктов и инфраструктуры, потому что наши исследования показывают, что люди предпочитают более быстрые и более отзывчивые приложения. - Google Вместо того,
Комментарии
Здесь вы должны использовать немного логики: если за 30 евро в месяц вы будете на первых страницах Google в очень короткое время, не думаете ли вы, что мы все сделаем то же самое?Здесь вы должны использовать немного логики: если за 30 евро в месяц вы будете на первых страницах Google в очень короткое время, не думаете ли вы, что мы все сделаем то же самое? Если за 30 евро вы можете умножить на 10 или 20 количество посещений за 3 месяца, это действительно будет выгодно. И мы все подумаем, завтра я построю «обувной магазин в Мадриде» . Наш ИТ-консалтинг , César IT Consultores, покажет вам технические усовершенствования, чтобы ваше позиционирование Как вы можете получить те функции, которые вы видите, когда вы вводите имена ваших конкурентов в поисковой системе?
Как вы можете получить те функции, которые вы видите, когда вы вводите имена ваших конкурентов в поисковой системе? Вот руководство к ресурсам о том, как вы можете настроить свои результаты, когда они появятся в Google. У вас много дел в повседневной работе, поэтому добавьте эту страницу в закладки и возвращайтесь к ней, когда у вас есть время посвятить себя маркетингу. Sitelinks Ссылки сайта - это несколько страниц в одном домене, на которые ссылается один результат Если вы никогда не были на этом сайте раньше и не были знакомы с его навигацией, можете ли вы найти то, что вы ищете, без особых усилий?
Если вы никогда не были на этом сайте раньше и не были знакомы с его навигацией, можете ли вы найти то, что вы ищете, без особых усилий? Если нет, то пришло время подумать о реструктуризации вашего сайта. 4 - Проверьте скорость вашей страницы Никому не нравится, когда сайт загружается медленно. Даже 10 секунд могут показаться минутами для клиентов. Если веб-сайт не загружается в течение трех секунд, посетитель, скорее всего, отскочит. А поскольку решение Так что, если вы не креативны и не имеете потенциального бюджета для решения этой проблемы, как вы и ваш малый бизнес все еще можете создавать бизнес в Интернете?
Так что, если вы не креативны и не имеете потенциального бюджета для решения этой проблемы, как вы и ваш малый бизнес все еще можете создавать бизнес в Интернете? Вот где появился контент-маркетинг за последние пару лет. В конце концов, вы знаете свой рынок, на котором вы работаете лучше всего, верно? Так почему же вы не можете помочь вашему потенциальному клиенту решить его проблемы так же, как ваш продукт помогает им только через средства массовой информации, которые вы создаете и продвигаете? Серьезно, подумайте об этом: вы можете купить лучшие обратные ссылки, которые вы хотите, но почему бы вам сайт с тонким контентом выбить всех остальных, у кого на самом деле есть стратегия контента?
Серьезно, подумайте об этом: вы можете купить лучшие обратные ссылки, которые вы хотите, но почему бы вам сайт с тонким контентом выбить всех остальных, у кого на самом деле есть стратегия контента? Полностью разработанный сайт? Ваша контентная стратегия не может быть просто «мы добавим 30 новых постов в блоге и будем называть это день». Для этого сайта мы решили не только постоянно заполнять область блога в течение шести месяцев, но и уточнять страницы мы были в рейтинге (формулировка Но как вы можете отслеживать свои рейтинги Google и рост (или падение), которые вы делаете, делая определенные выборы?
Но как вы можете отслеживать свои рейтинги Google и рост (или падение), которые вы делаете, делая определенные выборы? Вот что мы вам сегодня скажем! Как лучше всего повлиять на ваш рейтинг в Google? Во-первых, прежде чем мы даже подумаем об измерении результатов, вы должны научиться понимать, какие изменения влияют на ваш рейтинг. Как мы кратко объяснили во введении к этой статье, есть много методов и вариантов, которые вы можете сделать, которые приводят к росту или снижению рейтинга Итак, как вы можете быть уверены, что каждый контент, который вы публикуете в Интернете, не только отличного качества, но и не менее важен, уникален?
Итак, как вы можете быть уверены, что каждый контент, который вы публикуете в Интернете, не только отличного качества, но и не менее важен, уникален? Есть несколько инструментов, которые вы можете использовать бесплатно, чтобы проверить наличие дублированного контента. (Другие предлагают более сложные услуги за небольшую плату.) Google Из всего, что вы знаете, ваш веб-сайт может резко упасть в рейтинге Google, но если ваш бизнес продолжает расти с прибылью, которую вы получаете от постоянных клиентов, как вы узнаете?
Из всего, что вы знаете, ваш веб-сайт может резко упасть в рейтинге Google, но если ваш бизнес продолжает расти с прибылью, которую вы получаете от постоянных клиентов, как вы узнаете? SEO Сайт Аудит Единственный надежный и верный способ определить, насколько хорошо работает ваш сайт, - это провести аудит сайта. Как ваш автомобиль (или ваш компьютер) регулярно нуждается в хорошем обслуживании, так же как и ваш сайт - и это, в сущности, и есть аудит SEO-сайта. Вам не повезло, если вы не оптимизируете свой сайт, но на нем есть релевантный контент?
Вам не повезло, если вы не оптимизируете свой сайт, но на нем есть релевантный контент? Если я мама или поп, и я пытаюсь оптимизировать сайт самостоятельно, меня будут избивать люди, платящие тысячи долларов ». Ах, да, на самом деле чертовски хороший вопрос - тот, который сводит с ума мамы и поп-магазины по всему миру, когда они пытаются запустить веб-сайт и производить контент, - тем более, сделайте это таким образом, чтобы Google не очень хорошо понимал. В конце концов, если они не могут сказать вам, что гордятся своей работой, можете ли вы верить, что вы будете довольны тем, что они для вас делают?
В конце концов, если они не могут сказать вам, что гордятся своей работой, можете ли вы верить, что вы будете довольны тем, что они для вас делают? Важная страница 3. Страница отзыва Отзывы страниц являются золотыми приисками информации о том, как вы можете рассчитывать на обращение со стороны агентства SEO. Часто, когда вы хотите купить товар, вы попадаете в интернет-магазины, где вы обычно найдете только цену и некоторые особенности товара, но кажется, что чего-то не хватает, не так ли?
Часто, когда вы хотите купить товар, вы попадаете в интернет-магазины, где вы обычно найдете только цену и некоторые особенности товара, но кажется, что чего-то не хватает, не так ли? Это руководство и заслуживающий доверия совет, который может убедить вас в том, что вы многое сделаете или что продукт лучше всего соответствует вашим требованиям. В таких неопределенных ситуациях полезность обзора сайта будет сразу же подчеркнута! Полезность обзора сайта Давайте рассмотрим, что вы
Опять же, это ценная лучшая практика, но проблема в масштабах, что вы делаете, когда у вас есть миллионы URL-адресов?
Naver: Почему Google не может доминировать в поиске в Корее?
Здесь вы должны использовать немного логики: если за 30 евро в месяц вы будете на первых страницах Google в очень короткое время, не думаете ли вы, что мы все сделаем то же самое?
Как вы можете получить те функции, которые вы видите, когда вы вводите имена ваших конкурентов в поисковой системе?
Если вы никогда не были на этом сайте раньше и не были знакомы с его навигацией, можете ли вы найти то, что вы ищете, без особых усилий?
Так что, если вы не креативны и не имеете потенциального бюджета для решения этой проблемы, как вы и ваш малый бизнес все еще можете создавать бизнес в Интернете?
В конце концов, вы знаете свой рынок, на котором вы работаете лучше всего, верно?
Так почему же вы не можете помочь вашему потенциальному клиенту решить его проблемы так же, как ваш продукт помогает им только через средства массовой информации, которые вы создаете и продвигаете?
Серьезно, подумайте об этом: вы можете купить лучшие обратные ссылки, которые вы хотите, но почему бы вам сайт с тонким контентом выбить всех остальных, у кого на самом деле есть стратегия контента?
Серьезно, подумайте об этом: вы можете купить лучшие обратные ссылки, которые вы хотите, но почему бы вам сайт с тонким контентом выбить всех остальных, у кого на самом деле есть стратегия контента?