PDA

View Full Version : How to optimize a Responsive Web Design Project?



chitkusing
05-26-2017, 07:02 PM
Responsive Web design frameworks like bootstrap, foundation 3, Semantic UI comes with a big size bundles, they will contain large size of css and jquery. But our website should be lite in weight and faster in loading in order to get best visibility in search engines.

How to optimize a Responsive Web Design Project?

vangogh
05-27-2017, 10:31 AM
If you think the size of those frameworks is too large to build a fast site, then don't use those frameworks, though I'm guessing the frameworks aren't the problem as the companies who make and use the frameworks all have quickly loading sites.

Website performance isn't a topic that can realistically be covered in a single forum thread. There are too many possible things that could slow down your site. You can test your site at WebPageTest (https://www.webpagetest.org/) (owned and run by Google) in order to know where the performance bottlenecks are.

Harold Mansfield
05-27-2017, 10:54 AM
I agree with VG. Topic is too big with too many variables. Narrow it down to a specific project and tell us how it's being built or what it's being built on, and it's likely someone here who designs or develops for the web has experience with that specific CMS or languages or the specific thing you're trying to do.

mattkuter
05-29-2017, 11:45 PM
One thing that you can keep in mind is that you can usually load the frameworks from their Content Delivery Networks (CDN). Many sites do this and so there's a good chance that a visitor to your site would already have the library in their browser's cache.

There are also a number of lighter weight frameworks that can be used instead but they don't include everything and the kitchen sink so it really does depend on your requirements as Steven and Harold have already said!

WhitneyLamb
05-26-2021, 02:17 PM
One thing that you can keep in mind is that you can usually load the frameworks from their Content Delivery Networks (CDN). Many sites do this and so there's a good chance that a visitor to your site would already have the library in their browser's cache.

There are also a number of lighter weight frameworks that can be used instead but they don't include everything and the kitchen sink so it really does depend on your requirements as Steven and Harold have already said!

The cache is one of the easiest, quickest, and most effective ways to optimize website performance. Magento fulfills almost all the essential types of caches required for an ecommerce store. It allows the user to enable and disable caches through a single command line. Cloudways takes a great interest in writing about Magento 2 Cache (https://www.cloudways.com/blog/magento-2-cache/). To read it for yourself visit Cloudways blog

gimli
10-16-2021, 06:11 AM
I love responsive design questions for the very fact that most people seem to worry about loading times and also that visuals load correctly on smaller devices. That is obviously very important but there are other components.

Nobody ever talks about switching out elements and providing a UX that is "normal" to phone users.


A simple example, you have a hover image effect on desktop great, when it goes to mobile the image will either just appear on its own or with the hover part active - but the script still loads - it isn't needed.
Do your parallax scrolling really look great on a mobile device? Yes, your image scaled down nicely but now that the image is in a smaller frame is it still so impactful? Would another be better suited?

As was said above one thread in insufficient to cover even the technical aspects never mind the UX that goes along with mobile responsive website design.

I thin as user metrics become more and more important to Google we are going to see people talk about this more and more.

However, in the traditional sense of things, page speed insights, Gtmetrix, webpagespeedtest.org are decent sites ignore their scores and look at your waterfalls see how your pages are loading ( you can even do this in chrome developer tools ) and try to dynamically load js, CSS and other such resources when it's needed.