Announcement

Collapse
No announcement yet.

Adding preload attribute

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Adding preload attribute

    Google's PageSpeed Insights is recommending that the ReadyThemeIcons.woff file be "preloaded". I did tweak the CSS Resources to give the file the attribute. Perhaps I'm being impatient but it's not seeing it when I rerun the test. Is there some sort of delay (on Google's end)?
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Hi Leslie,

    Along with adding rel="preload", did you add the attribute as="font"?
    Matt Zimmermann
    Holistic Web Developer
    https://www.dev4web.net


    Site Development - Maintenance - Consultation

    Comment


      #3
      Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      Along with adding rel="preload", did you add the attribute as="font"?
      Am I to add that literally? With the Attribute Name = as and the Attribute Value = font
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        Correct. https://developer.mozilla.org/en-US/...oading_content
        Matt Zimmermann
        Holistic Web Developer
        https://www.dev4web.net


        Site Development - Maintenance - Consultation

        Comment


          #5
          Thanks! I've added both but Google's PageInsights is still not picking up the change I made.

          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Hi Leslie,

            It could take a while. Of course, this is assuming you have the resource set to be active and being added to the head tag or css list. If not, then Google will not see it. You may need to go a different way like with a prefetch.
            Matt Zimmermann
            Holistic Web Developer
            https://www.dev4web.net


            Site Development - Maintenance - Consultation

            Comment


              #7
              Interesting - it's also an issue with the Colossus Demo site. The only place I can find it referenced is in the file:

              /* ================================================== ========================
              UTILITIES / ICONS
              ================================================== ======================== */

              /**
              * This contains the "@font-face" call needed to add the ReadyTheme Icons Font
              * package to your site. These icons are available for use in addition to any
              * theme-based icons which may be referenced in the "theme-fonts.css" file.
              */

              @font-face {
              font-family: 'ReadyTheme Icons';
              font-style: normal;
              font-weight: normal;
              font-display: fallback;
              src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
              }



              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


                #8
                Hi Leslie,

                I have run several tests on this and the preload does seem to be a little flighty. I will have to do some more research. However, from what I am seeing on my test site, the cost for the font is only 0.10s to 0.28s so...not to much really.
                Matt Zimmermann
                Holistic Web Developer
                https://www.dev4web.net


                Site Development - Maintenance - Consultation

                Comment


                  #9
                  Originally posted by Matt Zimmermann View Post
                  Hi Leslie,

                  I have run several tests on this and the preload does seem to be a little flighty. I will have to do some more research. However, from what I am seeing on my test site, the cost for the font is only 0.10s to 0.28s so...not to much really.
                  I'm getting 2.88s or I wouldn't be trying so hard to fix this.

                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                    #10
                    Originally posted by lesliekirk View Post
                    Interesting - it's also an issue with the Colossus Demo site. The only place I can find it referenced is in the file:

                    /* ================================================== ========================
                    UTILITIES / ICONS
                    ================================================== ======================== */

                    /**
                    * This contains the "@font-face" call needed to add the ReadyTheme Icons Font
                    * package to your site. These icons are available for use in addition to any
                    * theme-based icons which may be referenced in the "theme-fonts.css" file.
                    */

                    @font-face {
                    font-family: 'ReadyTheme Icons';
                    font-style: normal;
                    font-weight: normal;
                    font-display: fallback;
                    src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
                    }


                    If I use the preload method - I think I need to "tweak" this. (I think it's what Google is seeing)
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way
                    (aka Leslie Nord leslienord)

                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment


                      #11
                      Hi Leslie,

                      So far, to the best of my research, there is nothing you would have to modify in the style sheet when it comes to preloading or pre-fetching a font. If you find out otherwise, please let me know.
                      Matt Zimmermann
                      Holistic Web Developer
                      https://www.dev4web.net


                      Site Development - Maintenance - Consultation

                      Comment


                        #12
                        Originally posted by Matt Zimmermann View Post
                        Hi Leslie,

                        So far, to the best of my research, there is nothing you would have to modify in the style sheet when it comes to preloading or pre-fetching a font. If you find out otherwise, please let me know.
                        Yeah, I will (sort of brain fogged right now).
                        Leslie Kirk
                        Miva Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment

                        Working...
                        X