Рубрика: Верстка

Как получить 100/100 Google PageSpeed Insights и не подать виду

Один из заказчиков попросил меня немного причесать сайт, заодно прописать цели для Яндекс.Метрики и Google Analytics. Между делом он рассказал мне, что предыдущим «оптимизаторам» удалось разогнать сайт до 100 баллов в PageSpeed Insight, мол, работа по оптимизации была долгая и значение упорно не хотело расти, но однажды подскочило до 100 и на этом закончили.

Я был немного удивлен услышанным, т.к. это был сайт на Joomla на бюджетном шаред-хостинге, с косяками адаптивной версии, неоптимизированными прозрачными PNG-шками по несколько мегабайт весом. В перерыве между работой ради интереса решил замерить баллы, правда через встроенный в Google Chrome Lighthouse.

Читать далее Как получить 100/100 Google PageSpeed Insights и не подать виду

Странный border-radius webkit’а.

Работал над проектом и заметил такую интересную особенность отображения border-radius’а в Safari.

Белые окантовки в скруглениях появляются на темном фоне, на светлых же они не заметны и я до этого никогда не придавал этому значения.

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

Нужно прописать для элемента следующее:

-webkit-background-clip: padding-box;

Если border-radius > 18px, то окантовка все равно вылезет, но уже не так заметно.