• Status: Closed
  • Closed by: Marek (marek)
  • Closed on: 04.04.17, 19:22
  • Reason: Closed
  • Comment: Glad to help!

FS#10275 - Loading speed and responsive version.

Hi,
Im having problems with my loading speed and responsive version. Is there any suggestion on what should I do to better the loading speed and to fix how the page should behave in responsive?
Thank you so much.

This ticket does not depend on any other tickets.

Marek (marek)
Thursday, 02 March 2017, 22:27 GMT+2
Support Team

First of all you need to compress your images. Total homepage weight is 23Mb, it's incredibly high.
Look at this screenshot too see images weight:
media.promokit.euscreenshotsscreencloudscreenshot20170302_222543.jpg

Since you will compress your images we will move to the next step to make it work faster

Juan (j.s.rivera)
Thursday, 02 March 2017, 22:29 GMT+2

Alright, I'll get on it.

Mind telling me where to find that list of image size so I can see which need editing?

Marek (marek)
Thursday, 02 March 2017, 22:34 GMT+2
Support Team

In google chrome you can go to "View" > "Developer" > "Developer Tools" and click "Network" tab
media.promokit.euscreenshotsscreencloudscreenshot20170302_223329.jpg

Juan (j.s.rivera)
Wednesday, 15 March 2017, 19:59 GMT+2

Hi Marek,

Ive compressed the pictures like you said and the total page weight should be way less.

What should I do next for the page to start loading faster and the responsive version to work properly?

Marek (marek)
Wednesday, 15 March 2017, 21:49 GMT+2
Support Team

Next step is to use cache plugin for wordpress.
Here is detailed manual how to configure it http://hoki.promokit.eu/documentation/#!/performance But this step recommended to start since you will finish to configure your website.

Juan (j.s.rivera)
Wednesday, 15 March 2017, 22:12 GMT+2

Should I download this? Because the performance tap doesn't show up on my wordpress admin menu.

And another question. Running the site through google page insight it says the JS should be compressed.. Is this posible or will it affect in anyway?

Marek (marek)
Wednesday, 15 March 2017, 22:26 GMT+2
Support Team

Yes, you need to install that plugin. Go to Plugins and just find it in search bar http://awesomescreenshot.com/09569m8def That plugin will solve the issue with uncompressed JS

Juan (j.s.rivera)
Wednesday, 15 March 2017, 23:28 GMT+2

About the JS it says in the manual you sent, that this option "Minify" will be used with cloudfare and not W3.

Should I download this plug in as well?

Juan (j.s.rivera)
Thursday, 16 March 2017, 00:07 GMT+2

I found it..
Can I ask your opinion on something:
You think its a good idea to pay for the upgrade for the W3? does it really make it that much faster?

Marek (marek)
Thursday, 16 March 2017, 10:19 GMT+2
Support Team

I didn't use paid vesrion, so I can't compare.
But there are a lot of options available in free version, and it should be enough for the first time

Juan (j.s.rivera)
Thursday, 16 March 2017, 14:41 GMT+2

Hi Marek,

Thanks for giving me your opinion.

I have enable cloudfare and did all that you told me on the performance tab.

I feel the page could load a bit faster. can you check it out and tell me what you think?

Also wanted to ask you about the responsive version cause its not working properly.

Juan,

Marek (marek)
Thursday, 16 March 2017, 20:34 GMT+2
Support Team

Yes, it works faster, but still not fast.
As for me, the best way is to remove some elements from homepage, because it's still to heavy.

Juan (j.s.rivera)
Thursday, 16 March 2017, 20:56 GMT+2

Ok.
Ill work on the homepage elements.

Can you tell me how can I make the responsive version work better.

Marek (marek)
Thursday, 16 March 2017, 20:57 GMT+2
Support Team

What's wrong with responsive?

Juan (j.s.rivera)
Thursday, 16 March 2017, 23:41 GMT+2

All the content is showing up wrong.

you can check out the homepage and you'll see the titles are not responsive in the category grid and the menu is not working. On the shop the widgets are not showing up on the arrow tab like the demo and the single product page is not showing up as it should. Its messy.

Maybe you can check it out and let me know?

Juan,

Juan (j.s.rivera)
Tuesday, 21 March 2017, 15:57 GMT+2

Hi Marek..
Csn you help me?

Marek (marek)
Tuesday, 21 March 2017, 22:06 GMT+2
Support Team

Sorry, I missed this ticket. I'll try to help you with that tomorrow

Marek (marek)
Wednesday, 22 March 2017, 10:35 GMT+2
Support Team

Something wrong with your website. Please check it out

Juan (j.s.rivera)
Wednesday, 22 March 2017, 15:10 GMT+2

DOn't know what happened.. it was working just fine yesterday night.

I can get into the admin page in wordpress but the actual page wont load.

Any idea of what can I do?

Marek (marek)
Wednesday, 22 March 2017, 15:15 GMT+2
Support Team

It works fine for me now. I didn't touch anything

