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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    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

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        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

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            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

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                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

                      Miva Web Developer
                      Alchemy Web Development
                      https://www.alchemywebdev.com
                      Site Development - Maintenance - Consultation

                      Miva Certified Developer
                      Miva Professional Developer

                      https://www.dev4web.net | Twitter

                      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