Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 1432 сообщений
Cообщения с меткой

оптимизация сайта - Самое интересное в блогах

Следующие 30  »
KtoNaNovenkogo

Видео по теме курса «Семантическое проектирование»

Четверг, 18 Мая 2017 г. 16:38 (ссылка)

Это цитата сообщения Dmitriykn Оригинальное сообщение

Курс по семантическому проектированию от «Devaka.ru и Ко» с 10% скидкой от Ktonanovenkogo.ru

Семантическое проектирование

Как купить курс "Семантическое проектирвание" с 10% скидкой, кто автор курса и почему это вам необходимо как воздух

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Dmitriykn

Курс по семантическому проектированию от «Devaka.ru и Ко» с 10% скидкой от Ktonanovenkogo.ru

Четверг, 18 Мая 2017 г. 16:37 (ссылка)

Семантическое проектирование

Как купить курс "Семантическое проектирвание" с 10% скидкой, кто автор курса и почему это вам необходимо как воздух

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
svetlyc

Блог байкера

Суббота, 06 Мая 2017 г. 09:19 (ссылка)

Я в интернете не новичок. Но, тем не менее, постоянно обращаюсь за советами к разным людям. Дело в том, что не все желают просто так делиться своими знаниями. И вот, как обычно, ввела в строку поиска очередной вопрос и в результате попала на блог очень интересного человека с массой увлечений, одно из которых помощь блогерам в сети.
Сначала меня заинтересовало название блога Байкер в интернете, но, когда я ознакомилась с личной информацией, вопросов больше не осталось.
А теперь о главном. Если вас интересуют такие вопросы, как создание сайта с нуля, его продвижение и раскрутка, создание и ведение блога на разных площадках, возможности заработка в сети и много других полезных советов и рекомендаций, то на блоге байкера вы найдете все что нужно. А, кроме того, еще и личная помощь и консультации по Skype, eMail или через форму обратной связи на сайте.
Чтобы знать о выходе новой статьи на блоге байкера, подписывайтесь на новости, а также смотрите его канал на You Tube.

Безымянный (700x312, 233Kb)
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
ONVOLGA

Продвигаем волгоградский бренд №1

Понедельник, 10 Апреля 2017 г. 10:39 (ссылка)


Специалисты APRIORUM GROUP выполняют продвижение сайта компании «Диалайн». 15 лет компания «Диалайн» заботится о здоровье жителей Волгограда и Волгоградской области. Ежегодно медиагруппа ПРЕМИЯ проводит голосование и определяет десятку самых популярных волгоградских брендов. Рейтинг составляется на основе опросов и сбора данных: опросы на сайтах изданий «Комсомольской правды» и «Аргументов недели», на сайте медиагруппы ПРЕМИЯ, телефонные опросы клиентов медиагруппы и экспертные опросы специалистов, применение digital-аналитики. По результатам независимого исследования «Диалайн» стал самым популярным волгоградским брендом в 2016 году.


 



 



 


Продвигаем волгоградский бренд №1/4786742_64SoJlJEMEA (700x467, 116Kb)
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод] А вы знаете скорость загрузки вашего сайта с мобильных устройств? Самое время разобраться

Четверг, 23 Марта 2017 г. 13:23 (ссылка)





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



Мобильные телефоны всегда с собой, а более 50% запросов на поиск в Google осуществляются через мобильные устройства. По последним данным Hitwise, более 65% запросов в категориях «Еда и Напитки», «Здоровье» и «Спорт» поступают именно с мобильных устройств.



Обозначения на графике:

Доля запросов с мобильных устройств в общем числе поисков по отраслям:


  • Еда и напитки — 72%

  • Здоровье — 68%

  • Спорт — 68%

  • Новости и СМИ — 64%

  • Образ жизни — 62%

  • Автомобили — 62%

  • Розница — 56%

  • Туризм (не карты) — 52%

  • Недвижимость/ земля — 48%

  • Досуг — 42%

  • Банковские услуги — 39%



Основано на самых популярных вариантах результатов поиска с последующим переходом на соответствующий сектор, 10 апреля 2016 — 7 мая 2016. Источник: Hitwise, подразделение Connectivity.








Вы уже подготовили свой сайт для пользователей мобильных устройств?



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



Скорость мобильного интернета (2G/3G/4G) ниже, чем скорость широкополосной или оптоволоконной сети. То есть, сайт может загружаться быстрее на компьютере, чем на мобильном устройстве.



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



