Welcome, Guest!
By registering with us, you'll be able to discuss, share and private message with other members of our community.
Search the Community
Showing results for tags 'speed'.
Found 3 results
-
Hi, This is the last module of my production. This one addresses the biggest concern of any website owner, performance. So I decided to produce a useful and very easy to use module, within the reach of the uninitiated. This module will be able to intervene on 4 points in total independence: Application of Lazy Loading native to modern browsers Activate LazyLoading for all old browsers Preloading of pages before their visit at the request of the visitor Preconnection to external services This can be scary for everyone, so I have attached a very comprehensive FAQ that should answer all questions from users of this module. For those of you who already know my productions, you know that I attach great importance to consistency and simplicity so that everyone can take full advantage of their PrestaShop. Here, the module installs itself and does not touch the source code of your site but manages to work before the page is displayed, so for the Lazy Loading, all the images of your site will be processed even if they are not integrated in your Template which can integrate this method of loading images using javascript, which is less efficient since the processing takes place on the client side after the content is created. Download module Demonstrations
- 30 replies
-
- 1
-
-
- addon
- mediacom87
- (and 6 more)
-
The default Niara theme gets the Raleway font all the way from a google server linked from the header template, about line 51 Example.com/themes/niara/header.tpl You can delete that line or put comment tags round it like {*...*} {*<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">*} Example.com/themes/niara/css/global.css - the main style sheet - chooses Raleway, or Helvetica font as a backup. Helvetica is a web-safe font already in most browsers, so your site now reverts to Helvetica and becomes a bit faster. You can see the difference on the waterfall section of a gtmetrix test. If you follow the fonts.google link you can see why: it loaded every known weight of the Raleway font for three different alphabets. If you want to keep Raleway, at least for modern browsers https://google-webfonts-helper.herokuapp.com/fonts/raleway?subsets=latin shows you how to download just the bits you want, such as latin default 400 weight , 500, 600 and 700. It lets you download them as a zip file with a name like raleway-v22-latin.zip. Download the zip file. Upload to: example.com/themes/niara/fonts/ Extract (unzip) the font files there. If webfonts helper isn't online, you can see the names of the latin fonts to download in the file below; they come from https://fonts.googleapis.com/css?family=Raleway. You just have to save them with the same name that the lines below call them. The same page of webfonts helper has lines starting @font-face which you can cut and paste to the top of Example.com/themes/niara/css/global.css /* raleway-regular - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/raleway-v22-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/raleway-v22-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* raleway-500 - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; src: local(''), url('../fonts/raleway-v22-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/raleway-v22-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* raleway-600 - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; src: local(''), url('../fonts/raleway-v22-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/raleway-v22-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* raleway-700 - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; src: local(''), url('../fonts/raleway-v22-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/raleway-v22-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ That's it! After the usual cache clearance, your Helvetica site should now revert to Raleway, but be a bit faster than before. Next time you update the theme with the core updater, it will show a list of manually changed files including header.tpl as a reminder to copy the changed bits over to the new version. It keeps copies in the directory you use for the back office. There are probably neater ways of doing this or explaining it and suggestions are welcome. I haven't tried using other fonts. ---------edit: I'd forgotten Modules > Themeconfigurator > Displayliveconfigurator YES > View lets you choose some other google fonts without changing any code at all. They still take a fraction of a second to download from another site, but some might have fewer alphabets and weights than Raleway. -
I am not at all an expert on page load time. But nowdays modern browser show quite nicely, where the time is "spent" on. Often a website is slow, because of many requests. Every image (non cached) means a reqeuest to your server. This can have serious negative effects on your page load time. To deal with it, you can use "Lazy Loading" Plugins. Another way - which I like more - is to defer images. Yesterday I found the following article: https://varvy.com/pagespeed/defer-images.html IMO the artice is very easy to understand. If you want to implement it in your shop: You just need to adjust tpl files of your theme. The <script> part can be added in footer.tpl. The rest depends on what you want to achieve. As an example: https://www.spielezar.ch. The images on the footer (payment logo and facebook image) are loaded deferred. For the visitor there is no difference at all, as this images are not in the view when the page is loading. But the page just loads faster. If you have any questions about it, feel free to ask!
