CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Laden van JS en CSS
https://forum.cmsmadesimple.org/viewtopic.php?f=13&t=77947
Page 3 of 3

Author:  Gregor [ Thu Apr 05, 2018 5:14 am ]
Post subject:  Re: Laden van JS en CSS

Als ik een test doe via Google insight https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.uisge-beatha.eu%2F2018%2F03%2FExpansietank-installeren&tab=desktop, dan krijg ik o.a. de volgende melding:
Quote:
JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen
Je pagina heeft 3 blokkerende CSS-bronnen. Dit veroorzaakt vertraging bij het weergeven van je pagina.
Ongeveer 5% van de content boven de vouw op je pagina kan worden weergegeven zonder te wachten totdat de volgende bronnen zijn geladen. Probeer blokkerende bronnen uit te stellen of asynchroon te laden of parseer de essentiële gedeelten van die bronnen rechtstreeks in de HTML.
Optimaliseer de CSS-weergave voor de volgende URL's:
https://www.uisge-beatha.eu/…ned_afc0e3a02d494a1cf03907dada2b156f.css
https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css
https://www.uisge-beatha.eu/…ned_ab14e6a5e365ae650dab8519f56858d4.css

Wat zou ik dan kunnen doen om deze 'blokkerende' bronnen op te lossen?

@Rolf: ik zou met een A-score en 100% meer dan tevreden zijn :)

Author:  arnoud [ Sun Apr 08, 2018 8:06 am ]
Post subject:  Re: Laden van JS en CSS

Icomoon in het verleden ook wel eens gebruikt. Als je geen externe site wilt gebruiken (in eigen beheer met versie controle): https://www.npmjs.com/package/gulp-iconfont

Voor iconfonts en webfonts is een font-loader ook nog een optimalisatie: https://github.com/bramstein/fontloader

Een svg sprite techniek maakt geen gebruik van fonts maar 1 svg afbeelding waar alle icoontjes in zitten, qua performance de optimale oplossing.

Above the fold CSS is niet heel makkelijk te automatiseren binnen CMSMS. Opnemen van basis CSS (typografie + grid) in de header van een template... en de overige CSS bestanden samenvoegen tot 1 bestand kan wel enige winst opleveren.

Bij Frameworks als Bootstrap wordt vaak alle CSS ingeladen en maar een fractie gebruikt. Met de Sass versie kan je de componenten die je niet gebruikt eruit laten. Je maakt daarmee een slankere versie:

https://getbootstrap.com/docs/4.0/getti ... ming/#sass

Author:  Gregor [ Thu Apr 12, 2018 5:17 am ]
Post subject:  Re: Laden van JS en CSS

Denk voor mij de winst vooral gaat zitten in minder gebruik van .js-files; de pagina voor blog-artikelen laadt er iets van 135. Door {if page_alias.....} schakel ik er verschillende uit, maar dan nog blijft het veel.

Author:  Gregor [ Sun Apr 15, 2018 6:49 pm ]
Post subject:  Re: Laden van JS en CSS

Ben aan het stoeien geweest met de suggestie om Sprite te gebruiken voor verschillende icons, gebaseerd op Icomoon. Waar ik achter kwam, is dat het het inkleuren van de icoontjes niet zo eenvoudig is. Met SVG lukt het me wel. Nu wil ik met flexbox de social media icoontjes op een rij krijgen, en per icoontje deze 'klikbaar' te maken. Tot het moment van toevoegen van het a-attribuut staan de icoontjes netje op een rij en worden binnen de kolom 'gewrapped', tot het moment van het toevoegen van het a-attribuut, dan neemt dit attribuut de volledige kolombreedte in beslag :-/

Iccon-css:
Code:
[[strip]]
.social-container {
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 0%;
    flex: 0;
}
.social-container a {
   
}
a.svg {
 position: relative;
 display: inline-flex;
 min-width: 0;
}
a.svg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}


.social-container a svg {
    height: 3vh;
    margin-bottom: 10px;
}
.flex-item {
    height: 5%;
}
.name{
  font-size: 0.5em;
  margin-left: 1em;
}
.icon-home3 {
   color:blue;
}

.icon-twitter {
    background-color: #4da7de;
    color: white;

}
.icon-twitter:before {
    content:'\e040';
}
.icon-facebook {
    background-color: #3e5b98;
    color: white;
}
.icon-facebook:before {
    content:'\e041';
}
.icon-google-plus {
    background-color: #dd4b39;
}
.icon-google-plus:before {
    content:'\e042';
}
.icon-pinterest2 {
    background-color: #c92619;
    color: white;
}
.icon-pinterest2:before {
    content:'\e043';
}
.icon-rss {
    background-color: #f26109;
    color: white;
}
.icon-rss:before {
    content:'\e00b';
}
.icon-linkedin2 {
    background-color: #3371b7;
    color: white;
}
.icon-linkedin2:before {
    content:'\e049';
}
.icon-sailing-boat-water {
   color: blueviolet;
}

.icon-twitter:hover {
    background-color: #3993ca;
}
.icon-facebook:hover {
    background-color: #2a4784;
}
.icon-google-plus:hover {
    background-color: #c93725;
}
.icon-pinterest:hover {
    background-color: #b51205;
}
.icon-rss:hover {
    background-color: #de4d00;
}
.icon-linkedin2:hover {
    background-color: #1f5da3;
}

