Logo Nivo-Media Internet Marketing
Bel nu: 0318-469887

Prestashop 1.6 above the fold CSS module

Finally. The solution is here: the Critical Path CSS manager.

Above the fold CSS optimization so far has been tedious and required a lot of work.
Critical Path CSS manager will take this work out of your hands.

What it does.

It places the above-the-fold CSS in the header and moves the standard CSS to the footer.
Optionally you can replace the standard CSS with CSS which had been cleaned from unused style rules.

How it works.

Obtain your copy from the Prestashop Addon store and install the module as usual. Then access the configuration screen.
Here you will see 3 buttons:

As a default the button settings are set to “No”, which means that the module has been deactivated.
Critical Path management can be activated separately for the Home page, the product pages and the category pages.

If a button is set to “Yes”, the input box for the critical rending path CSS will appear. Activated for all three page types it will look like this:

In this picture you see the above-the-fold CSS already inserted.
The CSS is the same on all pages for each pages page type. So all category pages will get the critical path CSS you insert here.
This is considered to be a no risk or low risk method. However, you might want to get your critical path CSS for the page with the most page elements to be most effective.

How to get above-the-fold CSS.

Whichever (online) system you use, make sure, that once Critical Path CSS Manager is activated, the url you submit has the querystring nm_vars=2 in it.
Example for a productpage: https://www.example.com/3-myproduct.html?nm_vars=2
If you prefer to get the critical path CSS online, then you can get it on this site: https://www.nivo-media.nl/css-tools/

How to get in touch.

If you have any questions or remarks, then you are welcome to put your remarks in the comments. The preferred method however is to submit (completely privately) your question here>>

Where to look for a demo.

http://prestashop.nivo-media.nl/ is the official demo site. Please do look at the HTML source.

Tests.

(Please note: Tests were performed on the demo site and without minified HTML, so you can review the HTML source easier).
* The results of Google’s PageSpeed insights for the home page can be viewed here>>
* The difference in score can be viewed here>>
Conclusion for the home page:
For desktop a difference of 85 versus 100 with module.
For mobile a diffence of 95 versus 100 with module.
Try it yourself for http://prestashop.nivo-media.nl/?nm_vars=2 (without module) and http://prestashop.nivo-media.nl/ (with module)

Happy sales!


*Note: I cheated here a little bit. I put the external Google fonts sheet in the footer manually, which results in a much higher score.
I highly recommend locally hosted Google fonts which will render your pages much faster. For that you can visit this site>>
Also note, that the “Remove render blocking CSS” message has disappeared.
Finally I have replaced the standard slider and banner images with optimized ones. The diffence can be seen when testing the category and product pages.

 

Website optimalisatie

Website optimalisatie: een noodzaak?

Website optimalisatie is het verbeteren van uw website. Na website optimalisatie is uw website: beter vindbaar in de zoekresultaten van Google en de andere zoekmachines, de website wordt sneller geladen, overzichtelijker omdat de bezoekers beter hun weg kunnen vinden, gebruikersvriendelijker en u krijgt u meer relevante bezoekers

Uw website beter vindbaar maken

Wij passen uw website zodanig aan, dat u hoger in de zoekresultaten komt te staan en vaker gevonden wordt met bekende en minder bekende zoekwoorden. Zodoende krijgt u meer bezoekers op uw website, maar vooral ook bezoekers die meer gemotiveerd zullen zijn om klant te worden.

De optimalisatie: het proces

Aan de basis van website optimalisatie staat een grondig zoekwoorden-onderzoek en concurrentieanalyse. Niet alleen uw website zullen wij analyseren maar ook die van uw collega’s. Dat geeft ons de voorsprong die wij nodig hebben, om uw website er te laten uitspringen. De volgende stap zal zijn het de technische optimalisatie van de tekst en code. In deze fase graven wij diep in de structuur van de tekst en de correctheid van de code om de website zo goed mogelijk vindbaar te maken en de kwaliteit van de website te verbeteren. Zowel voor u als voor uw bezoeker en klant. Voor meer informatie kunt u onze SEO-werklijst eens bekijken.

Website optimalisatie: de kosten: goedkoper dan u denkt

Voor website optimalisatie rekenen wij €65,- per uur ex. BTW. Zie voor meer informatie onze tarieven.

SEO-Advies

SEO-advies: waarover?

Bij website verbeteren spelen enorm veel aspecten een rol.
Die aspecten zijn globaal in twee categorieën onder te brengen:

  • Inhoudelijke aspecten van de website
  • Technische aspecten

SEO advies: Structuur van de website

Met de structuur bedoelen we onder andere de volgende punten:

  • Wervingskracht
  • Duidelijkheid in menustructuur
  • Bedieningsgemak voor de gebruiker

De bediening en snelheid van een website is van doorslaggevend belang bij een beslissing om een site verder te bekijken dan wel te verlaten. Dat gebeurt zelfs al in de eerste paar seconden. Het heeft weinig zin om bezoekers te trekken zonder dat uw website uitnodigt om die actie te ondenemen, die u van de gebruiker wenst. Niet voor niets dat Google de "gebruikerservaring" als speerpunt van hun marketing gebruikt.
In ons advies-rapport zal een beoordeling staan op bovenstaande drie punten. Wanneer u besluit ons een optimalisatieopdracht te geven, bespreken we de details met u en/of uw webmaster.

SEO advies: technische aspecten

Voor het technisch realiseren van betere zoekresultaten hebben we een SEO-werklijst geformuleerd. Aan hand daarvan vinken wij aan, voor welke werkzaamheden u zou kunnen kiezen om uit te voeren. Ook geven wij een schatting aan van de tijd die wij verwachten nodig te hebben voor het uitvoeren van elk punt.
Wanneer u geïnteresseerd bent komen we over de details uiteraard nader te spreken.

Het SEO advies is klaar. Wat nu?

De volgende stap is een gesprek, waarbij we nader op de werkzaamheden ingaan.
– Zo is het is mogelijk, dat we afspreken, uitsluitend een adviserende rol op ons te nemen. Dat betekent, dat uw eigen webmaster de werkzaamheden ter hand neemt. In dat geval krijgt u een gedetailleerd rapport met een lijst met aanbevelingen, die uw webmaster zou kunnen uitvoeren.
– Het is natuurlijk ook mogelijk dat wij dat voor u doen. We stellen dan een pakket van werkzaamheden samen dat past binnen uw budget.

De kosten

Voor het verbeteren van uw website rekenen wij €65,- per uur ex. BTW. Zie voor meer informatie onze tarieven.