По данным Google известно следующее:


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

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



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



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







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



А теперь перейдем к обзору инструментов.



Список инструментов:





Mobitest



Mobitest от AKAMAI позволяет проверить скорость загрузки сайта с мобильных устройств в следующих городах:


  • Лондон;

  • Бангалор;

  • Кембридж.



Есть возможность выбора из множества устройств: iPhone, Nexus, Galaxy S5, iPad, Kindle Fire HDX и т.д.







Большинство инструментов позволяют выполнить проверку один раз за запуск. Mobitest же может осуществить до трех проверок за цикл.



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







Think with Google



Test My Site от Think with Google не выдает точное время загрузки, но польза в нем есть.

Он осуществляет проверку удобства сайта при просмотре с мобильных устройств по критериям ниже и выдает оценку по стобалльной шкале:


  • соответствие размера контента для области просмотра;

  • настройка области просмотра;

  • размер активных элементов на странице;

  • размер шрифта;

  • наличие плагинов.







Старайтесь набрать не меньше 100 баллов.



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







Оценка определяется на основании следующих факторов:



GTmetrix



GTmetrix — наиболее популярный инструмент измерения скорости загрузки сайта для компьютеров. Если же вы пройдете бесплатную регистрацию, то можно будет выполнять проверку и для мобильных устройств с использованием браузера Chrome.



На настоящий момент при бесплатной регистрации проверка для мобильных браузеров доступна только в Канаде.







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


  • оценка PageSpeed и YSlow;

  • время загрузки;

  • размер страницы;

  • число HTTP-запросов;

  • каскадный график.



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



SynTraffic



SynTraffic осуществляет проверку страницы на мобильных устройствах в следующих регионах:


  • Восточное побережье США;

  • Западное побережье США;

  • Австралия;

  • Западная Европа.



Результаты проверки SynTraffic очень похожи на GTmetrix, отличаются формат и дизайн. Это достойная альтернатива GTmetrix. В результатах проверки содержится следующее:


  • общее число отправленных запросов;

  • балл YSlow;

  • балл PageSpeed;

  • общее время загрузки страницы сайта;

  • % выполненных/неудавшихся запросов;

  • число запросов по домену, типу контента, размеру и времени;

  • каскадные графики.







Dotcom Monitor



На Dotcom Monitor самый широкий выбор регионов проверки: всего их 24.







Dotcom Monitor осуществляет проверку по целому ряду типов устройств, таких как:


  • iPhone

  • iPad

  • Android

  • Nokia Lumia

  • Blackberry.



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







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



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



Если вы еще не пользуетесь услугами CDN, например, MaxCDN, CloudFlare, Incapsula, то пора задуматься. На их сетевой периферии доступен целый ряд вариантов оптимизации работы сайта.



Ну а на HOSTING.cafe вы найдете хостинг и виртуальные серверы для размещения своих проектов.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/324504/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

[Перевод - recovery mode ] 6 нестандартных приемов для улучшения производительности и безопасности сайта

Среда, 15 Февраля 2017 г. 13:43 (ссылка)

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



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



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



Все эти методы вполне приемлемы, но вместе с ними можно использовать и следующие.



Нижеперечисленное подходит для любой платформы, в том числе WordPress, Joomla, Magento, Drupal, Node.js и пр.



Посмотрим, с какими подходами вы уже знакомы, а с какими — нет.







Советы по оптимизации:





Включить IPv6



IPv6 быстрее, чем IPv4. При подключении через IPv6 скорость загрузки LinkedIn в Европе увеличилась на 40%, а Facebook — примерно на 10-15%.



Ознакомимся с графиком перехода на IPv6 по всему миру, подготовленным Google.







Примерно 15% пользователей пользуются Google через IPv6, в свою очередь лишь у 10% сайтов включен IPv6.





По данным Cloudflare сайты, которые работают через IPv6, загружаются на 27% чем те, которые используют IPv4.



А для вашего сайта уже включен IPv6? Если сомневаетесь, проверьте здесь. В случае отрицательного результата вот как это можно сделать.



У большинства CDN-провайдеров, таких как Cloudflare, Incapsula, CacheFly, AKAMAI доступен IPv6. Зайдите в панель инструментов, чтобы включить IPv6.