[[* styling individual icons *]]
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
     font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    background-color: none;
}


[[* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== *]]

.icon-price-tags {
   width: 1em;
}

.icon-bubbles {
  width: 1.125em;
}

.icon-facebook {
   width: 20%;
   height: 2%;
   padding: 3px;
}
.icon-twitter {
   width: 20%;
   height: 2%;
   padding: 3px;
}
.icon-google-plus {
   width: 20%;
   height: 2%;
   color: white;
}
.icon-linkedin2 {
   width: 20%;
   height: 2%;
}
.icon-rss {
   width: 20%;
   height: 2%;
   padding: 3px;
}
.icon-pinterest2 {
   width: 20%;
   padding: 3px;
   height: 2%;
}

.icon-camera {
   color: #feffff;
   background-color: navy;
}
[[/strip]]



In de template:
Code:
<span class="social-container">

    <a href="http://www.facebook.com/sharer.php?u={$canonical}" target="_blank">
       <svg preserveAspectRatio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
    </a>
    <a href="https://twitter.com/share?url={canonical}&amp;text={title}&amp;hashtags=uisgebeatha" target="popup" onclick="window.open('https://www.twitter.com','name','width=600,height=400')">
       <svg preserveAspectRatio="none" class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg>
   </a>
   <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
       <svg preserveAspectRatio="none" class="icon icon-pinterest2"><use xlink:href="#icon-pinterest2"></use></svg>
   </a>
    <a href="https://plus.google.com/share?url={$canonical}" target="_blank">
       <svg preserveAspectRatio="none" class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg>
    </a>
</span>


Hoe kan ik de ruimte die het a-attribuut inneemt inperken zodat de icoontjes op een rij komen te staan?

Author:  velden [ Mon Apr 16, 2018 7:27 am ]
Post subject:  Re: Laden van JS en CSS

Als ik zo snel de css lees dan moet je denk ik een class="svg" toevoegen aan de <a ... > tags

Author:  Gregor [ Mon Apr 16, 2018 8:32 am ]
Post subject:  Re: Laden van JS en CSS

Dank je Velden, toegevoegd, maar helaas geen effect.

Author:  velden [ Mon Apr 16, 2018 8:38 am ]
Post subject:  Re: Laden van JS en CSS

Is het ergens live te bekijken? (url)

Author:  Gregor [ Mon Apr 16, 2018 8:49 am ]
Post subject:  Re: Laden van JS en CSS

Deze pagina is als test https://www.uisge-beatha.eu/thuishaven-test

Author:  velden [ Mon Apr 16, 2018 9:03 am ]
Post subject:  Re: Laden van JS en CSS

Volgens mij moeten de <a> items niet display:inline-flex hebben (lijkt me voor containers).

Dus wellicht kun je proberen:

Code:
a.svg {
 display: inline-block;
}


Tevens zie ik dat de .icon-xxx nog een width van 20% meekrijgen. Die moet er ook af volgens mij.

ps. ik ben niet thuis in de Flexbox materie.

Author:  Gregor [ Mon Apr 16, 2018 9:51 am ]
Post subject:  Re: Laden van JS en CSS

Het werkt :)
De oplossing zat in het weghalen van "width: 20%". de "inline-block" teruggezet naar "inline-flex" en dan blijft het ook netjes in een rij staan, uitgelijnd over de breedte van de kolom. Zal het vanavond eens in andere browsers proberen hoe het daar eruit ziet; schijnt niet allemaal even compatibel te zijn......

Author:  arnoud [ Mon Apr 16, 2018 11:19 am ]
Post subject:  Re: Laden van JS en CSS

Mogelijk heb je vendor prefixes nodig voor flexbox gebruik. Ik schrijf CSS altijd zonder prefixes "moz-", "webkit-", "o-", "ms-".

Aan de hand van een "browserlist" (lijstje met browsers die ik ondersteun), laat ik autoprefixer alles invullen (automatisch ingebakken in mijn buildtool).

https://developer.mozilla.org/en-US/doc ... dor_Prefix
http://browserl.ist/?q=last%204%20version
https://autoprefixer.github.io

Binnen een svg sprite gaat het stylen iets anders.

https://developer.mozilla.org/en-US/doc ... VG_and_CSS

Code:
svg {
fill:
stroke:
....
}


Voorbeeld op codepen:

Er wordt 1 svg sprite (test.svg) ingeladen geen font!
https://codepen.io/frontendstudio/pen/EEqmRM

Author:  Gregor [ Mon Apr 16, 2018 6:26 pm ]
Post subject:  Re: Laden van JS en CSS

arnoud wrote:
...(automatisch ingebakken in mijn buildtool)....
Mijn buildtool is de editor van cmsms en soms cssedit, en die doen dat niet..... ;)

Kan het zijn dat er in je voorbeeld iets niet goed gaat? Zie alleen maar tekst.

De suggesties die je deed, heb ik geprobeerd op de sprite van Icomoon, maar kreeg het niet voor elkaar. Misschien dat het aan iets van Icomoon ligt.

Als ik nu diezelfde icons elders wil gebruiken, maar dan in de vorm van een cirkel, werkt het dan zo dat ik hier een nieuwe styl-definitie voor maak, bijv.:
.icon-circle-name {
code om een cirkel te maken
}

Page 3 of 3 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/