Juan (j.s.rivera)
Wednesday, 22 March 2017, 15:15 GMT+2

I was about to write the same to you.

Juan (j.s.rivera)
Wednesday, 22 March 2017, 21:05 GMT+2

Hi Marek,

Wanted to know if you ha the time to check things out?

Marek (marek)
Wednesday, 22 March 2017, 21:07 GMT+2
Support Team

Yes, I'm here, and back to you as soon as I'll finish one critical ticket. Today :)

Juan (j.s.rivera)
Wednesday, 22 March 2017, 21:16 GMT+2

Dont worry.. Im aware youve helped me plenty

Marek (marek)
Wednesday, 22 March 2017, 21:18 GMT+2
Support Team

Thank you for understanding

Marek (marek)
Wednesday, 22 March 2017, 23:04 GMT+2
Support Team

Responsive version should be much better now. Please check it out

Juan (j.s.rivera)
Thursday, 23 March 2017, 19:28 GMT+2

Hi Marek,

Yes, its working better but I still see some details that maybe you can help me with.

On the single product page things are a bit mixed around. Im sending you a couple of screenshots from my page and your demo so you can see he difference. On your the product pics appear bigger and the description appears below it. Also the rating tab looks like its overlapping.

Juan (j.s.rivera)
Thursday, 23 March 2017, 20:56 GMT+2

Sorry Marek,

I forgot to mentioned that the menu is also showing up wrong. its showing up incomplete.

Marek (marek)
Friday, 24 March 2017, 12:00 GMT+2
Support Team

Hi Juan.
single page issues has been fixed
Regarding menu it looks fine for me:
media.promokit.euscreenshotsscreencloudscreenshot20170324_120014.jpg

Juan (j.s.rivera)
Saturday, 25 March 2017, 17:09 GMT+2

Hi Marek,

Dont know if your available today but still wanted to leave this comment.

About the Menu; it is working but somehow its being cut in the single product page.

Also I would like to ask you for your help on a little issue:

1.In the responsive version on the category grid on the homepage the buttons are not sliding up completely and are being cut, so on some categories its shows up, on others it shows half a button and on some it just doesn't appear. Can you help me out?

2.on this same category grid I would like to ask you if theres anything I can do to fix the "Tienda" title, the one that slides up when you hover the category, and the titles for each category box because its showing up just fine in font size on the desktop version but on responsive its not shrinking to fit the screen.

thank you,

Marek (marek)
Sunday, 26 March 2017, 12:33 GMT+2
Support Team

Here is the fix for menu

@media (max-width:768px) {
  header#masthead {
    position:relative;
    z-index:999
  }
}
Marek (marek)
Sunday, 26 March 2017, 12:41 GMT+2
Support Team

Here is the fix for buttons and "Tienda" title:

@media (max-width:768px) {
body #page .cat_img_wrap .cat-title {
margin-bottom:0
}
.cat_img_wrap .cat-separator {display:none}
.cat_img_wrap strong {margin-bottom:0}
.body .woo_categories-container .plugin-title {font-size:4em}
}
Juan (j.s.rivera)
Monday, 27 March 2017, 02:53 GMT+2

Hi Marek,

Thank you for your help. It did help my menu on the single product page and also it helped with the buttons on the category box, however the title for "tienda" and the category titles are still not responsive.. Any idea of what i might need to do?

Marek (marek)
Monday, 27 March 2017, 11:24 GMT+2
Support Team

Try to use "!important", like this

@media (max-width:768px) {
.body .woo_categories-container .plugin-title {font-size:4em !important}
}
Juan (j.s.rivera)
Monday, 27 March 2017, 15:31 GMT+2

Still not working... you mind checking it out?

Juan (j.s.rivera)
Monday, 27 March 2017, 18:33 GMT+2

Hi Marek,

I also found another thing in the lookbook page on the responsive version.

Ill send you an attachment so you see whats up.

Marek (marek)
Tuesday, 28 March 2017, 11:34 GMT+2
Support Team

It should be much better now

Juan (j.s.rivera)
Tuesday, 28 March 2017, 15:26 GMT+2

Yes its much better now.

I think you got to fixing the title for "tienda" in the responsive version. Thanks for the help. Maybe you can help me out with the category box titles that still showing up to big?

Juan (j.s.rivera)
Tuesday, 28 March 2017, 16:05 GMT+2

Hi Marek,

Also wanted to ask you: In my responsive version on the category shop the products are showing in 1 column. Is there a way to show them in tow columns? Also is there a way to take the page numbers that appear on top to only show up only at the bottom?

Juan (j.s.rivera)
Tuesday, 28 March 2017, 19:56 GMT+2

Hi Marek,

I figured out the code for the category box title for it to be smaller on responsive. so don't worry about that.

Although I still need help with my last comment on the category shop and the items being shown in responsive.

Marek (marek)
Wednesday, 29 March 2017, 11:33 GMT+2
Support Team

The fix for page navigation is following:

