[SOLVED] @font-face performance and style/script order when using CClientScript

Yii 1.1 General Discussion
1

I’m trying to use @font-face to give my pages a nicer look, but I’m having some performance issues when rendering the pages (or FOUT, as they call it). After reading some blogs, it seems that part of the problem is the order of the script and style tags in the page. They say that the style tags must come before any script tag, and point out that most of the performance problems are caused by placing scripts before css. Unfortunately, when using Yii’s CClientScript.renderScriptFile and CClientScript.renderCssFile the scripts are placed first in the <head>, and then the styles. Is there any way to change this? Or what do I need to override to accomplish this?

http://www.stevesoud…nd-performance/

http://robert.accett…or-performance/

http://www.aaronpete…flush-font-face

Thanks.

2

Hi,

First of all, you can define script position,

E.g,




Yii::app()->clientScript->registerScriptFile(string $url, CClientScript::POS_END)

Please check out docs

The second, you can always connect all your js files manually (jquery.js is not an exeption). Here’s a quick example

3

Well, this may seem like a silly answer, but I’ve had some issues related to performance with @font-face and the reason was the font file size (almost 3.5MB)

Using Google’s font directory solved the problem

Hope this helps

:)

Regards

4

Solved, it was really silly: I’m including the style sheet which defines the @font-face manually inside the layout’s <head>. I just had to move the <title> below the <style> which includes the @font-face. That’s it.

@scoob.junior great resource, thanks.

@yugene the POS_* would not work in my case, because I needed many <script> and <style> inside the <head> :frowning: Thanks anyway :slight_smile:

5

thanks for sharing the solution

please, just for me to be sure i got it right: the main performance issue you have faced was caused by the order of style and title tags in the html "head" section? did i get the point?

I’m asking this because i always declare title before styles and this concept of tag’s order and performance sounds very interesting to me…(I googled the terms but found nothing)

many thanks in advance

regards

6

The problem is that, if you include scripts before the stylesheet where you defined your @font-face, the browsers will delay the display of text: Gecko based browsers will render the text with the first not-@font-face font, then, when loaded, will render again with the @font-face font, causing a nice flickering screen; meanwhile, Chrome will not render text at all. If you have something like this:


<title>My nice fonty page</title>

<style rel="stylesheet" type="text/css" href="font_face.css" />

Yii will include the javascripts coming from CClientScript.registerScriptFile and CClientScript.registerScript before the <title>, thus placing the <style> after the <script> tags, causing the crazy browser behavior.

The solution was siply to place <style> above <title>:


<style rel="stylesheet" type="text/css" href="font_face.css" />

<title>My nice fonty page</title>

This way, Yii still renders the <script> tags above <title>, but they come after the <style> tag which includes the font.

I hope I explained well the hack :)

7

Thank you very much!

I see exactly the behavior you mentioned in a client’s website: http://www.diodato.com.br

Page gets rendered with default font and after that the browser replaces texts with the correct font

Will try to do your hack and see if it solves the issue

:D

Regards!

Edit: +1 to @MetaYii, it works!