Jump to content

How to speed up site loading?

Gauravk
 Share

Recommended Posts

Gauravk Mentor

Gauravk

Posted
Posted (edited)

Which block, module, widget is taking longer to load? I meant for first load.

How do you best optimise ttfb results?

https://carnity.com

Ours is taking longer than it used to be although we dont have any advertisement to load now. Appreciate some guidance from experts, thanks in advance. 

Edited by Gauravk
Adlago Mentor

Adlago

Posted
Posted (edited)
3 hours ago, Gauravk said:

Which block, module, widget is taking longer to load? I meant for first load.

How do you best optimise ttfb results?

https://carnity.com

Ours is taking longer than it used to be although we dont have any advertisement to load now. Appreciate some guidance from experts, thanks in advance. 

You have one bad request - this

If you are worried about a PSI test speed report - it might be a good idea to add preload-css to your head.
This will eliminate the PSI report,

294922195_Screenshotat2020-03-20112613.png.80b93be07ce7abd1ea4a594f7686d423.png

and you will get better results in a report.
If you are interested, I can write here an instruction how to do it.

PS. Remove errors validation html5 also improves website functioning

https://validator.w3.org/nu/?doc=https%3A%2F%2Fcarnity.com%2F

PS2. Take a look at this test - here you will find many factors that delay your site.

https://yellowlab.tools/result/flq7nrg1fi

 

Edited by Adlago
CoffeeCake Veteran

CoffeeCake

Posted
Posted
3 hours ago, Gauravk said:

@Kevin Carwile is it true?

I know we reached out interested to use the plugin, and the "lite" version's code is obfuscated. We never heard back from the plugin's author after seeing that the plugin is no longer available for sale. Our tests with the lite plugin mirrored @IOhIO's review.

I'd suggest disabling the plugin on your test or production site (whichever is most appropriate for you) and look at what impact that has on your TTFB metrics. We weren't able to purchase the full version and with the plugin author's decision to make the lite version's code difficult to read, we couldn't be sure it was using efficient means of converting furl requests.

Adlago Mentor

Adlago

Posted
Posted (edited)
36 minutes ago, Gauravk said:

Thanks @Adlago for your great inputs.

I would be highly obliged if you can please instruct on how to optimize the page speed.

Thanks in advance.

 

Well, here's an easy-to-use option that will make the results smile for you.
1. Create a new template with this data (in your theme)

508181123_Screenshotat2020-03-23210836.png.99e502346a5f3399fc6e49c1ddc4f234.png

1888778230_Screenshotat2020-03-23210940.thumb.png.ba0910cf304e261e4cd24e6a8b7a5e55.png

2. Open template core_global_analysis/preload_css, and put this 

