Webboptimering med YSlow - Grade A och 97 procent i prestanda

Nu har jag byggt på Clouderia CMS för att hitta maximal optimering enligt Firefox-tillägget YSlow från Yahoo. Detta på utdata och server-inställningar, knappt några kodförändringar. Webbplatsen presterar nu Grade A och 97% enligt YSlow och då är jQuery, jQuery UI, en egen javascript-fil, några bilder med i paketet. Utan att …

Optimerad webbsida
Nu har jag byggt på Clouderia CMS för att hitta maximal optimering enligt Firefox-tillägget YSlow från Yahoo. Detta på utdata och server-inställningar, knappt några kodförändringar.

Webbplatsen presterar nu Grade A och 97% enligt YSlow och då är jQuery, jQuery UI, en egen javascript-fil, några bilder med i paketet. Utan att ta bort dessa kan jag inte nå 100% verkar det som.

Nästa steg är att fokusera på Google Page Speed och Slowcop genom att jobba med hur Clouderia cachar information från databas och kanske lite pill med index i MySQL.

Project properties in Visual Studio 2010
För att slå samman CSS- och javascript-filer kan jag rekommendera MSBuild-funktionen jag använt. Då Clouderia är öppen källkod kan du kolla hur det ser ut på vår sida hos Google Code.

Sedan under projektets egenskaper fyller du i följande instruktioner (som även talar om var de kombinerade/minifierade filerna hamnar): 

$(MSBuildBinPath)\\msbuild.exe "$(ProjectDir)MSBuild\\MSBuildSettings.xml" /p:CssOutputFile="$(TargetDir)**..\\content\\style.min.css**" /p:JavaScriptOutputFile="$(TargetDir)**..\\scripts\\scripts.min.js**"

MSBuildSettings.xml innehåller inställningar för vilka CSS- och javascript-filer du vill bearbeta, leta i filen efter följande del och ändra till vad du nu har för filer att kombinera:

<ItemGroup>
 <JavaScriptFiles Include="..\\Scripts\\jquery.ui.core.js"/>
 <JavaScriptFiles Include="..\\Scripts\\jquery.ui.widget.js"/>
 <JavaScriptFiles Include="..\\Scripts\\jquery.ui.position.js"/>
 <JavaScriptFiles Include="..\\Scripts\\jquery.ui.autocomplete.js"/>
 <CssFiles Include="..\\Content\\reset.css" />
 <CssFiles Include="..\\Content\\960.css" />
 <CssFiles Include="..\\Content\\style.css" />
 </ItemGroup>

Lycka till med optimerandet.

Andra delar i serien om webboptimering