Moved box after css optimization

ok, can you disable “inline & defer” and “optimize HTML” for a second?

if you add this code as custom CSS (appearance -> customize -> custom css) it’ll probably be fixed;

#sidebar {box-sizing:content-box}

(you might have to add the important flag though; #sidebar {box-sizing:content-box !important;})

frank

Yes! It solves the problem, for other users that found this thread, I need to say that after the change I need to clear the cache of other plugin in my case WP Super cache.

Now I have another problem, my google map not show at (the problem is only in firefox and Edge…)

https://escolabressolargenins.com/contacte/

And I have Optimize JavaScript Code, disabled (I don’t know but I’m obtaining less note at google pagespeed with Optimize Javascript enabled).

When I disable and clear cache of autoptimize, I can see the google map, when I enable css optimization, I can’t see it….

I have the option Inline and defer whit this code:

@charset “utf-8”;

html,
body,
div,
span,
iframe,
h1,
p,
a,
img,
ul,
li,
nav {
margin: 0px;
padding: 0px;
border: 0px;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: inherit;
vertical-align: baseline;
}

nav {
display: block;
}

a {
text-decoration: none;
-webkit-transform: translateZ(0px);
outline: rgb(0, 0, 0);
}

ul {
list-style: none;
-webkit-transform: translateZ(0px);
}

a,
span,
h1,
li {
-webkit-transform: translateZ(0px);
}

*,
::before,
::after {
box-sizing: content-box;
}

.shortcodes *,
.shortcodes ::before,
.shortcodes ::after {
box-sizing: border-box;
}

body {
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/img/pattern.png);
background-position: 0% 0%;
background-repeat: repeat repeat;
}

#container {
width: 100%;
max-width: 1024px;
margin: 50px auto 60px;
clear: both;
background-color: rgb(255, 255, 255);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden;
}

.wrapper {
width: 100%;
max-width: 890px;
margin: 0px auto;
clear: both;
}

.zindex {
position: relative;
z-index: 100;
}

.left {
float: left;
}

.right {
float: right;
}

h1 {
color: rgb(93, 93, 93);
font-size: 46px;
font-family: ‘Medula One’, Helvetica, Arial;
line-height: 47px;
}

.header {
width: 100%;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-header.jpg);
background-position: 0% 0%;
background-repeat: repeat repeat;
}

.head-parallax {
position: relative;
width: 1024px;
height: 200px;
}

.bg-header-shadow {
width: 100%;
padding: 55px 0px 65px;
}

.logo {
margin-top: 5px;
}

.logo img,
.logo a {
float: left;
}

.bg-menu {
width: auto;
}

.bg-menu-left {
width: 30px;
height: 88px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-menu-left.png);
background-position: 0% 0%;
background-repeat: no-repeat no-repeat;
}

.bg-menu-right {
width: 27px;
height: 88px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-menu-right.png);
background-position: 0% 0%;
background-repeat: no-repeat no-repeat;
}

.bg-menu nav {
float: left;
width: auto;
height: 88px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-menu-center.png);
background-position: 0% 0%;
background-repeat: repeat no-repeat;
}

.bg-menu nav ul {
float: left;
width: 100%;
margin: 29px 20px 0px;
}

.bg-menu nav ul li {
float: left;
width: auto;
margin-right: 15px;
}

.bg-menu nav ul li a:link,
.bg-menu nav ul li a:visited {
display: block;
color: rgb(255, 255, 255);
font-size: 10px;
font-family: Helvetica;
padding: 0px;
float: left;
}

.bg-menu nav ul li a:link,
.bg-menu nav ul li a:visited {
display: block;
color: rgb(255, 255, 255);
font-size: 26px;
font-family: ‘Medula One’;
padding: 0px;
float: left;
}

nav ul li .bullet {
float: left;
margin: 7px 9px 0px 0px;
width: 12px;
height: 13px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/img/menu-star.png);
background-position: initial initial;
background-repeat: no-repeat no-repeat;
}

nav ul li ul .bullet {
width: 0px !important;
height: 0px !important;
float: none !important;
background-image: none !important;
background-position: initial initial !important;
background-repeat: initial initial !important;
}

nav ul li ul a {
float: none !important;
}

.blue-page {
width: 100%;
margin: -10px 0px 0px;
}

.bg-blue-top {
width: 100%;
height: 18px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-blue-top.png);
margin: 31px 0px 0px;
position: absolute;
bottom: 0px;
z-index: 10;
background-position: 0% 0%;
background-repeat: repeat no-repeat;
}

.bg-blue-down {
width: 100%;
height: 18px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-blue-down.png);
position: relative;
z-index: 9;
background-position: 0% 0%;
background-repeat: repeat no-repeat;
}

.bg-blue-center-title {
width: 100%;
padding: 45px 0px 30px;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-blue-center.png);
background-position: 0% 0%;
background-repeat: repeat repeat;
}

