• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France 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  Next
Author Message
 Post subject: Re: Laden van JS en CSS
PostPosted: Tue Feb 27, 2018 1:15 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
De eerste SVG icoontjes staan op de site :)

M.b.v. de tips van Arnoud ben ik op zoek gegaan een site waar ik ook fonts kan selecteren en kwam bij https://icomoon.io/app/#/select uit. Fonts selecteren en als fonts downloaden. Je krijgt een zip-bestand waarvan je de fonts op de webserver zet en de css-code aan het stylesheet toevoegt. Een mooie beschrijving staat op deze site: http://chipcullen.com/how-to-use-icomoon-and-icon-fonts-part-1-basic-usage/

Een volgende stap was om in de template (blog als pagina) de de juiste html-codes te plaatsen, ter illustratie:
Code:
<h4><span class="icon-camera"></span> Meer foto's in het album</h4>


In de paginatemplate de font-awsome fonts uitgeschakeld en zowaar
https://www.uisge-beatha.eu/logboek/523/Proefstuk-schilderen

Moet de underline nog zien weg te halen en sommige icoontjes netjes uitlijnen, bijv. het zoek-icoon.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Wed Feb 28, 2018 2:24 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1308
Een mooie aanvulling van Tim.

Omdat het nooit kwaad kan om een website sneller te maken en "speed testing" een boeiend onderwerp is heb ik nog eens wat websites en technieken onder de loep genomen.

Vaak valt er op het gebied van afbeeldingen veel te winnen. Comprimeer je foto's of zet de quality van CGSmartImage eens een stukje lager is een "quick win".

Een aantal websites die ik in beheer hebt maken gebruik van de bekende image sliders. Een website wordt afgeleverd met 1 a 2 slider foto's en is redelijk snel.

De eindgebruiker gaat los en zet 10 of 15 fotos in de slider en de "fast initial pageload", loopt terug.

Met een eenvoudige callback functie kan zo'n slider pagina een stuk sneller gemaakt worden. Maak alleen de eerste afbeelding zichtbaar, verander voor de vervolg afbeeldingen <img src=""> in <img data-src="">. Op het moment dat de vervolg slide ingeladen wordt zet je data-src snel om naar src.

Code:
     
    $('.carousel').on('slide.bs.carousel', function (ev) {
        var i;
        i = $(ev.relatedTarget).find("img[data-src]");
        i.attr("src", i.data('src'));
        i.removeAttr("data-src");
      });


Iets meer toekomst muziek maar lazy loading met de JavaScript intersection server api is ook toe te passen:

http://deanhume.com/home/blogpost/lazy- ... rver/10163

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Wed Feb 28, 2018 9:29 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
Over lazy loading had ik al e.e.a. gelezen. Gebruik in een aantal blog posts een mogelijkheid om een slide show van foto's te bekijken https://www.uisge-beatha.eu/2017/03/Gecorrodeerd-lummelbeslag#Reageeropditartikel. Op dit moment gebruik ik daar een template voor met de volgende code:
Code:
<div style="clear:both"></div>{* make sure heading is alignemt to the left *}
{* clean up parameters |replace:' ':'%20' *}
{assign var='album_no_spaces' value=str_replace(' ', ' ', "uploads/images/Gallery/{$gcb_params.album}")}
{assign var='foto_no_spaces' value=str_replace(' ', ' ', {$gcb_params.foto})}
{assign var="first_photo" value="uploads/images/Gallery/{$gcb_params.album}/{$gcb_params.foto}.jpg"}

<h4><span class="icon-camera"></span> Meer foto's in het album</h4>
{assign var='files' value="{$album_no_spaces}/*.jpg"|glob}
{if count($files)}
   <div class="fbCycler floatbox" data-fb-options="doSlideshow:true group:`cgblog` caption:`href` header:`#socialmediashare1`">
   <a href="{$first_photo|cms_escape:'urlpathinfo'}">{CGSmartImage src="{$first_photo}" width="150" alt="Uisge Beatha, Zeilen"}</a>
   {foreach from=$files item='file'}
         {if !$file|contains:"thumb_"}
            <a href="{$file|cms_escape:'urlpathinfo'}"></a>
         {/if}
   {/foreach}
   </div><p> {* needed to for come a warning on W3C validation *}
{/if}

