Our clients website load really slow on the first load (the TTFB on the page document can be 10-20s). If I reload the page, the site loads a lot faster.
This may be because of a lot of the files are cached?
Website is here: https://www.mortels.com.au/
This happens for a lot of the pages.
I have tried merging some of the .css files, and will try to attempt the .js files if I cannot find anything else (I never built the original theme, so finding it hard to figure out what is done where and do not have much experience with developing in Shopify.
I also tried adding a lazyloader however it doesn't look like it is working.
Would anyone have any solutions to make the website load quicker? Could it be just the apps we have running on the website causing the initial response to be so slow?
One of the things that can hinder your site's load speed is having too much logic happening through Liquid tags. Shopify has to parse all of the page's Liquid code before it can serve the page, and that has a direct effect on the TTFB
For the files that have unacceptable TTFB ratings, some things you can try to do to help make Shopify's servers serve your content faster include:
Reducing the number of lookups (eg: through all_products[handle] on the page
Avoiding nested for whenever possible
Replacing loops with map whenever you need to make an array of values
Rewriting logic-heavy sections to run in Javascript instead of Liquid (and using the | json filter to drop your liquid variables in a Javascript-friendly version)
Hope this helps!
Related
In Shopify:-
When my for loop code run then this issue occurred:-
"There was a problem loading this website
Try refreshing the page.
If the site still doesn't load, please try again in a few minutes."
console error is
"Failed to load resource: the server responded with a status of 502 ()"
How to fix it.
Seems like your Shopify site has too many collections and products within them so it just fails to load all of them due exceeding memory limits.
I'm assuming that you're trying to replicate the page from the reference URL you provided in your comment. Consider one of the options below to implement the required functionality:
Create different automated collections for each price range using Product price is less than condition. This approach is good as it uses Shopify's engine to generate collections, but it still might be quiet tricky to implement grouping as on the ref site you provided in comments.
Load collections and its products using AJAX requests i.e. request the data only when a customer is scrolling the page down. It will increase page load speed and will slightly decrease the Shopify site load but still is not ideal as data still will be requested on every page load and scrolling down events. You can slightly improve the situation by caching results on the clients' side, but again, is not ideal still.
Create a custom Shopify application that syncs products with your database. Then you can create an URL on your server that will be used as a data provider for your page. It can be requested via AJAX and return JSON with all the products, grouped by collections and matching the request parameters e.g. price less than X.
You can go further and add a proxy extension to your app. Shopify proxy would allow you loading a custom page directly from your server with the data from your database and render it within Shopify site like a part of itself.
In general, this approach gives you more flexibility on data to output, which can also be cached on your side to increase page speed load drastically.
Personally, I would prefer the last option.
Ive made a minor text change to our website, the change is minor in that its a couple of words, but the meaning is quite significant.
I want all users (both new and returning) to the site to see the new text rather than any cached versions, is there a way i can force a user (new or returning) to re download the page, rather than fetch it from their browser cache ?
The site is a static html site hosted on a LAMP server.
This depends totally on how your webserver has caching set up but, in short, if it's already cached then you cannot force a download again until the cache expires. So you'll need to look at your cache headers in your browsers developer tools to see how long it's been set for.
Caching gives huge performance benefits and, in my opinion, really should be used. However that does mean you've a difficulty in forcing a refresh as you've discovered.
In case you're interested in how to handle this in the future, there are various cache busting methods, all of which basically involve changing the URL to fool the browser into thinking its a different resource and forcing the download.
For example you can add a version number to a resource so you ask for so instead of requesting index.html the browser asks for index2.html, but that could mean renaming the file and all references to it each time.
You can also set up rewrites in Apache using regular expressions so that index[0-9]*.html actually loads index.html so you don't need multiple copies of the file but can refer to it as index2.html or index3.html or even index5274.html and Apache will always serve the contents of index.html.
These methods, though a little complicated to maintain unless you have an automated build process, work very well for resources that users don't see. For example css style sheets or JavaScript.
Cache busting techniques work less well for HTML pages themselves for a number of reasons: 1) they create unfriendly urls, 2) they cannot be used for default files where the file name itself is not specified (e.g. the home page) and 3) without changing the source page, your browser can't pick up the new URLs. For this reason some sites turn off caching for the HTML pages, so they are always reloaded.
Personally I think not caching HTML pages is a lost opportunity. For example visitors often visit a site's home page, and then try a few pages, going back to the home page in between. If you have no caching then the pages will be reloaded each time despite the fact it's likely not to have changed in between. So I prefer to have a short expiry and just live with the fact I can't force a refresh during that time.
I am new to Shopify and Liquid. While reading I came up with an doubt that which of the two options are good:
If site is hosted on Shopify i.e. Shopify is a server:
Client request to server and server renders the HTML pages.
Client request to server and server converts liquid files to HTML pages and then renders.
clearly 2) will take time.
I have read the use of liquid is that we can use logic there. But still are we not taking extra time to render the page. So, why we are doing this?
When you let Shopify turn Liquid constructs into HTML, it takes the templates and data from the servers and securely turns them into strings of HTML. It then renders complete HTML in your browser.
You cannot screw up the data since you have no access to it except via correct and allowed controls built in to Shopify
they can render those strings faster than you ever could, so speed is not really an issue
They let you screw up your page load time in plenty of other ways, like non-optimized images, non-minimized CSS and JS... but for the most part, you should be very happy Shopify uses Liquid. It means you can focus on your job without worrying about petty things you should not be worried about. Plus you get global CDN for assets, making your shop fast in all corners of the wired globe, something you could not do on your own, cheaply.
I want to exclude a number of items on my website when viewing it on a screen with a small screen resolution so I'm using CSS media queries to hide the items. But a Facebook Like box, for example, is still loaded in the background - a number of javascripts and css files - how do I prevent them from being loaded in order to decrease the page load time?
Right now I'm using PHP to check user agent and then simply exclude the code, but I wonder if that is the best way really. Over time I will have to change the PHP when new devices are introduced for instance. Is a script like Modernizr an option here?
Using a back-end and front-end mix would be best. You can use something like WURFL or even Apache Mobile Filter to make it easier to work on the back-end, and loading certain content only when is_tablet() or is_mobile() are true.
On the other hand, I'd recommend checking jQuery image lazy-loading and share-button on demand loading (like techcrunch.com does). Those two fron-end techniques can really improve page load times (they cut almost in half the initial pageload time on my site).
Depending on the situation, you could also use Modernizr (a front-end javascript solution) to detect something truthy (such as [if width > 320]) and then conditionally load some scripts etc based on that.
I have a web page that has 70000 characters. As you know when doing translation through Google API you can only send up to 5000 characters at a time. Which means I have to send data to Google 14 times (70000/5000) which takes a lot of time and then my page is displayed. Is there a way to speed up the process?
Thanks
have you tried caching the translation?
If you were using some AJAX framework (you don't mention what your web page is created with eg c#) then you can make it faster by making the API call via the AJAX framework.
It would look something like this (psuedo-code since we don't know what you are using):
Serve web page (almost instant)
Web page starts AJAX call:
Break text into chunks
Foreach chunk
Translate via API
Append to the page
This way the user will see the page immediately, and will also see the translation appear piece by piece as it is processsed instead of having to wait until the end.
My best bet would be to generate a page in one language, then ask google to translate it trough HTTP and display result as your own, to make it seamless for user. I believe that is what Google Chrome does when translating web pages.
Example of URL that makes Google translate the whole web page:
http://translate.google.com/translate?hl=en&sl=ru&tl=en&u=http%3A%2F%2Flinux.org.ru%2F
Of course, another option is to use Google Translate API and cache result if page content is not changing frequently.
go to the Javascript file in Google, it will lead you also to the CSS file, make a file or perhaps two, or you may be able to add CSS to your own, now make Javascript page on your web site in own directory. make a nip of code to update the Javascript code every so many seconds or minutes, and this will make the transition much faster, just by refreshing the content they give.. have fun :) also ultimately you can also send a request at the same time as the first one to translate after char 5000 which should be relatively easy to do.