@media (min-width:1600px) {
.woocommerce nav.woocommerce-pagination ul li a{
line-height:30px
}
.woocommerce nav.woocommerce-pagination ul li {
width:34px;
height:34px;
margin-left:5px;
}
}
Juan (j.s.rivera)
Wednesday, 29 March 2017, 14:38 GMT+2

Hi Marek, good morning.

The code isnt changing anything on my category shop in responsive. The shop still showing up in a list of only one column and the page number still is showing up on top.

What i want is for the products to show up in a 2 column list on responsive and for the page number tab to be only at the bottom.. is it possible?

Check out my attachment for my second to last comment.

Juan (j.s.rivera)
Wednesday, 29 March 2017, 19:08 GMT+2

Something like the picture in the attachment. This is a print screen of how its showing up on an ipad.

Marek (marek)
Wednesday, 29 March 2017, 22:48 GMT+2
Support Team

I'm sorry, my mistake.
I forgot to change the max-width.
Please change "@media (min-width:1600px) {"
to "@media (max-width:768px) {"

Juan (j.s.rivera)
Wednesday, 29 March 2017, 23:09 GMT+2

Hi, I did just that but still no change.

Can you check it out? Maybe tomorrow if its too late.

Marek (marek)
Wednesday, 29 March 2017, 23:09 GMT+2
Support Team

Let me try

Marek (marek)
Wednesday, 29 March 2017, 23:13 GMT+2
Support Team

Here is how i see it
media.promokit.euscreenshotsscreencloudscreenshot20170329_231317.jpg

Juan (j.s.rivera)
Wednesday, 29 March 2017, 23:23 GMT+2

Oh. My mistake if I didnt make my self clear. English is not my first language.

Besides that which by the way thank you i wanted it to look like that. I also was wondering if its possible to show product 2 at a time like the attachment i sent you from the ipad version.. If you see in responsive, on a telephone screen the shop shows up in a list of 1.

Ill send you attachment for how it is and how i want it (if possible)

Marek (marek)
Wednesday, 29 March 2017, 23:25 GMT+2
Support Team

But there is really little place for such view

Juan (j.s.rivera)
Wednesday, 29 March 2017, 23:27 GMT+2

the thing is that when i see it in my phone (iphone 6) the pictures show up so big and the full space button make it difficult to scroll down.

Can you show me how to do it so i can check it out and see how it shows up? or maybe you have any idea of how could i make it better?

Marek (marek)
Thursday, 30 March 2017, 09:57 GMT+2
Support Team

Now it should be ok.

Juan (j.s.rivera)
Thursday, 30 March 2017, 14:06 GMT+2

Can I ask you to teach me how to change it from 1 column to a 2 columns in case i want it back? Just to learn how to cause I love how it looks now

Marek (marek)
Thursday, 30 March 2017, 22:38 GMT+2
Support Team

Here is it:
media.promokit.euscreenshotsscreencloudscreenshot20170330_223800.jpg

col-xs-12 - 1 column
col-xs-6 - 2 column

Juan (j.s.rivera)
Friday, 31 March 2017, 14:35 GMT+2

Wow! thank you for the help

Juan (j.s.rivera)
Saturday, 01 April 2017, 03:19 GMT+2

Hi Marek,

Can you help me with this problem: my cart is showing up way big.

Marek (marek)
Saturday, 01 April 2017, 09:57 GMT+2
Support Team

Strange, but I see it like this:
media.promokit.euscreenshotsscreencloudscreenshot20170401_095649.jpg

Juan (j.s.rivera)
Saturday, 01 April 2017, 13:53 GMT+2

Yes, my bad. Forgot to mentioned that it shows up like i showed you on the single product page and on the store.

Marek (marek)
Monday, 03 April 2017, 11:52 GMT+2
Support Team

Try this fix:

@media (max-width:768px) {
#page .woocommerce ul.cart_list li a, #page .woocommerce ul.product_list_widget li a {display:flex;align-items:center}
#page .woocommerce ul.cart_list li a img, #page .woocommerce ul.product_list_widget li a img {width:100px}
}
Juan (j.s.rivera)
Monday, 03 April 2017, 14:23 GMT+2

I put down the code you gave me but the problem persist.
What should i do?

Marek (marek)
Tuesday, 04 April 2017, 09:50 GMT+2
Support Team

That was my mistake. Now it works

Juan (j.s.rivera)
Tuesday, 04 April 2017, 14:15 GMT+2
Marek (marek)
Tuesday, 04 April 2017, 18:42 GMT+2
Support Team

I just enabled that fix for all devices, please check it out

Juan (j.s.rivera)
Tuesday, 04 April 2017, 18:44 GMT+2

The cart is working now. still it makes the screen a little bigger when it pops up, so i have to scroll it a little to the right to see it fully

Marek (marek)
Tuesday, 04 April 2017, 19:03 GMT+2
Support Team

Fixed

Juan (j.s.rivera)
Tuesday, 04 April 2017, 19:04 GMT+2

thank you

Loading...