Zal zien of ik deze kan aanpassen naar LL.

Een onderdeel waar ook winst is te behalen is, is het laden van allerlei js-files. In de oorspronkelijke lay-out van de sites werd per template dezelfde set van js-files geladen. Dit heb ik samengevoegd in een template die ik per paginatemplate aanroep. Het samenvoegen van js-bestanden, dat in verschillende speed tester wordt voorgesteld, leidt tot een aanzienlijke verbetering van de laadtijd, maar ook tot een navenant aantal fouten in het debugscherm. Daarom ook aan het kijken of er plugins zijn die voor een lichtere variant kunnen worden vervangen. Als iemand suggesties heeft, ik houd me aan bevolen.
Code:
{* jQuery (necessary for Bootstrap's JavaScript plugins)
*}
<__script__ src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></__script>
<__script__ src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></__script>
{* cache_remote_file url='https://www.uisge-beatha.eu/index.php?page=cache_googletranslate_2' *}

{if $page_alias == 'Artikelen'}
   {* 14jun17 script for endeless scrolling of blog articles - https://www.cmscanbesimple.org/blog/cmsms-modules-and-endless-scrolling
   *}
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.jscroll.min.js" defer></__script>
    <__script__ type="text/javascript">
    $(function() {
        $('div.jscroll').jscroll( {
        nextSelector: 'a.jscroll-link:last',
        autoTrigger: true,
        loadingHtml: '<i class="icon-spinner3"></i>'
        } );
    } );
   </__script>
   {* CSS for endless scrolling is put in buddy011-Main stylesheet ++++++ end script endless scrolling *}
{/if}

{* +++++ Cookies +++++ *}
<__script__ src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></__script>
<__script__ type="text/javascript">
  $(".accept_cookies").click(function () {
    $("#cookie_consent").toggle("slow");
    location.reload();
  } );
  $(document).ready(function() {
    $.cookie("cookie_consent", "yes", { domain: "uisge-beatha.eu", path: "/", expires: 1095 } );
  } );
</__script>


{* Vanilla-js, doesn't work yet *}
<__script__ src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></__script>
{* if $page_alias == 'reageer'}
     <__script__ type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?tracking=1&showNoConsent=1"></__script>
{/if *}
{* +++++ End Cookies script +++++ *}

{* +++++ Gallery module +++++ *}
{* 24feb18: Floatbox 740 changed to _752 ----- don't add async or defer because it will break the function *}
{if $page_alias == 'fotoalbum' || $page_alias == 'detail-pagina-logboek' || $page_alias == 'Artikelen' || $page_alias == 'thuishaven'}
    <__script__ src="{root_url}/modules/Gallery/templates/floatbox_752/floatbox.js"></__script>
{/if}

{* Carousel on the homepage *}
{if $page_alias == 'test' || $page_alias == 'thuishaven'}
    <__script__ data-pagespeed-no-defer src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></__script>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
{/if}

<__script__>
    $(window).bind("load", function() {
       $.getScript('https://www.uisge-beatha.eu/uploads/_Javascripts/social.js', function() {});
    });
</__script>
<__script__ async src="//assets.pinterest.com/js/pinit.js"></__script>
{* End +++++ Social Media Share Buttons +++++ *}

{* +++++ cycle2 script used for Zeiluitspraken +++++ *}
<__script__ data-pagespeed-no-defer src="{uploads_url}/_Javascripts/jquery.cycle2.min.js"></__script> {* no async or defer *}

{* Include all compiled plugins (below), or include individual files as needed
*}
    <__script__ type="text/javascript" src="{uploads_url}/_Javascripts/bootstrap.min.js"></__script>
    <__script__ src="{uploads_url}/tpl-buddy-011/js/superfish.js" ></__script>
    {*
    <__script__ src="{uploads_url}/tpl-buddy-011/js/combined.js"></__script> *}
    {* combining scripts leads to more errors (inspect element) *}
   
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.flexslider-min.js"></__script>
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.stellar.min.js"></__script>
    <__script__ src="{uploads_url}/tpl-buddy-011/js/jquery.magnific-popup.min.js"></__script>
    {* <__script__ src="{uploads_url}/tpl-buddy-011/js/combined-jquery.js"></__script> *}
   
    <__script__ src="{uploads_url}/tpl-buddy-011/js/init.js" defer></__script>
   
    {if $page_alias == 'detail-pagina-logboek'}
        <__script__ async src="{uploads_url}/_Javascripts/sorttable.js"></__script>
    {/if}
    {include file='cms_template:Tooltips'}
    {if $page_alias != 'test'}
        {global_content|strip name='Analytics'}
    {/if}
    {global_content|strip name='Cookie_active'}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Tue Mar 27, 2018 7:04 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
Hierop terugkomend:
arnoud wrote:
De eindgebruiker gaat los en zet 10 of 15 fotos in de slider en de "fast initial pageload", loopt terug.

Met een eenvoudige callback functie kan zo'n slider pagina een stuk sneller gemaakt worden. Maak alleen de eerste afbeelding zichtbaar, verander voor de vervolg afbeeldingen <img src=""> in <img data-src="">. Op het moment dat de vervolg slide ingeladen wordt zet je data-src snel om naar src.

Code:
     
    $('.carousel').on('slide.bs.carousel', function (ev) {
        var i;
        i = $(ev.relatedTarget).find("img[data-src]");
        i.attr("src", i.data('src'));
        i.removeAttr("data-src");
      });


Voor nagenoeg alle weergaven van foto's op de site gebruik ik CGSmartImage. Om de lazyload toe te passen zou je in staat moeten zijn om de "img src=....." van CGSI aan te passen, of is daar een andere 'truc' voor?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Tue Mar 27, 2018 10:17 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1308
CGSmartImage:

(optional) notag="" - Do not output an img tag, only the url to the cached image. This has no effect when CGSmartImage is used from within a stylesheet.

Of Smarty | replace:

Code:
{$img|replace:'src':'data-src'}


https://www.smarty.net/docsv2/en/langua ... eplace.tpl

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 02, 2018 11:26 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7643
Location: The Netherlands
Humm, wat krijgen jullie hier?
https://tools.pingdom.com/#!/bj9o2t/htt ... imple.org/

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Mon Apr 02, 2018 12:06 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1308
Performance grade
A 100
Load time
1.19 s
Faster than
85 %
of tested sites
Page size
362.1 kB
Requests
7
Tested from
Stockholm

Je font awesome .js is wat aan de zware kant:
fontawesome-all.min.js
www.cmscanbesimple.org/assets/themes/
252.4 kB

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


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

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
Rolf wrote:

Uitermate snelle site ;)
Heb font-awsome vervangen door SVG-fonts, dus alleen die fonts die ik gebruik. Bleek aan 10 fonts voldoende te hebben.


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

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
arnoud wrote:

Code:
{$img|replace:'src':'data-src'}


https://www.smarty.net/docsv2/en/langua ... eplace.tpl
Als je twee foto's wilt laten zien, dan ga je dit dus vanaf de 3e foto doen??


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

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
Gregor wrote:
Rolf wrote:

Uitermate snelle site ;)
Heb font-awsome vervangen door SVG-fonts, dus alleen die fonts die ik gebruik. Bleek aan 10 fonts voldoende te hebben.
Wat ik bij mijn site niet begrijp, is de 3-4sec voor TTFB https://tools.pingdom.com/#!/crEU35/https://www.uisge-beatha.eu/2018/03/Nieuwe-uitlaat-elleboog


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Tue Apr 03, 2018 10:01 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1308
Als je twee foto's wilt laten zien, dan ga je dit dus vanaf de 3e foto doen??

Ja, iets met loop.index?

Code:
{foreach from=$items item=item name=loop}

   {if $smarty.foreach.loop.index >= 2}
+ zichtbaar   
{else}
- onzichtbaar
   {/if}

    {if $smarty.foreach.loop.first}
    {/if}
{/foreach}

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Tue Apr 03, 2018 10:07 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1308
Gregor wrote:
Gregor wrote:
Wat ik bij mijn site niet begrijp, is de 3-4sec voor TTFB


Slow Time To First Byte (TTFB) is netwerk / server gerelateerd:
https://developers.google.com/web/tools ... nce/issues

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Wed Apr 04, 2018 1:31 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7643
Location: The Netherlands
Ik heb mijn blog www.cmscanbesimple.org opnieuw opgebouwd, hierbij heb ik erg goed gekeken naar de pagina laadtijd en wat advieswebsites daar van vinden.

Deze genoemde websites geven advies... klopt! Maar dit is niet altijd begrijpelijk (vind ik) en ook niet altijd uitvoerbaar (op shared hosting).

Wat heb ik gedaan? Ik ben begonnen met de zaken die voor de hand liggen aan te passen!
Deze .htaccess heb ik gebruikt en die lijkt goed te werken!
viewtopic.php?f=4&t=77785 Ik gebruik Piwik voor analytics op een apart domein, óók daar heb ik deze .htaccess neergezet. Tenminste het caching en veiligheidsdeel. Het eerste deel, de CMSMS URL rewriting regels etc. hoeft natuurlijk niet.

Ik heb gekozen om af te stappen van CDN services, tegen alle adviezen in... Door het zelf te hosten heb je een betere controle over caching. Het gebruik van een CDN kan ook gebruikt worden om bezoekers te volgen. Denk bijv. aan Google fonts, die kijkt dan lekker mee zonder dat je het beseft... Bij bepaalde browser kun je dat blokkeren waardoor jouw site er verkeerd uit komt te zien.

Fonts! Ik gebruikte Open Sans vanuit CDN. Nu gebruik ik simpelweg de standaard Verdana font-family, die webveilig moet zijn. Ziet er eigenlijk hetzelfde uit. Niet muggeziften... :)