{{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}
{{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}}
{{foreach $customCss as $css}}
<link rel='preload' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style">
{{endforeach}}

3. In your global template, before 

{template="includeCSS" app="core" group="global" location="global" params=""}

put this 

{template="preload_css" app="core" location="global" group="analysis" params=""}

4. Create new template pleload_fnt - as I mentioned earlier

5. Open core_global_analysis/plreload_fnt, and put this 

<link rel="preload" href="/applications/core/interface/font/icomoon.woff?v=-29n77j" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

6. In your global template, after close footer (</footer>), before 

{template="includeJS"if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

put this 

{template="preload_fnt" app="core" location="global" group="analysis" params=""}

7. Remove cache site, and do tests

I'm applying one more idea - I'm adding a script that delays loading images after onload time (it's not a lazy load - I don't like a lazy load)
With this script, I postpone images loaded with img src as well as background images, incl. those that load with SuperGrid, for example, by splitting up time for mobile and desktop. With a desktop, it takes a little delay time, while a mobile one needs a delay of about 3 seconds.
But this is much more complicated to instruct, and I usually only do it when I spend a lot of hours analyzing a site.

PS. Write about the results after applying what I wrote above.

Edited by Adlago
Gauravk Mentor

Gauravk

Posted
  • Author
Posted

Many thanks @Adlago for prompt help and such a nice detailed instructions.

I applied everything what you have mentioned and Yellow Lab result bumped from 73 to 74 now. Am I missing something...?

Btw, I have removed two unused JS in global template and also killed latest images widget on homepage to reach from 64-73.

Adlago Mentor

Adlago

Posted
Posted
4 minutes ago, Gauravk said:

Many thanks @Adlago for prompt help and such a nice detailed instructions.

I applied everything what you have mentioned and Yellow Lab result bumped from 73 to 74 now. Am I missing something...?

Btw, I have removed two unused JS in global template and also killed latest images widget on homepage to reach from 64-73.

I will test your site a little later and if I have any idea I will write.

Adlago Mentor

Adlago

Posted
Posted

@Gauravk Before </head> you load this script 

<script type="9b96b7e963e1da54ba1fa8c3-text/javascript" src='https://carnity.com/applications/cms/interface/external/external.js' id='ipsWidgetLoader'></script>

Move it down, after </footer> before 

{template="includeJS"if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

 

Adlago Mentor

Adlago

Posted
Posted
22 hours ago, Adlago said:

6. In your global template, after close footer (</footer>), before 


{template="includeJS"if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

put this 


{template="preload_fnt" app="core" location="global" group="analysis" params=""}

 

This missing in your source code. Check it.

===================================

21 hours ago, Adlago said:

@Gauravk Before </head> you load this script 


<script type="9b96b7e963e1da54ba1fa8c3-text/javascript" src='https://carnity.com/applications/cms/interface/external/external.js' id='ipsWidgetLoader'></script>

Move it down, after </footer> before 


{template="includeJS"if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

 

You have incorrectly followed this instruction of mine. Yes script is missing before </head>
but you did not put it below where I indicated.

========

Using a cookies-free domain will improve Yslow in loading your site. Instructing and implementing this is more complex, and I doubt if you will be able to follow it accurately.
I will wait to you add correctly the previous tips.

 

 

Gauravk Mentor

Gauravk

Posted
  • Author
Posted

You meant for which script?

Option 1:

  • {template="preload_fnt"

OR

Option 2:

  • <script type="9b96b7e963e1da54ba1fa8c3-text/javascript" src='https://carnity.com/applications/cms/interface/external/external.js'

Adlago Mentor

Adlago

Posted
Posted
3 hours ago, Gauravk said:

You meant for which script?

Option 1:

  • {template="preload_fnt"

OR

Option 2:

  • <script type="9b96b7e963e1da54ba1fa8c3-text/javascript" src='https://carnity.com/applications/cms/interface/external/external.js'

This script

<script type="9b96b7e963e1da54ba1fa8c3-text/javascript" src='https://carnity.com/applications/cms/interface/external/external.js'......

before template="includeJS"

 

Also you should put template="preload_fnt".... before the same script

Or:

template="preload_fnt........

<script type="9b96b7e963e1da54ba1fa8c3-text/javascript" src='https://carnity.com/applications/cms/interface/external/external.js'......

template="includeJS............

Adlago Mentor

Adlago

Posted
Posted

Yes, that's good.
The loading speed of your site can be improved if you use the GtMetrix tips for your images.
See this test, especially in section Page Speed/Optimize images.

https://gtmetrix.com/reports/carnity.com/NrNLUUlo

If you download the suggested optimized images and replace them, the speed will improve by at least 5-6 points.
Most important for replacement are the first 4-5 images in the suggested list of this test.

Adlago Mentor

Adlago

Posted
Posted
13 minutes ago, Gauravk said:

Thanks @Adlago Ill do that now.

Any clue how we can replace all IPB stock images for alphabets, as they are always an issue with size.

https://gtmetrix.com/reports/carnity.com/NrNLUUlo/pagespeed/imported-photo-29898.thumb.png.9cb9b35027f2415eb10_66a682e1307328e475b4f6e19c302a10.png

imported-photo-29898.thumb.png.9cb9b3502

The original size in your site is 240 x 240 px, and this creates a browser lag for recalculation.
I have tested 34 x 34 px and I think it works fine.
But you can choose the size you like.

Add in your constants.php file this row 

\define( 'THUMBNAIL_SIZE', '34x34' );

 

Gauravk Mentor

Gauravk

Posted
  • Author
Posted

Thanks @Adlago I have added the define code without the backslash in constants.php

Also edited couple of images that were very heavy.

Still not much difference in score - D68.

Any clue of css sprites, how to serve scaled images and cookie-less domain...?

 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...