Чтобы включить IPv6 на Cloudflare, нужно войти во вкладку “Network”.







Если вы не пользуетесь CDN и размещаетесь на виртуальных серверах, например Linode, DigitalOcean, и т.д., то ознакомьтесь с инструкцией включения IPv6 на Nginx и Apache веб-серверах.



С IPv6 хуже не будет. Наоборот, этот способ с легкостью позволит сократить время загрузки страницы примерно на 10%.



Увеличить скорость загрузки с помощью HTTP/2



HTTP/2 — обновленный HTTP-протокол, принятый в 2015 году.







В части производительности с ним связаны следующие преимущества:




  • использование push-технологий на серверной стороне;

  • возможна загрузка элементов страницы одновременно по одному соединению TCP;

  • сжатие заголовков;

  • малая задержка.



HTTP/2 позволит вам оптимизировать доставку контента, загружая несколько элементов страницы одновременно по одному TCP соединению, а также на нем реализован механизм отправки данных по инициативе сервера.



Судя по примеру, HTTP/2 в семь раз быстрее HTTP/1.1. Вы можете ожидать сокращения времени загрузки страницы примерно на 30-40%.



HTTP/2 используют примерно 11% всех сайтов.





Сначала нужно проверить, работает ли ваш сайт на HTTP/2 уже сейчас.



Если нет, то его можно включить на веб-сервере или сетевой периферии. Если вы пользуетесь CDN, например Cloudflare, Incapsula, MaxCDN, KeyCDN и т.д., то включить HTTP/2 можно в панели управления.



Обратите внимание, что HTTP/2 не поддерживается через HTTP (без SSL). Тем не менее, все браузеры уже поддерживают HTTP/2 через HTTPS.