.content {
width: 100%;
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/style/../style/img/bg-content.jpg);
margin-top: -10px;
padding: 60px 0px 30px;
background-position: 0% 0%;
background-repeat: repeat repeat;
}

.content-left {
width: 100%;
}

.blog-one-single {
width: 100%;
}

.parallax-viewport {
position: absolute;
overflow: hidden;
width: 1024px;
height: 200px;
margin: 0px !important;
}

.parallax-layer {
position: absolute;
}

.tooltip {
opacity: 0;
display: none;
margin: -60px 0px 0px -1.6%;
position: absolute;
}

.tooltip p {
color: rgb(255, 255, 255);
font-size: 12px;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
padding: 4px 19px 0px;
height: 19px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: rgb(255, 117, 74);
}

.back1 {
position: absolute;
bottom: -15px;
left: 39%;
width: 0px;
height: 0px;
border-color: rgb(255, 117, 74) transparent transparent;
border-width: 10px;
border-style: solid;
}

.facebook-tool {
margin-left: -30px;
}

.google-tool {
margin-left: -35px;
width: 104px;
}

.shortcodes {
width: 100%;
}

.shortcodes {
float: left;
width: 100%;
color: rgb(93, 93, 93);
font-size: 15px;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
line-height: 21px;
padding: 0px 0px 30px;
}

.shortcodes h1 {
float: left;
width: 100%;
margin-bottom: 15px;
color: rgb(93, 93, 93);
font-size: 46px;
font-family: ‘Medula One’, cursive;
line-height: 48px;
}

.shortcodes img {
max-width: 100%;
height: auto;
}

.title-pages {
width: 100%;
color: rgb(255, 255, 255);
font-size: 66px;
font-family: ‘Medula One’, cursive;
line-height: 38px;
text-align: center;
}

.full-pages {
width: 100%;
margin-bottom: 50px;
}

.contact-text {
width: 100%;
}

.aligncenter {
display: block;
margin: 5px auto;
}

.aligncenter {
display: block;
margin: 5px auto;
}

@media screen and (max-width: 1100px) and (min-width: 911px) {
#container {
width: 870px;
}

.wrapper {
width: 810px;
}

.content {
padding: 40px 0px 30px;
}

.bg-menu nav ul li a:link,
.bg-menu nav ul li a:visited {
font-size: 24px;
}

nav ul li .bullet {
margin: 7px 4px 0px 0px;
}

.head-parallax {
width: 870px;
}

.parallax-viewport {
width: 870px;
}

.parallax-layer {
display: none;
}
}

@media screen and (max-width: 910px) and (min-width: 601px) {
#container {
width: 600px;
}

.wrapper {
width: 520px;
}

.bg-menu nav ul {
display: none;
}

.head-parallax {
width: 600px;
}

.parallax-viewport {
width: 600px;
}

.parallax-layer {
display: none;
}
}

@media only screen and (max-width: 600px) and (min-width: 460px) {
#container {
width: 360px;
}

.wrapper {
width: 270px;
}

.logo {
width: 100%;
text-align: center;
}

.logo img,
.logo a {
float: none;
width: auto;
}

.bg-menu nav ul {
display: none;
}

.bg-menu {
width: 100%;
margin-top: 30px;
}

.bg-menu nav {
width: 213px;
text-align: center;
}

.head-parallax {
width: 360px;
height: 320px;
}

.parallax-viewport {
width: 360px;
height: 320px;
}

.blue-page {
margin: 0px;
position: relative;
z-index: 99;
}

.bg-blue-top {
z-index: 100;
}

.parallax-viewport li img {
margin: 50px 0px 0px;
}

.parallax-layer {
display: none;
}

.title-pages {
line-height: 66px;
}
}

@media only screen and (max-width: 459px) {
#container {
width: 320px;
}

.wrapper {
width: 270px;
}

.logo {
width: 100%;
text-align: center;
}

.logo img,
.logo a {
float: none;
width: auto;
}

.bg-menu nav ul {
display: none;
}

.bg-menu {
width: 100%;
margin-top: 30px;
}

.bg-menu nav {
width: 213px;
text-align: center;
}

.head-parallax {
width: 320px;
height: 294px;
}

.parallax-viewport {
width: 320px;
height: 320px;
}

.blue-page {
margin: 0px;
position: relative;
z-index: 99;
}

.bg-blue-top {
z-index: 100;
}

.parallax-viewport li img {
margin: 50px 0px 0px;
}

.bg-header-shadow {
padding: 35px 0px 65px;
}

#container {
margin: 0px auto;
}

.parallax-layer {
display: none;
}
}

.icons .single-soc-share-link span:not(.counter) {
display: none;
}

*,
::before,
::after {
box-sizing: border-box;
}

.sf-menu,
.sf-menu * {
list-style: none;
}

.sf-menu {
line-height: 1;
}