Met Template Inheritance kun je per pagina(groep) bepalen wel externe bestanden (JS/CSS) worden geladen en niet alles tegelijkertijd.
https://www.cmscanbesimple.org/blog/the ... gn-manager

Ik moet nu alleen het Font Awesome bibliotheek bestand nog verkleinen, maar ben nu al erg tevreden! Bij Pingdom Speedtest krijgt de site een 100%!!

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Wed Apr 04, 2018 3:06 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1308
Qua SEO komt je cmscanbesimple websites ook goed door de tests heen.

Uit een font-awesome font kan je alle losse icoontjes halen:

Code:
fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font_file.ttf


Mogelijk zijn de .svg source bestanden ook los te vinden.

Met losse .svg bestanden kan je een 'eigen' iconfont genereren, of overstappen op een .svg sprite techniek:

Deze laatste optie heeft de beste performance, maar vraagt wat extra werk voor het voorbereiden van de bestanden en .css.

Zie:

https://www.webdesignerdepot.com/2017/0 ... g-sprites/

Zie dat je voor je logo een .png gebruikt als je deze vervangt voor een
Code:
<img src='logo.svg'>
zal je pagina ook nog iets sneller worden.

_________________
The CMSMS Builder is a tool to help you develop and optimize CMS Made Simple >= 2.2.3 themes, it is made by a developer for developers.

I you like an automated file based work-flow this project might be for you. It is usable to kick-start a new CMSMS project or it can be applied to existing ones.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Laden van JS en CSS
PostPosted: Wed Apr 04, 2018 8:34 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Mar 23, 2006 9:25 am
Posts: 1820
Location: The Netherlands
Ik heb de webfonts voor uisge-beatha.eu via deze site gemaakt https://icomoon.io/app/#/select Eigenlijk heel eenvoudig ;)


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  Next

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:  
A2 Hosting