• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 42 posts ]  Go to page Previous  1, 2, 3
Author Message
 Post subject: Re: Laden van JS en CSS
PostPosted: Thu Apr 05, 2018 5:14 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
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 :)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Sun Apr 08, 2018 8:06 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1222
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Thu Apr 12, 2018 5:17 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Sun Apr 15, 2018 6:49 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 7:27 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2931
Location: The Netherlands
Als ik zo snel de css lees dan moet je denk ik een class="svg" toevoegen aan de <a ... > tags


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 8:32 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
Dank je Velden, toegevoegd, maar helaas geen effect.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 8:38 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2931
Location: The Netherlands
Is het ergens live te bekijken? (url)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 8:49 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
Deze pagina is als test https://www.uisge-beatha.eu/thuishaven-test


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 9:03 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2931
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 9:51 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
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......


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 11:19 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1222
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 16, 2018 6:26 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1773
Location: The Netherlands
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
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 42 posts ]  Go to page Previous  1, 2, 3

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
A2 Hosting