Jump to content

Prefetch , Preload, speed-up loading

radus

By radus
in Core developers

 Share

Recommended Posts

radus Newbie

radus

Posted
Posted
 
Hello all,
 
For faster page load, I want to prefetch, preload links from pages.
 
Below code does not work ( does not generates the Product URL ) for a Index page with Homefeatured module , but works for Category ( Product-list.TPL ) , SubCategory ( Product-list.TPL ),  ( Product.TPL ).
 
Code has to be in header.TPL , between <head> </head> .
 
Below is code for Homefeatured.TPL , and after is code for Header.TPL for Prefetch , Preload.
 
 
Many thanks,
 
==============================
Below is code for Homefeatured.TPL 
==============================
<!-- MODULE Home Featured Products -->
<article>
<div id="{l s='Featured products' mod='homefeatured'}" class="block products_block clearfix">
	<p class="title_block">{l s='Featured products' mod='homefeatured'}</p>
	{if isset($products) AND $products}
		<div class="block_content">
			{assign var='liHeight' value=250}
			{assign var='nbItemsPerLine' value=4}	
			{assign var='nbLi' value=$products|@count}
			{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
			{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}
			<ul style="height:{$ulHeight}px;">
			{foreach from=$products item=product name=homeFeaturedProducts}
				{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}
				{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

                            <section>
                            
				<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">
					<a itemprop="url" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><h2><img itemprop="image" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" height="{$homeSize.height}" width="{$homeSize.width}" title="{$product.name|escape:html:'UTF-8'}" alt="{$product.name|escape:html:'UTF-8'}" ></h2>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>
					<p class="s_title_block"><a itemprop="url" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|truncate:50:'...'|escape:html:'UTF-8'}"><h1 itemprop="name">{$product.name|truncate:50:'...'|escape:html:'UTF-8'}</h1></a></p>
					<div itemprop="description" class="product_desc"><a href="{$product.link|escape:'html':'UTF-8'}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:360:'...'}</a></div>
					<div>
						<a class="lnk_more" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

                                        <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">

                                          <meta itemprop="category" content="{$link->getCategoryLink($smarty.get.id_category, null, $lang.id_lang,null,null )|escape:'html':'UTF-8'}" />

						{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p itemprop="price" class="price_container"><h2><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></h2></p>{else}<div style="height:21px;"></div>{/if}
						
						{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}
							{if ($product.quantity > 0 OR $product.allow_oosp)}
							<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>
							{else}
							<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>
							{/if}
						{else}
							<div style="height:23px;"></div>
						{/if}

                                        </div>

					</div>
				</li>

                            </section>

			{/foreach}
			</ul>
		</div>
	{else}
		<p>{l s='No featured products' mod='homefeatured'}</p>
	{/if}
</div>
</article>
<!-- /MODULE Home Featured Products -->

 

====================================
Code for Header.TPL for Prefetch , Preload.
====================================
<!-- Prefetch Prerender Subresource Pages -->

    {if $page_name == 'index'}

	  {if isset($products)}

           {foreach from=$products item='product' name='homeFeaturedProducts'}

              <link rel="prefetch" href="{$product.link|escape:'html':'UTF-8'}" />
              <link rel="prerender" href="{$product.link|escape:'html':'UTF-8'}" />
              <link rel="subresource" href="{$product.link|escape:'html':'UTF-8'}" />

              <link rel="prefetch" href="{$link->getProductLink($smarty.get.id_product, null, null, null, $lang.id_lang, null, 0, false)}" />

           {/foreach}

         {/if}

              <link rel="prefetch" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />
              <link rel="prerender" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />
              <link rel="subresource" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />

              <link rel="prefetch" href="{$base_uri}{$lang_iso}/" />
              <link rel="prerender" href="{$base_uri}{$lang_iso}/" />
              <link rel="subresource" href="{$base_uri}{$lang_iso}/" />

    {elseif $page_name == 'category'}

	  {if isset($products)}

            {foreach from=$products item='product' name='products'}

              <link rel="prefetch" href="{$product.link|escape:'html':'UTF-8'}" />
              <link rel="prerender" href="{$product.link|escape:'html':'UTF-8'}" />
              <link rel="subresource" href="{$product.link|escape:'html':'UTF-8'}" />

           {/foreach}

         {/if}

              <link rel="prefetch" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />
              <link rel="prerender" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />
              <link rel="subresource" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />

     {elseif $page_name == 'product'}

         {if isset($images)}

	    {foreach from=$images item='image' name='thumbnails'}
              {assign var=imageIds value="`$product->id`-`$image.id_image`"}

              <link rel="prefetch" href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_liquid')}" />
              <link rel="prerender" href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_liquid')}" />
              <link rel="subresource" href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_liquid')}" />

	    {/foreach}

         {/if}

              <link rel="prefetch" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_liquid')}" />
              <link rel="prerender" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_liquid')}" />
              <link rel="subresource" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_liquid')}" />

              <link rel="prefetch" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_liquid')}" />
              <link rel="prerender" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_liquid')}" />
              <link rel="subresource" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_liquid')}" />

              <link rel="prefetch" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />
              <link rel="prerender" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />
              <link rel="subresource" href="{$link->getPageLink('cart')|escape:'html':'UTF-8'}" />

     {/if}

    <!-- /Prefetch Prerender Subresource Pages -->

 

  • Like 2
Link to comment
Share on other sites
  • 3 years later...
  • 3 years later...
Grafeco Newbie

Grafeco

Posted
Posted

Hello,

This type of optimization is not easy and we have to do it to each page's typology.

Let's take the Product page as an example:

What we do is a specific code to Preload all the static images from a page (for example the logo, images in the footer, etc) and then, we also preload the specify images of this page (image of this product, related products, etc). Also, all depends about the type of theme and page. That's why we make these type of integrations because of the difficulty of the process.

We also create a crontask in the server to regenerate this first code that we are gonna send from the database to the smarty parameters in head.tpl.

 

I hope it's helps.

Kind Regards!

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...