Иными словами, чтобы воспользоваться протоколом HTTP/2 сайт должен быть доступен по протоколу HTTPS (например, https://example.com).



HTTP/2 также поддерживается виртуальными хостингами, например, SiteGround. Если же вы пользуетесь своим сервером, то вам может пригодиться руководство по использованию с Apache, Nginx.



Защитить домен с помощью DNSSEC



Вы получите дополнительный уровень защиты домена, если включите протокол DNSSEC.



Изначально DNS разрабатывали для создания масштабируемых распределённых систем, и вопросами безопасности не руководствовались. DNSSEC добавляет цифровую подпись к DNS-записям и используется для проверки источника запроса — поступил ли он от авторизованного или фальшивого сервера.



Подключить DNSSEC можно у регистратора доменных имен или сервиса, осуществляющего администрирование DNS. Если вы работаете с CloudFlare, то активировать DNSSEC можно во вкладке “DNS”.







Либо вы можете воспользоваться премиум DNS-хостингом от Namecheap, где также реализована поддержка DNSSEC. После того, как вы приняли необходимые меры для защиты DNS-данных с помощью DNSSEC, можно протестировать, работает ли DNSSEC для вашего домена.



Использовать HTTPS (подключить SSL сертификат)



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



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



Блогерам и тем, кто не передает конфиденциальные данные через сайт, подойдут бесплатные SSL сертификаты, например, от Let’s Encrypt.



Если возможно, постарайтесь снять нагрузку по проверке подключения SSL с сетевой периферии, воспользовавшись такими CDN как MaxCDN, CloudFlare, AKAMAI и др.



CloudFlare также предоставляет сертификат SSL в рамках бесплатного пакета услуг. После подключения SSL сертификата не забудьте проверить SSL/TLS-сертификат на уязвимость.



Для тех, кто настроен серьезно (а это в любом случае правильный подход) имеет смысл задуматься о подключении WAF для обеспечения защиты от уязвимостей из списка OWASP Топ-10 и не только.



Использовать HSTS



Дополнительным к HTTPS уровнем защиты может стать HSTS.



Заголовок HSTS дает браузеру инструкции для передачи всех данных только по безопасному каналу (HTTPS), не допускает переход на менее совершенный протокол и предотвращает перехват cookie.



Заголовок HTTP нужно добавить в ответ веб-сервера. Если же вы используете CDN, то необходимо активировать HSTS на сетевой периферии.



Уменьшить размер страницы за счет оптимизации изображений



Средний размер страницы — 2.4 MB, 64% из которых приходится на изображения.







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



Уменьшение размера страницы принесет следующие плюсы:




  • быстрая загрузка страницы;

  • экономия средств на трафике.



Привожу несколько инструментов для оптимизации размера изображений для WordPress, Joomla.



Пользователи Cloudflare Pro могут воспользоваться новым форматом изображений под названием «WebP».



Размер изображений в формате WebP более чем на 10% меньше уже оптимизированных файлов в формате PNG или JPEG.



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



HOSTING.cafe предлагает Вам найти виртуальные серверы или хостинг, а также SSL сертификаты для Ваших проектов.
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/321390/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Как я сделал самый быстрый сайт в Тайланде

Суббота, 21 Января 2017 г. 20:18 (ссылка)

image



Предисловие



Заняться этим проектом и написать эту статью вдохновил меня "молодой и шутливый человек который ускорял страницу с reactjs". Если кто-то помнит нашумевшую в своей время статью от сайта pingdom.com, о том что "Страницы в интернете прилично обросли жиром" их вывод складывался к тому, что раньше к весу страницы в основном добавляли изображения, теперь к этому "жиру" накинули и JavaScript. Страница шутливого молодого человека не дает особой практической пользы — больше разминка для его мозгов. Я же решил помочь своей девушке с продажей самого популярного продукта из ее ассортимента.





Я уже и раньше пытался делать крайне минималистичные сайты, но такие проекты были вызваны желаниям выйти за рамки традиционных фреймворков и возможность закончить проект быстрее. Такой подход достаточно популярен и среди моих друзей — популярность KISS (Keep It Simple, Stupid) дает свои плоды. Будучи в основном бэкенд программистом — я много времени провожу с оптимизацией кода на стороне сервера и уже на практике понял как это важно не делать такие изменения в слепую, а подкреплять их метрикой.



Подготовка



Фронт-енд фреймворк



Я не фронт-енд программист и поэтому мне приходится полагаться на фронт-енд фреймворки. Чаще всего это означает bootstrap со всем "его добром", и хотя bootstrap компоненты можно использовать селективно, это все равно означает что я притащу с собой как минимум jQuery. Я был не уверен что мне нужен jQuery, я видел уже достаточно native-javascript библиотек которые работают без Jquery. Размер бутстрапа и его компонент тоже меня не устраивал, мне всегда казалось что он "стилизует" чуть больше чем нужно.



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





Можете так же найти и другие фреймворки, например, тут — https://github.com/neiesc/ListOfMinimalistFrameworks



Я выбрал фрейворк base. Большинство из причин глубокого личные:




  1. Я уже работал с преведущей версией этого фрейвморка

  2. Мне казалось что javascript компоненты мне не нужны, а если нужны то я бы хотел их выбрать сам. Base — чисто css фреймворк.

  3. Использует gulp как билд тул. О котором я слышал много хорошего, некоторые умельцы даже пытались его интегрировать в рельсу (с которой я часто имею дело).

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



Поэтому я не буду рекомендовать только Base, а выдал вам сразу целый список. Но я должен оговориться, что можно начать еще более минималистично, только с grid system — sussy grid, например.



Хостинг



Я не собирался делать динамический контент. И хоть казалось бы логичным сделать форму для покупки, большинство тайских магазинов что я видел избегали этого. Форма для покупки еще усложняется тем, что их бы пришлось интегрировать с банками, а в Тайланде нету четких лидеров в сфере банкинка. Их больше 10 и все они более или менее пользуются спросом, даже среди моих друзей иностранцев\тайцев выбор банка крайне разнится. Очень много покупок делается непосредственно через интернет банки и мессенджер line. Поэтому я решил не ломать привычных паттернов, темболее это крайне упрощает мою задачу.



Мне нужен хостинг только для статического контента. Самым популярным выбором тут является github pages и AWS. Я побоялся использовать github pages из-за (ограничений по трафику)[https://www.quora.com/What-are-bandwidth-and-traffic-limits-for-GitHub-pages/answer/Rachel-Berry-9], а AWS мне показался не самым дешевым решением (по моим крайне грубым оценкам около 4 баксов в месяц). У меня уже было три сайта, которые крутятся на nearlyfreespeech.org — и десяти баксов хватило на них чтобы они работали больше года. Дешевле не всегда значит лучше, но в этом случае я уже имел опыт и никаких нареканий у меня нету.



Метрика



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



gtmetrix.com — Я выбрал как основной тул для измерения "скорости" моего сайта. Он в себя включал два самых популярных тула google page speed и yslow. Оказалось, что оригинальный page speed все таки нашел чуть больше ошибок. Это привело меня к выводу, что полагаться на 100 процентный показатель в gtmetrix и схожие тулы — возможно не самая лучшая идея, это же скриптованая проверка на "самые популярные" ошибки. Вы всегда можете пойти дальше.



Оптимизация



Gzip



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



    var gzip = require('gulp-gzip');

gulp.task('gzip', function (){
return gulp.src('./public//**/*.+(js|css|html)')
.pipe(gzip())
.pipe(gulp.dest('./public/'))
});


И так же быстро набросал .htaccess файл, который подсовывает броузеру архивированый файл.



    Header add Vary accept-encoding
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [L]


Мне так же пришлось копировать этот файл в билд папочку, без особых изменений. Это оказалось еще проще:



    gulp.task('htaccess', function () {
return gulp.src('./src/**/.htaccess')
.pipe(gulp.dest('./public/'));
});


Так же, пришлось обновить и build таск



    gulp.task('build', function() {
runSequence('clean', 'sass', 'build-img', 'jsmin', 'inlinesource', 'htaccess', 'gzip');
});


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



Кэширование



Менее тривиальной оказалась задача по указыванию заголовков для кэширования. С AWS эти уже автоматизировано. Я пытался вспомнить когда я это делал последний раз, но так и не вспомнил когда. Поэтому с помощью магической силы гугла, пару попыток я все-таки сделал что-то 100% приеемлемое для gtmetrix.



    
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 2 month"
ExpiresByType application/javascript "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/icon "access plus 1 year"
ExpiresByType application/ico "access plus 12 month"
ExpiresDefault "access plus 2 days"


Но чтобы избежать двух попыток, я бы рекомендовал воспользоваться темплейтом для сервера из проекта html5-boilerplate. Я в следующий раз обязательно это сделаю :)



Изображения



Для человека у которого нету Photoshop'a на компьютере — работа с изображениями это большая попаболь. Половина проблем с изображениеми было решено за меня за счет того что я выбрал готовый темплейт — мне не пришлось возиться с спрайтами, векторами. Но это не решило всех моих проблем — мне нужны были другие иконки и другие изображения.




  1. Правильный выбор формата для изображений

    Я сделал самую грубую ошибку из тех ошибок что можно сделать. Я выбрал .png как формат по умолчанию для изображений, у меня было представление что png оптимизирован для веба. На самом деле для изображений насыщенных цветами (как например фото) — jpeg все-таки остается лучшим форматом, я оставил png для иконок.



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




  1. Компрессия без потерь

    Как человек с инженерным образованием, я знаю цену специализированным инструментам. Они очень часто облегчают работу больше чем one-fits-all инструмент. Можно программировать на notepad'e, но чаще становится нашим основным рабочим инструментом — sublime text, rubymine. В данном случае imageoptim хорош, но не достаточно хорош. Так как у меня было много jpeg файлов, я нашел сравнительный анализ лослесс сжатий — выйграл jpegtran.



в gulp это оказалось очень просто:



var jpegtran = require('imagemin-jpegtran');

gulp.task('build-jpg', function () {
gulp.src('./src/img/*.+(jpg|jpeg)')
.pipe(jpegtran({ progressive: true })())
.pipe(gulp.dest('./public/img'));
});



  1. Играемся с оптимизацией цветов в jpeg

    Но выбором только правильного формата все не окончилось. Изображения все-равно были слишком большие. Мой hero background занимал больше половины мегабайта.



image

У меня нету photoshop'a, а что без него тут делать я не очень понимал. Но друзья подсобили и посоветовали отличный проект TinyJpg — все оказалось слишком просто.



CSS



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



Я скорее так бы и сделал, если бы использовал bootstrap. Но так как я использовал менее распространеный base и не очень то ожидал что пользовали будут возвращаться на мой сайт — то я решил удалить лишний http запрос.



В gulp это оказалось как обычно проще всего:





Fonts



Интересная и неожиданная ситуация для меня сложилось с Google Fonts, в темплейте было использовано два разных фонта. И вроде даже разумно оптимизированы:




  1. Они загружались за один http запрос

  2. Использовал WebFontLoader, который асинхронно загружал фонты и рендерил страницу после загрузки.



Но gtmetrix продолжал ругаться на фонты — у них небыло cache headers. Я решил пойти по пути уже предложенному в статье на которую я ссылался в начале и избавился от google fonts. во всех девайсах есть вполне приличные встроеные фонты. Поэтому я оставил вот такой вот набор:



font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;


Выводы



Вот такой вот получился вебсайт — http://euphorbia.soihok.com/

А вот последнии метрики с gtmetrix — https://gtmetrix.com/reports/euphorbia.soihok.com/zhMn6OhU



Как утверждают многие СЕОшники — быстрый сайт дает бонусы в гугле. Я если честно на это надеялся, но не проверял. Поэтому здесь мне метриками крыть не получится.



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



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



Желаю быстрых сайтов всем нам!



* "самый быстрый сайт в Тайланде" — это мой "кричащий" заголовок, я не берусь это утверждать со 100% уверенностью. Но большинство сайтов что я видел в Тайланде — не самые быстрые.


Original source: habrahabr.ru.

https://habrahabr.ru/post/319542/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Анимации на GPU: делаем это правильно

Пятница, 09 Декабря 2016 г. 18:22 (ссылка)

Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.



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



One big disclaimer



Самое важное, что хочется сказать прежде, чем мы приступим к изучению деталей GPU-композиции: это всё один огромный хак. Вы не найдёте в спецификациях W3C (по крайней мере пока) описания процесса GPU-композиции, способов явного переноса элемента на отдельный слой или даже самого режима композиции. Это всего лишь способ ускорить некоторые типовые задачи и каждый разработчик браузеров делает это по-своему. Всё, что вы прочитаете в этой статье — ни в коем случае не официальное объяснение, а результаты экспериментов и наблюдений, приправленных здравым смыслом и знаниями о работе некоторых подсистем браузера. Что-то может оказаться неправдой, а что-то изменится со временем — я вас предупредил!



Как работает композиция



Чтобы правильно подготовить страницу к GPU-анимации, очень важно не столько следовать советам, найденным интернете или в этой статье, сколько понимать, как это работает внутри браузера.



Предположим, у нас есть страница с элементами A и B, у которых указано position: absolute и разный z-index. Браузер отрисует всю страницу на CPU, отправит полученное изображение на GPU, а оттуда оно попадёт к нам на экран.




A

B


example 1



Мы решили анимировать перемещение элемента A через CSS-свойство left c помощью CSS Animations:




A

B


example 1-2



В этом случае на каждый кадр анимации браузер со стороны CPU пересчитывает геометрию элементов (reflow), отрисовывает новое изображение с актуальным состоянием страницы (repaint), так же отправляет его на GPU, после чего оно отображается на экране. Мы знаем, что repaint — довольно дорогая операция, однако все современные браузеры достаточно умны, чтобы перерисовывать не всё изображение целиком, а только изменившиеся части. И делают они это достаточно быстро, но анимациям всё равно не хватает плавности.



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



Чтобы применить оптимизацию с композицией, браузер должен быть уверен, что анимируемые CSS-свойства:




  1. никак не влияют на поток документа;

  2. никак не зависят от потока документа;

  3. не потребуют перерисовки самого элемента.



Со стороны может показаться, что свойства top и left вместе с position: absolute/fixed не зависят от внешних факторов, но это не так. Например, свойство left может принимать значения в процентах, которые зависят от размера .offsetParent, а также единицы em, vh и т.д., которые зависят от окружения. Поэтому именно CSS-свойства transform и opacity подходят под описание.



Переделаем нашу анимацию: вместо left будем анимировать transform:




A

B


Обратите внимание на код. Мы декларативно описали всю анимацию: её начало, конец, длительность и т.д. А это позволяет браузеру ещё до начала анимации определить, какие именно CSS-свойства элемента будут меняться. Увидев, что среди этих свойств нет тех, что влияют на reflow/repaint, браузер может применить оптимизацию с композицией: нарисовать два изображения и передать их GPU.



example 2



Преимущества такой оптимизации:




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

  • Анимация не зависит от CPU: даже если в этот момент мы будем выполнять очень интенсивные вычисления, анимация попрежнему будет плавной, так как выполняется полностью на GPU.



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






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



Чтобы лучше понять это, просто вспомните AJAX. Например, вам нужно зарегистрировать пользователя по данным, которые он ввёл в форме авторизации. Вы не можете сказать удалённому серверу «эй, возьми данные из вот этих полей и ещё вон ту переменную и сохрани их в базе», потому что у сервера нет доступа к памяти браузера. Вместо этого вы собираете необходимые данные со страницы в некую полезную нагрузку с простым форматом данных (например, JSON) и отправляете её на сервер.



То же самое происходит и во время композиции. Так как GPU, по сути, является удалённым сервером, браузер со стороны CPU вынужден сначала подготовить специальную полезную нагрузку, а затем отправить её на устройство. Да, GPU находится совсем рядом c CPU, однако если 2 секунды на отправку и получение ответа через AJAX зачастую являются вполне приемлемыми, то лишние 3–5 миллисекунд на передачу данных на GPU могут серьёзно ухудшить качество анимации.



Что из себя представляет полезная нагрузка для GPU? Как правило, это изображения слоёв и дополнительные инструкции, которые определяют размеры слоёв, их расположение друг относительно друга, инструкции для анимации и т.д. Вот как приблизительно выглядит процесс создания нагрузки и её передачи на GPU:




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

  • Подготовка данных о слоях (расположение, размер, прозрачность и т.д.).

  • Подготовка шейдеров для анимации (если используется CSS Transitions или Animations).

  • Отправка данных на GPU.



Таким образом, каждый раз, когда вы добавляете магическое transform: translateZ(0) или will-change: transform элементу, вы запускаете весь это процесс. Вы уже знаете, что repaint является достаточно ресурсоёмкой задачей. Но в данном случае всё ещё хуже: довольно часто браузер не может применить инкрементальный repaint и перерисовать только изменившуюся часть. Он должен заново отрисовать те части, которые были скрыты новым слоем:



example 3



Неявная композиция



Давайте вернёмся к нашему примеру с элементами A и B. Ранее мы анимировали элемент A, который находится поверх всех остальных элементов на странице. В результате получили композицию из двух слоёв: слой с A и слой с B и фоном страницы.



А теперь поменяем задачу: будем анимировать элемент B



example 4



…и у нас возникает логическая проблема. Элемент B должен быть на отдельном композитном слое, финальная композиция изображения, которое увидит пользователь, происходит на GPU. Но элемент A, который мы вообще никак не трогаем, визуально должен находиться поверх элемента B.



Вспоминаем One Big Disclaimer — в CSS нет специального режима для GPU-композиции, это просто оптимизация для решения специфических задач. Мы должны получить элементы A и B именно в том порядке, который был задан через z-index. Как в этом случае должен поступить браузер?



Совершенно верно: он перенесёт элемент A на отдельный композитный слой! Добавив тем самым ещё один тяжёлый repaint:



example 4-2



Это называется неявная композиция: один или несколько не-композитных элементов, которые по z-index находятся выше композитного элемента, также становятся композитными, то есть отрисовываются в отдельное изображение, которое затем отправляется на GPU.

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




  • 3D-трансформации: translate3d, translateZ и т.д.

  • Элементы , , .

  • Анимация transform и opacity через Element.animate().

  • Анимация transform и opacity через СSS Transitions и Animations.

  • position: fixed.

  • will-change.

  • filter.



Подробнее можете посмотреть в файле CompositingReasons.h проекта Chromium.



На первый взгляд может показаться, что главная проблема у GPU-анимаций — неожиданные тяжёлые repaint. Но это не так. Самой большой проблемой является…



Потребление памяти



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



Сколько весит изображение одного слоя? Давайте рассмотрим пример. Попробуйте угадать размер обычного прямоугольника, размером 320x240, залитого сплошным цветом #ff0000.



rect



Обычно веб-разработчики думают так: «это одноцветное изображение… сохраню-ка я его в PNG и проверю размер, должен быть меньше килобайта». И будут правы: это изображение действительно весит всего 104 байта в PNG.



Но проблема в том, что PNG (как и JPEG, GIF и т.д.) — это формат хранения и передачи данных. Чтобы отрисовать такое изображение на экране, компьютер должен распаковать его и представить в виде массива пикселей. Таким образом, наше изображение в памяти компьютера будет занимать 320x240x3 = 230 400 байт. То есть мы умножаем ширину изображения на его высоту — так мы получим количество пикселей. Затем количество пикселей умножаем на 3, так как цвет каждого пикселя описывается 3-мя байтами: RGB. Если бы изображение было полупрозрачным, мы бы умножили на 4, так как нужен ещё один байт для описания значения прозрачности (RGBA): 320x240x4 = 307 200 байт.



Браузер всегда отрисовывает композитные слои в RGBA-изображения: судя по всему, нет достаточно быстрого и эффективного способа автоматически определить, есть ли у отрисовываемого DOM-элемента прозрачные области.



Рассмотрим типичный пример: карусель из 10 фотографий размером 800x600. Вы решили сделать плавную смену изображений в карусели, поэтому заранее каждой фотографии указали will-change: transform, а потом с помощью JS анимируете переходы на действие пользователя, например, перетаскивание. Посчитаем, сколько дополнительной памяти потребуется, чтобы просто отобразить такую страницу: 800x600x4 x 10

https://habrahabr.ru/post/313978/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Старника

Как создать и раскрутить сайт

Вторник, 01 Ноября 2016 г. 22:19 (ссылка)

В современном мире без интернета никуда. Всемирная паутина помогает приобрести полезные знакомства для бизнеса, выгодно продать или купить товар, встретить любовь всей своей жизни, а также найти друзей по интересам. По одежке встречают человека в реальной жизни, в виртуальном же мире главным показателем является качественный сайт. Эстетически привлекательный дизайн, удобный интерфейс, грамотно подобранный контент - помогут привлечь читателей и громко заявить о себе в поисковых системах.
Самостоятельно создать и популяризировать сайт достаточно затруднительное, зачастую финансово невыгодное дело. Для того чтобы не тратить время попусту, а достигнуть желаемого результата в кротчайшие сроки и с минимальными затратами, необходимо обратится за помощью к профессионалам. SITEPARK - веб студия дизайна, которая более 10 лет успешно создает уникальные и популярные интернет проекты. Создание корпоративных сайтов, интернет-магазинов под ключ; продвижение сайта до выхода в ТОП 10 поисковых систем, техническая поддержка и обслуживание сайтов - неполный перечень услуг, предоставляемых командой специалистов для выгодного ведения бизнеса в сети интернет.
Расскажите о своих товарах и/или услугах интернет пользователям в выгодном свете - создавайте действительно качественные и полезные сайты, которые будут работать на Ваш имидж.
Превью разработка веб-сайта (700x565, 399Kb)Превью создание интернет магазина (700x565, 335Kb)Превью создание сайта РїРѕРґ ключ (700x565, 194Kb)

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_desert_man

Заказ на раскрутка сайта Одесса

Среда, 14 Сентября 2016 г. 14:57 (ссылка)

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

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

http://desert-man.org.ua/post398099076/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Desert_Man

Заказ на раскрутка сайта Одесса

Среда, 14 Сентября 2016 г. 14:57 (ссылка)


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



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




Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Redza

Правила внутренней оптимизации сайта

Понедельник, 25 Июля 2016 г. 13:45 (ссылка)


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



Правила внутренней оптимизации сайта
Метки:   Комментарии (1)КомментироватьВ цитатник или сообщество
ONVOLGA

Почему long tail ключевые слова так важны для SEO?

Вторник, 19 Июля 2016 г. 10:24 (ссылка)

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

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

О том, какие преимущества дает использование long tail ключевых слов для SEO (оптимизации электронного ресурса для поисковых систем) читайте в нашей статье.

long_tile (699x463, 170Kb)

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Mirabelika

КАК ЗАРАБОТАТЬ НА ЛИРУ. РОТАПОСТ, БЛОГОКЭШ - РЕКЛАМА В БЛОГАХ. Rotapost.-2

Суббота, 16 Июля 2016 г. 13:36 (ссылка)
liveinternet.ru/users/irina...275707903/


КАК ЗАРАБОТАТЬ НА ЛИРУ. РОТАПОСТ, БЛОГОКЭШ - РЕКЛАМА В БЛОГАХ. Rotapost.





Свершилось. Я смогла зарегистрироваться в очередной ссылочной бирже - РОТАПОСТ (Rotapost) http://www.rotapost.ru/?a=nidopy  .



 



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

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Mirabelika

Как узнать показатели ТИЦ и PR для сайта или блога?

Суббота, 16 Июля 2016 г. 13:26 (ссылка)
florsita.ru/post149051204/


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

 

 

 

 

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

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

Следующие 30  »

<оптимизация сайта - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda