Announcement

Collapse
No announcement yet.

In https icons load too slow

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

  • In https icons load too slow

    I changed from http to https and now I have this problem: using a desktop, when a new user reach the forum-homepage the icons load too slow so he can see 4-6 broken images.
    All my icons together are 250 kb, more or less. In http I had not the problem.
    What do I have to do?

    P.S. Using the mobile icons load always well.
    Last edited by Bmst; Sat 20 Mar '21, 4:58pm.

  • #2
    250 KB is quite large for a 32 X 32 image... An optimized image will be much smaller. The forum icons on my Cloud site (in my signature) are 1-2 kb in size.

    When I view your site in Chromium's developer tools, the missing images are due to a 500 server error returned from your server. Since most images work and have similar server calls, I don't think this is from the vBulletin software but due to your server configuration and how many connections an IP address can make when requesting a page. Since these images are basically file attachments, each image requires a PHP call (e.g.: /filedata/fetch?channelid=31&lastupdate=&type=50px) to show. Your server is blocking some of these. If you're using a tool like mod_security or mod_evasive, you should review the rules for these. After the first load, the images should be loaded from the end user's device cache and eliminate this issue.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      Originally posted by Wayne Luke View Post
      250 KB is quite large for a 32 X 32 image... An optimized image will be much smaller. The forum icons on my Cloud site (in my signature) are 1-2 kb in size.
      First of all, thanks for your help.

      Well, you read too fast my message: I wrote that the images all together are 250 kb (4 kb each one, more or less).


      Originally posted by Wayne Luke View Post
      When I view your site in Chromium's developer tools, the missing images are due to a 500 server error returned from your server. Since most images work and have similar server calls, I don't think this is from the vBulletin software but due to your server configuration and how many connections an IP address can make when requesting a page. Since these images are basically file attachments, each image requires a PHP call (e.g.: /filedata/fetch?channelid=31&lastupdate=&type=50px) to show. Your server is blocking some of these. If you're using a tool like mod_security or mod_evasive, you should review the rules for these.
      I have another VBulletin forum built in the same way as the first one and the problem is not present. The only difference is that it has half of the channels and related icons.

      Originally posted by Wayne Luke View Post
      After the first load, the images should be loaded from the end user's device cache and eliminate this issue.
      Yes, the problem appears only on the first load, then the user's cache solves it.
      Upon me, it's not a relevant problem for a user, but I've seen a terrible score on Pagespeed and GTmetrix, so I'm worried that my forum will be penalized by the Google Engine.

      Comment


      • #4
        Originally posted by Wayne Luke View Post
        Since most images work and have similar server calls, I don't think this is from the vBulletin software but due to your server configuration and how many connections an IP address can make when requesting a page. Since these images are basically file attachments, each image requires a PHP call (e.g.: /filedata/fetch?channelid=31&lastupdate=&type=50px) to show. Your server is blocking some of these. If you're using a tool like mod_security or mod_evasive, you should review the rules for these.
        Do I have to increase the DOSSiteCount?
        I'm on a shared hosting, so I don't know if I can change anything. I don't know the actual value either.

        Comment


        • #5
          You would have to discuss the issue of blocked resources with your hosting provider.

          Half the forums means fewer DOM elements and less Javascript and CSS processing by the end user. This provides a better experience. You probably don't have to delete forums. Just reconfigure what is shown on the front page.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment


          • #6
            Originally posted by Wayne Luke View Post
            You would have to discuss the issue of blocked resources with your hosting provider.
            Ok Wayne, I did.
            I discussed for 78 minutes with Hostgator chat assistance. The first tech disappeared after 25 minutes, the second one asked me if I wanted to upgrade from shared hosting to a dedicated server "to have more freedom". I told him that my CPU seconds are below the limit and that I will use a VPS or a dedicated server only after the removing of the problem, when my forum will load faster and will have more visitors because it will be "blessed" by the Google engine.
            At the end he decided to escalate the issue to his superior so I have to wait an e-mail from him.

            Comment


            • #7
              Yesterday I reduced the icons from 4 kb to 2 kb each one, the delay persists.

              BTW the supervisor answered me. A long e-mail, almost 99% copied from somewhere else.
              Basically he told me to:
              1) Use a CDN (my note: quite absurd for images of 2kb each one)
              2) Rate limit bots and crawlers (my note: I already did, clearly he didn't check my .htaccess)
              3) Reduce the size of the content (my note: Again! We're talking about images of 2kb)

              So I explained again the problem to him and I'm waiting for his answer.

              Comment


              • #8
                How are you limiting bots from .htaccess?

                A CDN is a great way to cache even small images and reduces the load on your server. Plus a Global CDN will copy your images to a number of servers around the world to make access quicker for people. However, the browser should also cache them after the first load. You should rely on that as well.

                Where are you storing attachments on your server? Storing them in the database (default) can be slower on systems with SSD based storage. Moving them to the file system can improve their performance.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API

                Comment


                • #9
                  Originally posted by Wayne Luke View Post
                  How are you limiting bots from .htaccess?
                  I use this, with hundreds of bots (excluding those useful to my forum, like Google, Bing and so on).

                  <IfModule mod_rewrite.c>
                  RewriteCond %{HTTP_USER_AGENT} ^.*(Baidu|YandexBot).*$ [NC]
                  RewriteRule .* - [F,L]
                  </IfModule>

                  Crawlers consumed a lot of my bandwidth according to AWStats. In example, all my visitors together consume 500MB each day, YandexBot alone consumed 100MB each day and I don't have a russian website or russian visitors.

                  This was the result after the application of this rule.


                  Click image for larger version  Name:	blocco-spider.jpg Views:	0 Size:	53.5 KB ID:	4455480



                  Comment


                  • #10
                    Originally posted by Wayne Luke View Post
                    A CDN is a great way to cache even small images and reduces the load on your server. Plus a Global CDN will copy your images to a number of servers around the world to make access quicker for people. However, the browser should also cache them after the first load. You should rely on that as well.
                    I tried Cloudflare a few years ago, but it was a mess: people posted, they didn't see their post so they posted again... I had a lot of duplicated posts so I removed it. Probably I was not able to fix the cache in the right way. BTW it seems strange to me to use a CDN because images of 2 KB load slowly.

                    Originally posted by Wayne Luke View Post
                    Where are you storing attachments on your server? Storing them in the database (default) can be slower on systems with SSD based storage. Moving them to the file system can improve their performance.
                    This is a very good idea! 👍
                    Can you help me? I don't know which is the folder where are the channel icons. Maybe we can change them to simple images without the need to be transparent if someone already checked the channel.

                    Comment


                    • #11
                      Small files can actually add significantly to page load because they introduce latency. Each time you try to load them, they make a call. There is a latency waiting for the server to reply if the image exists and then the browser the asks to actually download it. This is usually small and measured in milliseconds but it adds up. If you have a minimum of 20 milliseconds in just network traffic and 20 milliseconds waiting for the server to respond, that is 40 milliseconds per file that you have no control over. If there are 100 files, that is 4 seconds. This is why the recommendation is almost always to combine CSS, Javascript, and Images into single files. We do this for vBulletin but also try to only load the code needed for the specific page. There is no reason for us to load editor CSS/Javascript/Image code on the default home page for instance. Where the code is placed in the sequence also matters. We load the bulk of Javascript in the footer of the page but CSS has to be loaded in the header.

                      To get around this, most browsers will make multiple connections to a server to try and download these files. Usually between 4 and 6 connections per server. However, busy servers can also restrict these requests and limit how many connections can be made simultaneously. Additional files are put into a queue to be downloaded when a connection opens up. Using a CDN, allows the requests to be spread across more servers and allows the browser to open more connections.



                      The transparency affect applied to channel images does not add significant size or duplicate images. It should not require any additional server resources. This is done via CSS using the opacity filter available in all modern browsers. This CSS code is less than 50 bytes of data. This is the entire snippet of code:

                      Code:
                      .b-icon__channel-icon--read {
                        opacity: 0.5;
                      }
                      The color-fill affect (if you have this on) is done by Javascript which pulls a dominant color out of the image after download and applies it to the image's transparent pixels via CSS.

                      In addition vBulletin minimizes all CSS and Javascript by removing spaces, carriage returns and other unneeded characters that make code easy for humans to read. With Javascript, the code is further minimized by renaming variables from human readable versions into much shorter (often single character) names. Also since CSS and Javascript are considered text, they will be compressed using gzip by all modern web servers. The browser will uncompress this data for use. For example, the footer-rollup-564.js file is 550 KB stored on disk and your server compresses this file to 209 KB for transmission.

                      In addition, the browser should cache CSS, Javascript, and images on the end user's device.



                      Channel icons and the logo are handled as attachments and follow all rules for attachments. You can move attachments to the file system under Attachments -> Attachment Storage Type. Clicking the inline help icon will give detailed instructions on how to move these files.
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud demonstration site.
                      vBulletin 5 API

                      Comment


                      • #12
                        Originally posted by Wayne Luke View Post
                        Channel icons and the logo are handled as attachments and follow all rules for attachments. You can move attachments to the file system under Attachments -> Attachment Storage Type. Clicking the inline help icon will give detailed instructions on how to move these files.
                        I tried moving attachments from database to file system, but something went wrong, also after cmod to 777 the new folder.
                        In php7.4 is there something that could block it, like Safe_Mode did in php 5.3?

                        Comment


                        • #13
                          OK, I did it, thanks for your help Wayne. I had to point to ./myfolder
                          I was missing the . before the / 🙄

                          Clearly there is an improvement, but the evaluation is still not good.


                          BEFORE

                          Click image for larger version  Name:	before.png Views:	0 Size:	21.5 KB ID:	4455587

                          AFTER

                          Click image for larger version  Name:	after.png Views:	0 Size:	21.2 KB ID:	4455588

                          Comment


                          • #14
                            Your score is low due primarily due the time it takes this device to run Javascript. Specifically jQueury, which is loaded off of Google's CDN. You should try a different CDN for this file or load it from your server. You can do this in the AdminCP under Settings -> Options -> Server Settings and Optimization Options. So I think that your icon images are the wrong thing to look at.



                            GTMetrix uses Google's Lighthouse APIs to access your site. If you're using Google, then you can use the Developer Tools in the browser to run a more in-depth Lighthouse report. When/If I bring this up to the developer's they will point to the 90+% performance rating that this site gets or the ratings that vBulletin Cloud sites get. They will use that information to prove it isn't the software.

                            This site: Latest Performance Report for: https://forum.vbulletin.com/ | GTmetrix
                            My vBulletin Cloud site: Latest Performance Report for: https://forums.rabidbadger.io/ | GTmetrix

                            What is your server environment? You can see this on the AdminCP Home Page.
                            Translations provided by Google.

                            Wayne Luke
                            The Rabid Badger - a vBulletin Cloud demonstration site.
                            vBulletin 5 API

                            Comment


                            • #15
                              P.S... You can make probably your logo image smaller by removing the background gradient and storing the actual logo as a transparent PDF. To handle the background gradient in the header use the header_background style variable to build the Gradient using CSS. Or copy and paste your custom CSS Gradient code in the css_additional.css template.
                              Translations provided by Google.

                              Wayne Luke
                              The Rabid Badger - a vBulletin Cloud demonstration site.
                              vBulletin 5 API

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X