.sf-menu ul {
position: absolute;
top: -999em;
width: 10em;
}

.sf-menu ul li {
width: 100%;
}

.sf-menu li {
float: left;
position: relative;
}

.sf-menu a {
display: block;
position: relative;
}

.sf-menu {
float: left;
margin-bottom: 1px;
}

.sf-menu a {
padding: 0.75em 1em;
text-decoration: none;
}

.sf-menu li li {
float: left;
margin: 0px;
width: 100% !important;
border: none !important;
padding: 0px !important;
}

.sub-menu li a {
width: auto;
padding: 0px !important;
font-size: 22px !important;
background-image: none !important;
color: rgb(255, 255, 255) !important;
background-position: initial initial !important;
background-repeat: initial initial !important;
}

.sub-menu > li:last-child a {
border: none;
}

.sub-menu li a {
margin: 1px 8px;
display: block !important;
padding: 6px 8px 12px !important;
color: rgb(255, 255, 255) !important;
}

.sub-menu li {
margin-left: 0px;
padding-left: 0px;
}

.sub-menu li:last-child {
margin: 0px 0px 5px;
}

.sub-menu .sub-menu {
margin: 32px 0px 0px 10px !important;
}

.sf-menu .sub-menu {
padding: 25px 6px 0px !important;
width: 167px !important;
margin: -16px 0px 0px !important;
}

.sub-menu .sub-menu {
margin: 15px 0px 0px 5px !important;
}

.sub-menu .menu-item {
background-image: url(//escolabressolargenins.com/wp-content/themes/dreamy/script/menu/img/nav-center.png);
background-position: initial initial;
background-repeat: no-repeat repeat;
}

body {
background-color: rgb(205, 233, 247);
background-attachment: fixed;
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/pattern.png);
background-position: 0% 0%;
background-repeat: repeat repeat;
}

.bg-menu-left {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-left-blue.png);
background-position: initial initial;
background-repeat: no-repeat no-repeat;
}

.bg-menu nav {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-center-blue.png);
background-position: initial initial;
background-repeat: repeat no-repeat;
}

.bg-menu-right {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-menu-right-blue.png);
background-position: initial initial;
background-repeat: no-repeat no-repeat;
}

.bg-blue-center-title {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-center.png);
background-position: 0% 0%;
background-repeat: repeat repeat;
}

.bg-blue-top {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-top.png);
background-position: 0% 0%;
background-repeat: repeat no-repeat;
}

.bg-blue-down {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/style/img/bg-blue-down.png);
background-position: 0% 0%;
background-repeat: repeat no-repeat;
}

.sub-menu .menu-item {
background-image: url(https://escolabressolargenins.com/wp-content/themes/dreamy/script/menu/img/nav-center-blue.png) !important;
background-position: initial initial !important;
background-repeat: no-repeat repeat !important;
}

body {
color: rgb(32, 32, 32);
}

With inline all css, works ok, with inline and defer I can’t see the map.

More info, I can see my flag on the map, and I can move, but I can’t see the backgroud, streets, etc….

just tested in Firefox and the gMap loaded, also seems to work in this webpagetest.org’s test (cfr. screenshot)? maybe only a problem for logged in users?

True, I tried with firefox and now are working, maybe any type of cache….but still failing in Edge and Explorer…

https://www.webpagetest.org/result/170628_1S_11G3/

https://www.webpagetest.org/result/170628_XS_11K7/

darn, closed my Windows7 work PC half an hour ago and am off for 10d now, so can’t look into that.

what you could do is exclude that specific page from Autoptimization, using a code snippet like this one;

add_filter('autoptimize_filter_noptimize','isiarj_noptimize',10,0);
function isiarj_noptimize() {
	if (strpos($_SERVER['REQUEST_URI'],'contacte')!==false) {
		return true;
	} else {
		return false;
	}
}

Sorry, but, where I need to put this code? in the css and defer window?

In “inline & defer” would not work as this is PHP-code, not CSS. The easiest (safest most end-user friendly) would be using the code snippets plugin @isiarj20

I added to functions.php (as I found on google), I have another question, but I don’t know if it’s better to open another thread… tell me and I do.

You know why I’m obtaining less page speed insights punctuation with java optimization activated, if I’m obtaining less errors? When java optimization deactivated, I receive about 15 errors that says, optimiza xxx.js yyy.js and zzz.js, with java optimization activated I can see only 1 js error on autoptimize12903485173204571240.js file but with less result, about 5-10 points less.

hmm … first of all; I’m not that much into pagespeed, as it’s “just” an attempt to quantify (or gamify) the degree in which best performance practices are followed. In my optimization jobs I focus on “load time” in seconds as measured by e.g. https://webpagetest.org.

now regarding the lower pagespeed score; you’re “forcing JS in head”, which is making it render blocking. untick that option (and troubleshoot any issue that might create) and you score will be better ??